How do you make submenu appear on hover?

[leesyaa]

hello,

I have this problem on making a sub-menu in my navigation bar. it seems to be overlapped. how can I prevent this? I can't work out how to make the sub-menu open when you hover on the main word.

I have use the display:none thingy, but still, it doesn't seems to work.

<div id="nav">
    <ul>
        <li><a href="admin.php">HOME</a></li><br>
        <li><a href="#">USER</a><br>
            <ul id="submenu"> 
                 <li><a href="new.php"> Add New User</li>
                 <li><a href="#"> Choose User</li>
            </ul></li>
 
        <li><a href="#">Pengesah</a></li><br>
        <li><a href="#">Penyedia</a></li><br>
        <li><a href="#">UPDATE</a></li><br>
        <li><a href="logout.php">LOGOUT</a></li>
    </ul>
</div>

this is the css,

div#nav{
    text-align: center;
    list-style: none;
    font-size: 13px;
    margin-bottom: none;
    float: left;
    padding-top: 5px;
}
 
div#nav a {
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 7px;
}
 
div#nav ul {     
    list-style-type: none;     
    padding-left: 0;     
    margin-left: 10px;
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");    
    background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
    width: 140px;
    height: 840px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    position: relative;
    display: inline-table;
}
 
div#nav li {     
    text-decoration: none;       
    display: block;     
}
 
div#nav li{         
    display: block;  
    background-color: #ce90dd;
    border: 2px dashed #000000;     
    border-left: 5px solid #000000;  
    border-right: 5px solid #000000;   
    border-bottom: 2px dashed #000000;
    margin: 10px 0 10px 0;
    margin-bottom: none;
    width: 100px;
    float: left;
    padding: 15px;
    height: 30; //tinggi block//
}
 
div#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}
 
#submenu ul ul {
    display: none;
    }
 
#submenu ul li: hover > ul {
    display: block;
    }
 
#submenu ul li {
    background:##4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
 
#submenu ul li:hover a{
    color:#fff;
    }
 
#submenu ul li a{
    display:block; 
    padding: 25px 40px;
    color:#757575; 
    text-decoration: none;
    }

[Exequiel]

try this, ,
css .....

div#nav{
    text-align: center;
    list-style: none;
    font-size: 13px;
    margin-bottom: none;
    float: left;
    padding-top: 5px;
}
 
div#nav a {
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 7px;
}
 
 ul#submenu,
div#nav ul#myul {     
    list-style-type: none;     
    padding-left: 0;     
    margin-left: 10px;
    background:-o-linear-gradient(bottom, #0069d3 5%, #007fff 100%);    
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0069d3), color-stop(1, #007fff) );
    background:-moz-linear-gradient( center top, #0069d3 5%, #007fff 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0069d3", endColorstr="#007fff");    
    background: -o-linear-gradient(top,#0069d3,007fff);
    background-color:#0069d3;
    width: 140px;
    height: 840px;
    border-left: 2px solid #000000;
    border-right: 2px solid #000000;
    display: inline-table;
}
 
div#nav li {     
    text-decoration: none;       
    display: block;     
}
 
 ul#submenu li,
div#nav li{         
    background-color: #ce90dd;
    border: 2px dashed #000000;     
    border-left: 5px solid #000000;  
    border-right: 5px solid #000000;   
    border-bottom: 2px dashed #000000;
    margin: 10px 0 10px 0;
    margin-bottom: none;
    width: 100px;
    float: left;
    padding: 15px;
    height: 30; //tinggi block//
}
 
div#nav li a:hover {
    color: #FFFFFF;
    background-color: #35af3b;
}
 
ul#submenu {
    display: none;
    position:absolute;
    margin-left:120px;
    margin-top: -55px;
    height:auto;
    }
 
ul#myul li:hover > ul#submenu{
    display: block;
    }
 
ul#submenu li:hover{
    color:#fff;
    }
 
ul#submenu li a{
    display:block; 
    padding: 25px 40px;
    color:#757575; 
    text-decoration: none;
    }

[Exequiel]

html file...

<div id="nav">
    <ul id="myul">
        <li><a href="admin.php">HOME</a></li><br>
        <li><a href="#">USER</a>
            <ul id="submenu"> 
                 <li><a href="new.php"> Add New User</a></li>
                 <li><a href="#"> Choose User</a></li>
            </ul>
        </li>
 
        <li><a href="#">Pengesah</a></li><br>
        <li><a href="#">Penyedia</a>
            <ul id="submenu"> 
                 <li><a href="new.php"> Add New User</a></li>
                 <li><a href="#"> Choose User</a></li>
            </ul>
 
        </li><br>
        <li><a href="#">UPDATE</a></li><br>
        <li><a href="logout.php">LOGOUT</a></li>
    </ul>
</div>

[leesyaa]

it works! thanks! :D

[Exequiel]

no problem, , :) goodluck...

[sudhakar1]

Hi,
This css code also try do check

#menu{width:800px;height:82px;background-color:#666666;margin:0px 0px 0px 0px; border-radius:30px; text-align:center;}
#menu ul {margin:0px;padding:0px;}
#menu ul li{ border-radius:0px;float:left;list-style:none;margin:0px 4px 0px 4px; width:191px; padding-top:30px; height:50px;background-color:#99CC00; position:relative;}
#menu ul li a{ text-decoration: none !important;}
#menu ul li:hover{display:inline;background-color:#CCCCCC;border-radius:0px;margin:0px 4px 0px 4px; width:191px; height:45px;}
 
 
/* first select menu */
 
ul.sub li{ background-color:#00CCFF; display:inline; }
ul.sub li{margin:25px 0px 0px 0px; padding:0px 10px 0px 0px; position:absolute; }
.hover ul.sub li{ display: block;position:relative;/*relative*/ float:none; margin:0px 0px 0px 29px;
padding:3px 2px 2px 0px;  width:150px; height:20px;  }
 
/* second select menu */
.second li{ display:none;position:relative; float:none;  height:35px;
margin:1px 0px 0px 8px;     padding:10px 0px 10px 0px;}
.second li{ display: block; background-color:red; }
.second{ position:relative; height:35px; margin:0px 0px 0px 4px;     padding:0px 0px 0px 0px;}