I've used CSS Horizontal List Menu- by JavaScript Kit on my site (www.fcps.edu/LangleyHS/ (http://www.fcps.edu/LangleyHS/)). The base code only provides for one sub-menu, but I've adapted the code to allow for a second sub-menu (or a sub sub-menu). The sub sub-menu is offset from the sub-menu using "left: 40px" which can be adjusted as needed.
This is the code I added for the sub sub-menu which follows /* Sub level menu links style */ in the CSS code:
/*NEW - Sub sub-level menu*/
.horizontalcssmenu ul li ul li ul{
left: 0;
top: 0;
border-top: 1px solid #202020;
position: absolute;
left: 40px; /*this is the offset for the sub sub-menu to allow the sub-menu to be seen*/
display: block;
visibility: hidden;
z-index: inherit;
}
/*NEW- Sub sub-level menu list items*/
.horizontalcssmenu ul li ul li ul li{
display: inherit;
float: right;
}
/*NEW- Sub sub-level menu links style */
.horizontalcssmenu ul li ul li ul li a{
width: 65px; /*width of sub menu levels*/
display:block;
font-weight: normal;
padding: 2px 2px;
background: #E9B229;
border-width: 0 1px 1px 1px;
}
Your html looks like:
<li><a href="#">Menu Item</a>
<ul>
<li><a href="#">First Sub Menu Item</a>
<ul>
<li><a href="1.html">1st sub sub-menu Item</a></li>
<li><a href="2.html">2nd sub sub-menu Item</a></li>
<li><a href="3.html">3rd sub sub-menu item</a></li>
</ul></li>
<li><a href="#">Second Sub Menu Item</a>
<ul>
<li><a href="a.html">1st sub sub-menu Item</a></li>
<li><a href="b.html">2nd sub sub-menu Item</a></li>
<li><a href="c.html">3rd sub sub-menu tem</a></li>
</ul></li>
</ul>
</li>