Having trouble getting this menu to expand as a full time tree, no drop downs on hover.
http://www.candlezen.com/menu/s-test.htm
Here is the html:
CODE
<div id="sidebar" class="s-menu">
<ul>
<li><a href="java script:void(0)">Personalized Gifts</a>
<ul>
<li><a href="../products/data/?id=1">Personalized Candles</a></li>
</ul></li>
<li><a href="../products/data/?id=3">Theme Candles</a>
<ul>
<li><a href="java script:void(0)">Seasonal</a>
<ul>
<li><a href="java script:void(0)">Christmas</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="java script:void(0)">Accessories</a>
<ul>
<li><a href="java script:void(0)">Tea Lights</a></li>
<li><a href="../products/data/?id=2">Tea Light Holders</a></li>
</ul></li>
</ul>
</div>
<ul>
<li><a href="java script:void(0)">Personalized Gifts</a>
<ul>
<li><a href="../products/data/?id=1">Personalized Candles</a></li>
</ul></li>
<li><a href="../products/data/?id=3">Theme Candles</a>
<ul>
<li><a href="java script:void(0)">Seasonal</a>
<ul>
<li><a href="java script:void(0)">Christmas</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="java script:void(0)">Accessories</a>
<ul>
<li><a href="java script:void(0)">Tea Lights</a></li>
<li><a href="../products/data/?id=2">Tea Light Holders</a></li>
</ul></li>
</ul>
</div>
Here is the CSS:
CODE
.s-menu{
border:none;
border:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9pt;
}
.s-menu ul{
height:35px;
list-style:none;
margin:0;
padding:2px;
}
.s-menu li{
float:left;
padding:0;
}
.s-menu li a{
color:#440000;
display:block;
font-weight:normal;
line-height:18px;
margin:0;
padding:1px 6px;
text-align:left;
text-decoration:none;
}
.s-menu li a:hover, .s-menu ul li:hover a{
background: #8B7C57;
color:#F0E2BF;
text-decoration:none;
}
.s-menu li ul{
background:#000000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:auto;
z-index:200;
/*top:1em;
/*left:0;*/
}
.s-menu li:hover ul{
display:block;
}
.s-menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.s-menu li:hover li a{
background:none;
}
.s-menu li ul a{
display:block;
height:20px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.s-menu li ul a:hover, .s-menu li ul li:hover a{
background:#8B7C57;
border:0px;
color:#F0E2BF;
text-decoration:none;
}
.s-menu p{
clear:both;
}
border:none;
border:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9pt;
}
.s-menu ul{
height:35px;
list-style:none;
margin:0;
padding:2px;
}
.s-menu li{
float:left;
padding:0;
}
.s-menu li a{
color:#440000;
display:block;
font-weight:normal;
line-height:18px;
margin:0;
padding:1px 6px;
text-align:left;
text-decoration:none;
}
.s-menu li a:hover, .s-menu ul li:hover a{
background: #8B7C57;
color:#F0E2BF;
text-decoration:none;
}
.s-menu li ul{
background:#000000;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:auto;
z-index:200;
/*top:1em;
/*left:0;*/
}
.s-menu li:hover ul{
display:block;
}
.s-menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
}
.s-menu li:hover li a{
background:none;
}
.s-menu li ul a{
display:block;
height:20px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.s-menu li ul a:hover, .s-menu li ul li:hover a{
background:#8B7C57;
border:0px;
color:#F0E2BF;
text-decoration:none;
}
.s-menu p{
clear:both;
}
Any help please!!


Answers