¿Cómo puedo hacer que se pueda hacer clic como enlace en toda el área de un elemento de la lista en mi barra de navegación?

Tengo una barra de navegación horizontal hecha de una lista desordenada, y cada elemento de la lista tiene mucho relleno para que se vea bien, pero la única área que funciona como enlace es el texto en sí. ¿Cómo puedo permitir que el usuario haga clic en cualquier parte del elemento de la lista para activar el enlace?

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

No ponga relleno en el elemento 'li'. En su lugar, establezca la etiqueta de anclaje display:inline-block;y aplíquele relleno.

Defina la propiedad CSS de su etiqueta de anclaje como:

{display:block}

Luego, el ancla ocupará toda el área de la lista, por lo que su clic funcionará en el espacio vacío junto a su lista.

Haga que la etiqueta de ancla contenga el relleno en lugar del li. De esta manera, ocupará toda el área.

Super, super tarde para esta fiesta, pero de todos modos: también puedes diseñar el ancla como un elemento flexible. Esto es particularmente útil para elementos de lista ordenados o de tamaño dinámico.

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(Advertencia: las cajas flexibles todavía no están bien soportadas. ¡Autoprefixer al rescate!)

Utilice lo siguiente:

a {
  display: list-item;
  list-style-type: none;
}

O podrías usar jQuery:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Debe usar esta propiedad y valor de CSS en su li:

pointer-events:all;

Entonces, puede manejar el enlace con jQuery o JavaScript, o usar una aetiqueta, pero todos los demás elementos de etiqueta dentro de lideben tener la propiedad CSS:

pointer-events:none;

Simplemente aplique el CSS a continuación:

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

así es como lo hice

Haga el <a>bloque en línea y quite el relleno de su<li>

Entonces puedes jugar con el widthy el heightdel <a>en el<li>

Poner el widthque 100%como punto de partida y ver cómo funciona

PD: - Obtenga la ayuda de las herramientas de desarrollo de Chrome al cambiar heightywidth

Siempre puedes envolver toda la etiqueta li con la etiqueta de hipervínculo Aquí está mi solución:

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  text-align: center;
  float: left;
  width: 40px;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <a href="#"><li>One1</li></a>
    <a href="#"><li>Two</li></a>
    <a href="#"><li>Three</li></a>
    <a href="#"><li>Four</li></a>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

Coloque el elemento de la lista dentro del hipervínculo en lugar de al revés.

Por ejemplo con tu código:

<a href="#"><li>One</li></a>