CSS
Código HTML:
.topnavigation,
#topnavigation {
clear: both;
height: 300px;
background: url(images/freaklifebanner2.jpg)no-repeat top center;
}
#topmenu {
position: relative;
}
#topmenu li.parentnode {
position: relative;
float: left;
}
#topmenu li.parentnode ul {
position: absolute;
width: 200px;
left: -40px;
top: 28px;
}
#topmenu li.childnode ul {
position: absolute;
top: 0;
left: 200px;
width: 200px;
z-index: 111000;
}
#topmenu ul {
display: none;
}
#topmenu li:hover > ul {
display: block;
}
#topmenu ul.showSubMenu,
#topmenu ul.over {
display: block;
}
#topmenu li.childnode {
display: block;
z-index: 1000;
position: relative;
_display: inline;
}
#topmenu li.parentnode a {
height: 22px;
position: relative;
padding: 5px 6px 3px 7px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1A1A1A #1A1A1A #505050;
border-bottom: solid 2px #27292a;
font-family: arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #fff;
display: block; /* important! DA */
_display: inline-block;
text-transform: uppercase;
}
#topmenu li.parentnode:hover a,
#topmenu li.parentnode a.selected,
#topmenu li.parentnode a:hover {
background-color: #1d4171;
}
#topmenu li.parentnode a:active {
/* background-color: #55a9d8;*/
}
#topmenu li.childnode a {
display: block;
position: relative;
padding: 6px 8px;
font-family: arial, sans-serif;
font-size: 11px;
text-decoration: none;
color: #fff;
border-style: solid;
border-width: 1px;
border-color: #2e5282 #1A1A1A #1A1A1A #2e5282;
background: #1d4171;
height: auto;
text-transform: uppercase;
*min-height: 1px; /* need for ie7 when height= auto ... */
}
#topmenu li.childnode a:hover,
#topmenu li.childnode a.selected {
background: #6d96cb;
}
#topmenu li.childnode:hover > a {
background: #6d96cb;
}
HTML
Código HTML:
<ul id="topmenu" style="none">
<li class="parentnode n_home">
<a href="#">home</a>
<ul>
<li class="childnode">
<a href="#">COMMENT US</a>
</li>
<li class="childnode">
<a href="#">HELP US</a>
</li>
</ul>
</li>
<li class="parentnode">
<a href="#">anime-z</a>
<ul>
<li class="childnode">
<a href="#">online</a>
</li>
<li class="childnode">
<a href="#">descarga</a>
</li>
</ul>
</li>
<li class="parentnode">
<a href="#">Downloads</a>
<ul>
<li class="childnode">
<a href="#">PDF books</a>
</li>
<li class="childnode">
<a href="#">online GAMES</a>
</li>
<li class="childnode">
<a href="#">free-sources</a>
</li>
</ul>
</li>
<li class="parentnode">
<a href="#">guides</a>
<ul>
<li class="childnode">
<a href="#">Photoshop</a>
</li>
<li class="childnode">
<a href="#">illustrator</a>
</li>
<li class="childnode">
<a href="#">Macromedia Flash</a>
</li>
</ul>
</li>
<li class="parentnode">
<a href="#">about us</a>
<ul>
<li class="childnode">
<a href="#">1er</a>
</li>
<li class="childnode">
<a href="#">2do</a>
</li>
</ul>
</li>
<li class="parentnode">
<a href="#">Gallery</a>
</li>
<li class="parentnode">
<a href="#">Recomendados</a>
<ul>
<li class="childnode">
<a>FarmStudio</a>
</li>
<li class="childnode">
<a>recomendado 2</a>
</li>
<li class="childnode">
<a href="#">recomendado 3</a>
</li>
<li class="childnode">
<a href="#">recomendado 4</a>
</li>
</ul>
</li>
</ul>
imagen del menu, para que se hagan una idea lo que intento hacer.