CSS Submenu

[stublackett]

Hi Guys,

 

Just a quick one, I seem to be struggling creating an CSS submenu. The float appears to push the list above it over. I would like it to act as a submenu, I've got near enough the principle right, Its just selecting the right bit of CSS to then style the submenu.

 

My code is as follows

 

HTML....

<div class="topNav">
<ul>
    	<li><a href="index.php" title="Inicio">Inicio</a></li>
        <li><a href="#" title="Estuido">Estuido</a>
        	<ul>
			<li><a href="#">Subitem One</a></li>
			<li><a href="#">Second Subitem</a></li>
			<li><a href="#">Numero Tres</a></li>
            </ul>
        <li><a href="#" title="Arquitectura">Arquitectura</a></li>
        <li><a href="#" title="Interiorismo">Interiorismo</a></li>
        <li><a href="#" title="Rehabilitaction">Rehabilitaction</a></li>
        <li><a href="#" title="Diseño">Diseño</a></li>
        <li><a href="#" title="Contacto">Contacto</a></li>
    </ul>
</div>

 

CSS...

.topNav {
clear: both;
background: #000;
width: 1000px;
height: 80px;
}

.topNav ul {
list-style: none;
margin: 0;
padding: 0;
}

.topNav ul li {
display: inline;
    float: left;
    padding: 45px 39px;
}

.topNav ul li a { color: #ff7e00; font-weight: bold; }

.topNav ul ul { display: none; }

.topNav li:hover ul { display: inline; margin:0; padding:0; }

.topNav ul ul { display: inline; float: left; }

.topNav ul li ul li { display: inline; float: left; padding: 2px; }

.topNav ul li ul li:hover { display: inline; float: left; padding: 2px; }

 

Thanks

[cssfreakie]

since i have nothing to do i am happy to comment this, (no post > 30 days)

 

I would recommend to have a look at the sucker-fish or sons of sucker-fish menu. it's pretty much the basis of a good css menu, done with css. will take you some time to fully master it, but ones you did it's great.

good luck!

 

for now, your inner Ul was missing a </li> behind it should have looked like this:

 

<div class="topNav">

  <ul>

      <li><a href="index.php" title="Inicio">Inicio</a></li>

        <li><a href="#" title="Estuido">Estuido</a>

          <ul>

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

              <li><a href="#">Second Subitem</a></li>

              <li><a href="#">Numero Tres</a></li>

            </ul>

        </li>

        <li><a href="#" title="Arquitectura">Arquitectura</a></li>

        <li><a href="#" title="Interiorismo">Interiorismo</a></li>

        <li><a href="#" title="Rehabilitaction">Rehabilitaction</a></li>

        <li><a href="#" title="Diseño">Diseño</a></li>

        <li><a href="#" title="Contacto">Contacto</a></li>

    </ul>

</div>