CODEWITHSUNDEEP
htmlcss
mrghost1988
mrghost1988

Reputation: 87

drop down menu 3 level (horizontal followed by 2 verticals)

I have a menu bar. The menu bar is horizontal. The sub menu is then extended vertically upon hovering. The items in this sub menu includes Manage subjects, Manual Crawl, Crawl Interval and Archive List. When the mouse is hover to Manage subjects, it should prompt another dropdown list at the right side of it to product a sub sub menu. However, I can make this sub sub menu to appear on the right. its over lapping my sub menu. as i am really new to CSS, i definitely need help in this. i have a feeling i am not even editing #menu ul li ul li ul, #menu ul li ul li:hover ul ,#menu ul li ul li:hover ul li and #menu ul li ul li ul li a:hover. thank you.

HTML

<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Executive Summary</a></li>
        <li><a href="#" > Visual Analytics</a></li> 
        <li><a href="#" >Settings</a>
            <ul>                                      
                <li><a href="#" >Manage Subject</a></li>
                    <ul>
                        <li><a href="#">Add Subject</a></li>
                        <li><a href="#">Edit Subject</a></li>
                        <li><a href="#">Delete Subject</a></li>
                        <li><a href="#">Export Subject</a></li>
                    </ul>
                <li><a href="#">Manual Crawl</a></li>
                <li><a href="#">Crawl Interval</a></li> 
                <li><a href="#">Archive List</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

 #menu {
    position: relative;
    float: left;
    width: 1200px;
    height: 35px;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px;
    padding: 0;    
    background-color:#000;
    text-align: center;
    z-index:1;
}

#menu ul {
    position: relative;
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}

#menu ul li {
    position: relative;
    float: left;
    height: 100%;
    padding: 0;
    line-height: 35px; 
}

#menu ul li a {
    position: relative;
    height: 100%; 
    width: auto;
    float: left;
    text-decoration: none;
     padding: 0px 10px 0px 10px;   
    margin: 0 3px;
    color: #fff;
    text-align: center;
}

#menu ul li ul {
   display: none;
   width: 150px; /* Width to help Opera out */
   background-color: rgba(0,0,0,0.5);
}

#menu ul li:hover ul {
    display:block;
   position: absolute;
   top: 35px;
   left: 0;
   margin: 0;
   padding: 0;
   z-index: 1;
   width:150px; 
}

#menu li li a{
    height: 35px; 
    width: 150px;
    float: left;
    text-decoration: none;
    padding: 0px; 
    margin: 0 0px;
    color: #fff;
    text-align: center;
}

#menu ul li ul li a:hover{
   background: rgba(255,255,255,0.5);
   width:150px;
   float:left;
}
#menu ul li ul li ul{ display:none; position:absolute;background-color:rgba(28,28,240,0.5);}
#menu ul li ul li:hover ul { display:block; position:absolute; top:0px;background-color:#fff;}
#menu ul li ul li:hover ul li { list-style:none; float:none; margin-left:1px; padding:0px; position:relative;background-color:#fff;}
#menu ul li ul li ul li a:hover{
   background-color: rgba(28,28,240,0.5);
   width:150px;
   float:left;
}​

Upvotes: 2

Views: 12134

Answers (4)

user3556144
user3556144

Reputation: 1

Just to add to danijar's js fiddle solution.

You may wish for all sub menus to display relative to the first list ('main menu items') however a better solution may be to display lists or 'sub menus' relative to their parent list item. 

/* ensure each submenu displays relative to it's parent list item */
#menu ul li {
  position: relative;
}

Here is an example of a menu that you may want to add the above line of styling for: http://jsfiddle.net/codk1sgm/5/

Upvotes: 0

danijar
danijar

Reputation: 34255

First Question

You have to wrap the submenus ul in the higher level menuitem li to make them appear correctly. Here is an easy example for the html structure.

<ul id="menu">
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a>
        <ul>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a>
                <ul>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                    <li><a>second level submenu</a></li>
                </ul>
            </li>
            <li><a>first level submenu</a></li>
            <li><a>first level submenu</a></li>
        </ul>
    </li>
    <li><a>mainmenu</a></li>
    <li><a>mainmenu</a></li>
</ul>

Second Question

The trick for moving the second level submenus to the right was giving them the property left:150px.

#menu ul ul{
    left:150px;               
}

Improvements of your Stylecheet

By the way notice that you can specify all properties of a initially hidden box in css first. Then your :hover selector only needs to set the display:block rule to show the element. If it is hidden by display:none the already set background color won't be visible.

But there are other points you could improve your stylecheet, too. For example you can set properties for all submenus with the selector #menu ul (if your ul of the menu has the id menu) because they are all lists in your menu. If you want to only set something for the first level submenu you can use #menu > li > ul as it only approaches direct children. For the second level submenus use #menu ul ul.

Using these techniques your stylecheet is more abstract. My solution also works for and unlimited number of levels of submenus. You could for example implement a third level submenu only by adding the html code. The stylecheet can handle it.

Example

Here is a working fiddle of your example: http://jsfiddle.net/m8Bcb/4/

There you can see the improved source code (both html and css) and a working live demo. And with this edit the stylecheet is also commented for your understanding. I hope that helps you and you will continue learning css!

Upvotes: 4

Hareesh
Hareesh

Reputation: 6900

change your css like this

#menu ul li:hover > ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
width:150px; 
}

when you hover li the whole ul shows, thats why you must select direct siblings.

and add

#menu ul li ul li ul {
display: none;
}

Upvotes: 1

Roddy of the Frozen Peas
Roddy of the Frozen Peas

Reputation: 15219

Your submenu needs to be inside of the list item of the parent menu.

Modify your HTML like so:

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Executive Summary</a></li>
    <li><a href="#" > Visual Analytics</a></li> 
    <li><a href="#" >Settings</a>
        <ul>                                      
            <li><a href="#" >Manage Subject</a>
                <ul>
                    <li><a href="#">Add Subject</a></li>
                    <li><a href="#">Edit Subject</a></li>
                    <li><a href="#">Delete Subject</a></li>
                    <li><a href="#">Export Subject</a></li>
                </ul>
            </li>
            <li><a href="#">Manual Crawl</a></li>
            <li><a href="#">Crawl Interval</a></li> 
            <li><a href="#">Archive List</a></li>
        </ul>
    </li>
</ul>

Notice that all I did was move the </li> to be after the </ul> of the submenu.

Upvotes: 1

Related Questions