Dev Shed Forums

**kwstephenchan**

Hi, I am new to css and would like to learn with the following example. It is supposed to display submenu on each menu, but it only shows the menu and no submenu is shown. Would someone please help.

<style type="text/css">
<code>
#nav{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
#nav li{
float:left;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
#nav a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}

#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
}
#nav li:hover a{
background:#6b0c36;
text-decoration:underline;
}
#nav li:hover ul a{
text-decoration:none;
}
#nav li:hover ul li a:hover{
background:#333;
}</code>

</style>

<code><ul id="nav">
<li>
<a href="#">Home</a>
</li>

<li>
<a href="#">About</a>
<ul>
<li><a href="#">The product</a></li>

<li><a href="#">Meet the team</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>

<ul>
<li><a href="#">Sevice one</a></li>
<li><a href="#">Sevice two</a></li>

<li><a href="#">Sevice three</a></li>
<li><a href="#">Sevice four</a></li>
</ul>

</li>
<li>
<a href="#">Product</a>
<ul>
<li><a href="#">Small product (one)</a></li>

<li><a href="#">Small product (two)</a></li>
<li><a href="#">Small product (three)</a></li>
<li><a href="#">Small product (four)</a></li>

<li><a href="#">Big product (five)</a></li>
<li><a href="#">Big product (six)</a></li>
<li><a href="#">Big product (seven)</a></li>

<li><a href="#">Big product (eight)</a></li>
<li><a href="#">Enourmous product (nine)</a></li>
<li><a href="#">Enourmous product (ten)</a></li>

<li><a href="#">Enourmous product (eleven)</a></li>
</ul>
</li>
<li>
<a href="#">Contact</a>

<ul>
<li><a href="#">Out-of-hours</a></li>
<li><a href="#">Directions</a></li>

</ul>
</li>
</ul></code>

**kwstephenchan**

Hi,
I have this problem with a dropdown menu. The menu closed when the cursor moves beyond the first submenu (there are 3 submenus). New to CSS and do not know what is wrong with the definition. Please help.
The followings are the code:

<style type="text/css">
#nav, #nav ul {
font-family: Arial, Verdana;
font-size: 10px;
margin: 0;
padding: 0;
list-style: none;
}

#nav a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 1px 15px 1px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}

#nav li {
display: block;
position: relative;
float: left;
}
#nav li ul a:hover { background: #617F8A; }

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

</style>
<SCRIPT LANGUAGE="JavaScript">

var refer=true;
function combo(divid) {
var div=divid;
if (refer) {
document.getElementById(div).style.visibility="visible";
refer=false;
}
else {
document.getElementById(div).style.visibility="hidden";
refer=true;
}
}

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=" sfhover";
}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) window.attachEvent("onload", sfHover);
<body>
<table width="800" align="center">
<ul id="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Google</a></li>
<li><a href="#">groupon</a></li>
<li><a href="#">mail 126</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>

</ul>
</table>
</body>

Thanks in advance.

**paulh1983**

i think what you need to do is search for "css menu" or something and you will get some great examples. I unfortunately have not yet been able to understand the whole complexity of sub-menus. so i search for one each time and change the formatting/colours to suit my site.

PS> i noticed you had open another thread which i suspect is a duplicate of this one.

Dev Shed Forums

Thread: Menu closed when cursor move beyond the first submenu in a dropdown menu

Dropdown menu

Menu closed when cursor move beyond the first submenu in a dropdown menu