2012-02-25 12 views
6

Soy un novato y ejecuté mi código a través de un validador html.lista desordenada navegación estructura html

En cuanto a mi navegación recibo un mensaje que dice:: Elemento ul no permitidos como hijo del elemento ul en este contexto"

Aquí es la estructura html:

<nav> 
<div class="nav_container"> 
<ul class="navigation"> 

<ul class="logo"> 
    <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li> 
</ul> 
<ul class="subnav"> 
    <li><a href="index.htm">home</a></li> 
    </ul> 
<ul class="subnav"> 
    <li><a href="reclaimedwood.htm">reclaimed wood</a></li> 
     <li><a href="design.htm">design</a></li> 
    </ul> 
    <ul class="subnav"> 
    <li><a href="flooring.htm">flooring</a></li> 
    <li><a href="paneling.htm">paneling</a></li> 
    <li><a href="beams.htm">beams</a></li> 
</ul> 
<ul class="subnav"> 
    <li><a href="shelving.htm">shelving</a> 
    </li><li><a href="mantels.htm">mantels</a></li> 
</ul> 
<ul class="subnav"> 
    <li><a href="news.htm">news</a></li> 
</ul> 
<ul class="subnav"> 
    <li><a href="woodtypes.htm">wood types</a></li> 
    <li><a href="phrases.htm">phrases</a></li> 
</ul> 

</ul> 
</div> 
</nav> 

¿Cuál es el problema? se ve bien en todos los navegadores. ¿Debo estar preocupado o tomar medidas?

+0

Ajustar las listas desordenadas internas dentro de las etiquetas 'li'. Editar: Yaron me golpeó. –

Respuesta

8

Un ul no puede ser un hijo directo de otro ul, que debe ser contenida dentro de una li

<ul class="navigation"> 
    <li> 
    <ul class="logo"> 
     <li><a href="index.htm"><img src="images/rh_logo_v5.png" alt="roundhaus logo"/></a></li> 
    </ul> 
    </li> 
    <li> 
    <ul class="subnav"> 
     <li><a href="index.htm">home</a></li> 
    </ul> 
    </li> 
    <li> 
    <ul class="subnav"> 
     <li><a href="reclaimedwood.htm">reclaimed wood</a></li> 
     <li><a href="design.htm">design</a></li> 
    </ul> 
    </li> 
    <li> 
    <ul class="subnav"> 
     <li><a href="flooring.htm">flooring</a></li> 
     <li><a href="paneling.htm">paneling</a></li> 
     <li><a href="beams.htm">beams</a></li> 
    </ul> 
    </li> 
    <li> 
    <ul class="subnav"> 
     <li><a href="shelving.htm">shelving</a></li> 
     <li><a href="mantels.htm">mantels</a></li> 
    </ul> 
    </li> 
    <li> 
    <ul class="subnav"> 
     <li><a href="news.htm">news</a></li> 
    </ul> 
    </li> 
    <li> 
    <ul class="subnav"> 
     <li><a href="woodtypes.htm">wood types</a></li> 
     <li><a href="phrases.htm">phrases</a></li> 
    </ul> 
    </li> 
</ul> 

también se puede dar el menú de algunas partidas añadiéndolo en el li antes de la ul niño,

+0

gracias por el consejo y la información –

7

que debe envolver cada uno de los ul interior con una li

<ul class="navigation"> 
    <li> 
     <ul> 
      <li>...</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li>...</li> 
     </ul> 
    </li> 
    <li> 
     <ul> 
      <li>...</li> 
     </ul> 
    </li> 
</ul> 
1

Usted necesita para envolver

<ul class="navigation"> 
<ul class="logo"> 

como

<ul class="navigation"> 
    <li> 
    <ul class="logo"> 
    ... 
    </ul> 
    </li> 

y así sucesivamente ...

3

Su estructura probablemente sea incorrecta. Logo no es una lista o elemento de lista. Además del elemento de la lista que contiene solo, otra lista es generalmente inútil.

Uso elemento para el logotipo de la partida (que suelen utilizar H1 para la página de inicio y H3 con enlace en su interior para otras páginas):

<!-- for home page --> 
<h1 id="logo">Company</h1> 

<!-- for other pages --> 
<h3 id="logo"><a href="/">Company</a></h3> 

y asegúrese de que su navegación tiene jerarquía correcta de esta manera:

<ul> 
    <li><a href="#">Products</a> 
     <ul> 
      <li><a href="#">Desktops</a></li> 
      <li><a href="#">Laptops</a></li> 
      <li><a href="#">Tablets</a></li> 
     </ul> 
    </li> 
    <li><a href="#">About</a> 
     <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Contacts</a></li> 
     </ul> 
    </li> 
</ul> 

En el ejemplo, cada LI tiene su propio enlace y subsecciones de sección que representa el enlace, y por lo tanto el texto del enlace se dirige a la lista de subsecciones.

Cuestiones relacionadas