2 Votes Vote

Css Menu As Tree

Posted by topdog 853 days ago Questions| menu div href All
Hello all,

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>

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;
        }

Any help please!!

Discuss Bury


Who Voted for this Question