submenus in css/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.

w3uiguru · Accepted Answer · 2012-02-20 07:08:22Z

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><a href="#">Home</a></li>
    <li><a href="#">Abous Us &nbsp; &nbsp; &#187;</a>
            <ul>
            <li><a href="#">About us 1</a></li>
            <li><a href="#">About us 2 &nbsp; &#187;</a>
                <ul>
                    <li><a href="#">XXX</a>
                    <li><a href="#">XXX</a>
                    <li><a href="#">XXX</a>
                </ul>
            </li>
        </ul>

    </li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Menus &nbsp; &nbsp;  &#187;</a>
        <ul>
            <li><a href="#">Menus 1</a></li>
            <li><a href="#">Menus 2 &nbsp; &nbsp; &#187;</a>
                <ul>
                    <li><a href="#">Menus 2-1</a>
                    <li><a href="#">Menus 2-2</a>
                    <li><a href="#">Menus 2-3</a>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Feedback</a></li>

</ul>

Community · Accepted Answer · 2020-06-20 09:12:55Z

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.

Collectives™ on Stack Overflow

submenus in css/html

2 Answers 2

Comments

jsBin live demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related