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