Menus and submenus?

[yusufhermanto]

hello

I want to create a menu, where in the menu there is a submenu.

The following code I made:

 

<ul id="jsddm">
<li>Home</li>
    <li>Master
    	<ul style="visibility: hidden;">
        	<li>Customer</li>
            <li>Supplier</li>
            <li>Warehouse</li>
            <li>User</li>
        </ul>
    </li>
</ul>

css code:

#jsddm{
background:#063 repeat-x bottom left;
float:left;
list-style:none;
margin:0;
padding:5px 10% 0 10%;
width:80%;
font-weight:10px;
}


.header {
width: 990px;
height: 245px;
margin: 0px auto;
padding-top: 21px;
overflow: hidden;
text-align: left;
background: url(../images/bgHeader.gif) top left no-repeat;
}
.headerCell {
height: 120px;
padding: 0px 4px;
overflow: hidden;
}
.headerLogo {
height: 90px;
overflow: hidden;
}
a.siteLogo {
float: left;
display: block;
}
.headerMenu {
height: 30px;
padding: 0px 0px;
}

#jsddm li {
float: left;
width: auto;
margin-right: 5px;
height: 20px;
font-family: arial;
font-size: 12px;
}
#jsddm li a {
float: left;
padding-left: 5px;
color: #FFF;
text-decoration: none;
white-space: nowrap;
}
#jsddm li a:hover {
color: #FF0;
text-decoration: none;
background: url(../images/bgMenu-hover-mask.gif) top left no-repeat;
padding-bottom: 8px 8px 8px 4px;
}
#jsddm li a span {
float: left;
padding: 8px 8px 8px 4px;
}
#jsddm li a:hover span {
cursor: pointer;
background: url(../images/bgMenu-hover-base.gif) top right no-repeat;
}
#jsddm li a.active {
color: #ccc;
background: url(../images/bgMenu-active-mask.gif) top left no-repeat;
}
#jsddm li a.active span {
background: url(../images/bgMenu-active-base.gif) top right no-repeat;
}
#jsddm li a.active:hover {
color: #fff;
background: url(../images/bgMenu-active-mask.gif) top left no-repeat;
}
#jsddm li a.active:hover span {
background: url(../images/bgMenu-active-base.gif) top right no-repeat;
}
#jsddm li ul {
clear: both;
margin: 0;
margin-top: 30px;
padding: 0;
width: 160px;
position: absolute;
visibility: hidden;
background-color: #fff;
border-top: 1px solid #eee;
}
#jsddm li ul li {
float: left;
width: 158px;
height: 25px;
margin: 0px;
font-size: 11px;
background-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
border-bottom: 1px solid #ddd;
}
#jsddm li ul li a {
float: none;
width: 138px;
display: block;
padding: 5px 10px;
border-bottom: 1px solid #fff;
}
#jsddm li ul li a:hover {
width: 138px;
color: #fff;
display: block;
padding: 5px 10px;
background: none;
background-color: #004da1;
}

 

when I click on the "Master"sub menu tidaka can be displayed.

what is wrong with my code?

[haku]

http://htmldog.com/articles/suckerfish/dropdowns/