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

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>
             <a href="#" class="navlink" id="first"> First</a>
             <ul class="firstsubmenu">
                  <li><a href="#">1. option</a></li>
                  <li><a href="#">2. option</a></li>         
             </ul>
        </li>
        <li>
             <a href= "#" class= "navlink" id="second"> Second</a>
             <ul class="secondsubmenu">
                  <li><a href="#">1. option</a></li>
                  <li><a href="#">2. option</a></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.