submenus in css/html - html

Question

I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...
<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
<li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink" id="second"> Second
<div class= "secondsubmenu">
<ul>
..and so on
</ul>
</div>
Right now, my css is looking like
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink:hover
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited
{
background-color:#ADD8E6;
color:#FFFFFF;
}
Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is
.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red;
width : 930px;
height : 25px;
z-index : 10;
}
But now that I added the links (made every list element within an block), firstsubmenu no longer appears.
The css for each link looked something like this
.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.

Answer 1

You can use the below css and create pure css based menu.
Css:
body { padding: 3em; }
#navbar * { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}
#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul {
display:block;
}
#navbar:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
Structure:
<div id="navbar">
<ul>
<li>Home</li>
<li>Abous Us »
<ul>
<li>About us 1</li>
<li>About us 2 »
<ul>
<li>XXX
<li>XXX
<li>XXX
</ul>
</li>
</ul>
</li>
<li>Download</li>
<li>Menus »
<ul>
<li>Menus 1</li>
<li>Menus 2 »
<ul>
<li>Menus 2-1
<li>Menus 2-2
<li>Menus 2-3
</ul>
</li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>

Answer 2

jsBin live demo
I had to fix lot of errors in your HTML. Here is the css:
#navbar ul{
list-style:none;
margin:0; padding:0;
display:table;
}
#navbar li{
top:0px;
background:#bbf;
display:inline-block;
width:100px;
}
#navbar li ul li{
display:none;
}
#navbar li:hover li{
display:block;
}
And the fixed HTML:
<div id="navbar">
<ul>
<li>
First
<ul class="firstsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
<li>
Second
<ul class="secondsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
</ul>
</div>
Now, after it works, do with colors whatever you want.
Use also alt tags in your links and images, it improves your SEO and compilance.