CSS, Help adding sub menu to drop down menu

Question

I'm trying to add a "sub menu" to a drop down menu. Say I wanted to add a sub menu to Item 3 (see html), how would I go about doing that?

Thanks,

Here's my CSS:

.nav_menu {
    width:100%;
    background-color:#EFEFEF;
    z-index:2000;
    border:1px solid #ccc;
}
.selected {
    background-color:#ccc;
    color:#333;
}
.nav_menu a:link {
    color:#007dc1;
}
.nav_menu a:visited {
    color:#007dc1;
}
.nav_menu a:hover {
    color:#007dc1;
}
.nav_menu ul {
    text-align: left;
    display: inline;
    margin: 0;
    padding: 15px 4px 17px 0;
    list-style: none;
}
.nav_menu ul li {
    font-size:16px;
    display: inline-block;
    margin-right: -4px;
    position: relative;
    padding: 8px 22px;
    font-weight:600;
    transition: all 50ms linear;
    transition-delay: 0s;
}
.nav_menu ul li ul {
    padding: 0;
    position: absolute;
    top: 37px;
    left: 0;
    width: 230px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    display: none;
    opacity: 0;
    visibility: hidden;
    display: block;
    opacity: 0;
    -webkit-transition: opacity .2s;
    z-index:50000;
}
.nav_menu ul li ul li { 
    background-color:#535353;
    border-top:1px solid #fff;
    display: block; 
    font-size:12px;
    color:#fff;
}
.nav_menu ul li ul li:hover { 
    background: #B2B2B2; 
}
.nav_menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

Here's my HTML:

<ul>
 <li>All Items
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with Sub Menu</li>
   </ul>
 </li>
</ul>

Thijs Riezebeek · Accepted Answer · 2015-02-03 18:30:49Z

2

Firstly, since your menu is based simply on the CSS :hover pseudo-class, make sure that your ul and li elements do not have any space between them, because this will lead to the entire menu dissapearing.

The HTML code

<div class='nav_menu'>
    <ul>
     <li>All Items
       <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li class='nav_menu_sub'>Item 3 with Sub Menu
          <ul>
            <li>SubItem 3.1</li>
            <li>SubItem 3.2</li>
          </ul>
        </li>
       </ul>
     </li>
    </ul>
</div>

Just like the drop down that you already provided, simply adding a ul element within the li element should suffice to create the sub menu. I added a nav_menu_sub class to the li that opens the sub menu making it easier to select via CSS (avoiding .nav_menu ul li ul li).

The CSS code

.nav_menu_sub {
    padding:0;
    margin:0;
}

.nav_menu_sub ul {
    margin-top:-7px;
    display: none !important;
}

.nav_menu_sub:hover ul {
    display: block !important;
    opacity: 1;
    visibility: visible;  
}

The margin-top:-7px on the ul element was added to ensure that it fits nicely up against the li.

Add the !important to the display attribute to get it overwrite the previously declared styling.

Working jsFiddle: http://jsfiddle.net/akhrbkug/

answered Feb 3, 2015 at 18:30

Thijs Riezebeek

1,8321 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DobotJr Over a year ago

Thanks! Works and simple to understand.

AndreaBogazzi · Accepted Answer · 2015-02-05 09:10:17Z

1

Judging from the css you posted:

.nav_menu ul li:hover ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

It looks like you have to add another ul in the submenu li:

<ul>
 <li class='nav-menu'>All Items
   <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3 with Sub Menu
      <ul>
        <li>SubItem 3.1</li>
        <li>SubItem 3.2</li>
      </ul>
    </li>
   </ul>
 </li>
</ul>

Fiddle for the demo http://jsfiddle.net/ee9ebv2s/

edited Feb 5, 2015 at 9:10

answered Feb 3, 2015 at 17:14

AndreaBogazzi

14.8k3 gold badges42 silver badges67 bronze badges

3 Comments

DobotJr Over a year ago

Sorry that did not work. I think the HTML is correct, maybe something not right with my CSS.

AndreaBogazzi Over a year ago

So strange, look, just for record: jsfiddle.net/ee9ebv2s this is a fiddle with your code and it works.

AndreaBogazzi Over a year ago

You were right i forgot to attach the class nav-menu, anyway the concept was , just add the new UL in the interested LI. :)

Collectives™ on Stack Overflow

CSS, Help adding sub menu to drop down menu

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related