<ul>
<li><a href=”http://somesite.com/menu-item-1”>Menu Item 1</a></li>
<li><a href=”http://somesite.com/menu-item-2”>Menu Item 2</a></li>
<li><a href=”http://somesite.com/menu-item-3”>Menu Item 3</a></li>
</ul>
<ul>
<li><a href=”http://somesite.com/menu-item-1”>Menu Item 1</a>
<ul>
<li><a href=”http://somesite.com/submenu-item-1”>Submenu Item 1</a></li>
<li><a href=”http://somesite.com/submenu-item-2”>Submenu Item 2</a></li>
</ul>
</li>
<li><a href=”http://somesite.com/menu-item-2”>Menu Item 2</a></li>
<li><a href=”http://somesite.com/menu-item-3”>Menu Item 3</a></li>
</ul>
<ul>
<li><a href=”http://somesite.com/menu-item-1”>Menu Item 1</a>
<ul>
<li><a href=”http://somesite.com/submenu-item-1”>Submenu Item 1</a>
<ul>
<li><a href=”http://somesite.com/sub-submenu-item-1”>Sub -submenu Item 1</a></li>
<li><a href=”http://somesite.com/sub-submenu-item-2”>Sub-submenu Item 2</a></li>
</ul>
</li>
<li><a href=”http://somesite.com/submenu-item-2”>Submenu Item 2</a></li>
</ul>
</li>
<li><a href=”http://somesite.com/menu-item-2”>Menu Item 2</a></li>
<li><a href=”http://somesite.com/menu-item-3”>Menu Item 3</a></li>
</ul>
<ul id="menu">
<li class="main"><a href="http://somesite.com/menu-item-1">Menu Item 1</a>
<ul>
<li class="sub1"><a href="http://somesite.com/submenu-item-1">Submenu Item 1</a>
<ul>
<li class="sub2"><a href="http://somesite.com/sub-submenu-item-1">Sub -submenu Item 1</a></li>
<li class="sub2"><a href="http://somesite.com/sub-submenu-item-2">Sub-submenu Item 2</a></li>
</ul>
</li>
<li class="sub1"><a href="http://somesite.com/submenu-item-2">Submenu Item 2</a></li>
</ul>
</li>
<li class="main"><a href="http://somesite.com/menu-item-2">Menu Item 2</a></li>
<li class="main"><a href="http://somesite.com/menu-item-3">Menu Item 3</a></li>
</ul>
*
{
margin: 0;
padding: 0;
}
ul#menu
{
list-style: none;
}
ul#menu li
{
float: left;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
<ul id="menu">
<li class="main"><a href="http://somesite.com/menu-item-1">Menu Item 1</a>
<ul>
<li class="sub1"><a href="http://somesite.com/submenu-item-1">Submenu Item 1</a>
<ul>
<li class="sub2"><a href="http://somesite.com/sub-submenu-item-1">Sub -submenu Item 1</a></li>
<li class="sub2"><a href="http://somesite.com/sub-submenu-item-2">Sub-submenu Item 2</a></li>
</ul>
</li>
<li class="sub1"><a href="http://somesite.com/submenu-item-2">Submenu Item 2</a></li>
</ul>
</li>
<li class="main"><a href="http://somesite.com/menu-item-2">Menu Item 2</a></li>
<li class="main"><a href="http://somesite.com/menu-item-3">Menu Item 3</a></li>
</ul><br class="clearfloat" />
ul#menu li ul li
{
float: none;
}
ul#menu li.main a
{
width: 110px;
height: 20px;
padding: 10px 20px;
display: block;
font-weight: bold;
background-color: #000;
color: #FFF;
text-decoration: none;
text-align: center;
}
ul#menu li.main a:hover
{
background-color: #666;
}
ul#menu li.main ul li.sub1 a
{
width: 150px;
padding: 5px 20px;
background-color: #CCC;
color: #000;
text-align: left;
}
ul#menu li.main ul li.sub1 a:hover
{
background-color: #EEE;
}
ul#menu li
{
float: left;
position: relative;
}
ul#menu li.main ul
{
position: absolute;
top: 40px;
}
ul#menu li.main ul li.sub1 ul
{
position: absolute;
top: 5px;
left: 190px;
}
ul#menu li.main ul
{
position: absolute;
top: 40px;
display: none;
}
ul#menu li.main:hover ul, ul#menu li.main ul:hover
{
display: block;
}
ul#menu li.main ul li.sub1 ul
{
position: absolute;
top: 5px;
left: 190px;
display: none;
}
ul#menu li.main ul li.sub1:hover ul, ul#menu li.main ul li.sub1 ul:hover
{
display: block;
}
*
{
margin: 0;
padding: 0;
}
ul
{
list-style: none;
}
ul#menu li
{
float: left;
position: relative;
}
ul#menu li ul li
{
float: none;
}
ul#menu li.main a
{
width: 110px;
height: 20px;
padding: 10px 20px;
display: block;
font-weight: bold;
background-color: #000;
color: #FFF;
text-decoration: none;
text-align: center;
}
ul#menu li.main a:hover
{
background-color: #666;
}
ul#menu li.main ul
{
position: absolute;
top: 40px;
display: none;
}
ul#menu li.main:hover ul, ul#menu li.main ul:hover
{
display: block;
}
ul#menu li.main ul li.sub1 ul
{
position: absolute;
top: 5px;
left: 190px;
display: none;
}
ul#menu li.main ul li.sub1:hover ul, ul#menu li.main ul li.sub1 ul:hover
{
display: block;
}
ul#menu li.main ul li.sub1 a
{
width: 150px;
padding: 5px 20px;
background-color: #CCC;
color: #000;
text-align: left;
}
ul#menu li.main ul li.sub1 a:hover
{
background-color: #EEE;
}
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)