CSS Drop Down Navigation, 3Rd Level Issue

CSS Drop Down Navigation, 3rd level issue

This is the part that makes the submenu visible:

.menu ul li:hover ul,
.menu ul a:hover ul,
.menu ul ul li:hover ul { visibility:visible; }

Now, I'm not sure what your markup is (I can only guess seeing .menu table and a:hover ul...), but with a standard list based markup, this part is too greedy:

.menu ul li:hover ul

This selects all ul elements that are in the li:hover all the way down the line, up to the very last one. I think you want to select only the direct descendant:

.menu ul li:hover > ul

All I changed was adding the > character. Demo: http://jsfiddle.net/dgUFw/

EDIT: Updated demo with the HTML you just posted: http://jsfiddle.net/dgUFw/1/

The .menu element was missing from your post, so I wrapped the whole thing in a <div class="menu"> and it seems to work fine.

CSS dropdown menu - 3rd level issue

The issue is the gap between the menus. They need to be adjacent or even overlap for this hover trick to work.

So instead of specifying 

left: 100px;

do something like

left: 100%; 
/* or even */
left: 99%;

This will cause the 3rd layer to be adjacent to the second layer menu, or even overlap the second slightly (for 99%), allowing you to move the mouse without any interruptions that close the menu. And you won't have to worry about the width of the menus either.

Updated fiddle: http://jsfiddle.net/tqEfW/5/

If you want to keep the gap for the look of it, you can give the 3rd layer ul a padding:

nav ul li ul li ul {
    ....
    left: 100%;
    padding-left: 4px;
}

Ad demonstrated here: http://jsfiddle.net/tqEfW/9/

That said, from a UX point of view, menus with 3 layers are very hard to use and should be avoided when possible.

CSS Dropdown 3rd level Menu Issue

Here you go.

SOLUTION 1: BY MANUALLY ADDING POSITION RELATIVE TO THE LI ELEMENT

WORKING DEMO

The HTML:

<div id="menu">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li class="levelThreeAlign"><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li class="levelThreeAlign"><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

The CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

.levelThreeAlign{position:relative;}

SOLUTION 2 : BY CREATING A CSS INHERITANCE TYPE IN THE STYLESHEET WITH A POSITION RELATIVE

WORKING DEMO

The HTML:

<div id="menu">
    <ul id="menu">
        <li><span>Home</span></li>
        <li><span>Test-L1</span>
            <ul>
                <li><span>Test-L2A</span></li>
                <li><span>Test-L2B</span>
                    <ul>
                        <li><span>Test-L3A</span></li>
                        <li><span>Test-L3B</span></li>
                    </ul>
                </li>
                <li><span>Test-L2C</span>
                    <ul>
                        <li><span>Test-L3C</span></li>
                        <li><span>Test-L3D</span></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

The CSS:

* {
     list-style:none;
     margin:0;
     padding:0;
     font-size:1em;
     cursor:pointer;
  }
#menu{
     margin:3px;
}

#menu > li{            /* Top Level */
    float:left;
    margin-right:3px;
}
#menu > li > span{
    display:block;
    background:#55aa7f;
    padding:3px 10px;
}
#menu > li:hover > span{
    color:#fff;
}

#menu > li > ul > li{position:relative;}

#menu > li > ul{        /* Second Level */
    display:none;
    background:#55aa7f;
}
#menu > li:hover > ul{
    display:block;
    position:absolute;
}
#menu > li > ul > li > span{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
    color:#fff;
}

#menu > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#55aa7f;
}
#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
#menu > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
    color:#fff;
}

Hope this helps.

Third level of CSS dropdown menu does not work

I believe this is not possible with pure CSS... See here. You can't reference CSS elements through CSS.

What you can do though is use Javascript and dynamically apply the styling needed. For your scenario, I set display: none to your class sub-submenu and then added a JS script so that on hover, it would find any uls inside and show them. I also moved your sub-submenu into the li.

Working jsFiddle here: http://jsfiddle.net/8kvcN/1/

Issue with lining up third level drop-down navigation

.sub-nav > ul li ul li:hover ul {
    margin-top: -52px;
}

The margin-top: -52px on .sub-nav > ul li ul li:hover ul is your culprit.

3rd Level Centered Menu Dropdown Navigation Issue

#centeredmenu ul li:hover ul in your CSS matches both levels of the menu. The li:hover ul parts makes the browser search for a ul tag with an a li:hover as ancestor. This doesn't have to be a direct parent, it can also be a grandparent, greatgrandparent, etc. Try to see if you understand why this holds for both menu levels. http://learn.shayhowe.com/html-css/getting-to-know-css/ might give you some understanding of how CSS selectors work

A quick fix would be to change #centeredmenu ul li:hover ul into #centeredmenu ul li:hover > ul and to remove the #centeredmenu ul li:hover ul ul you have.

I was playing with something like this today, see http://codepen.io/ckuijjer/pen/huyxn for my example. I tried to use mostly classes and hardly any element styling.

Positioning 3rd level of drop down menu

#nav ul ul
{
    left:100%;
    top:0;
}

Instead of using the left margin use 100% positioning which will calculate the width of the higher list item.

3rd level in CSS drop down menu needs smarter vertical alignment

just edit this class like this :

#menu > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:inherit;                  /*changed*/
    margin-top:-29px;             /*added*/
    width:auto;
}

jsFiddle

Issue with third level dropdown menu

   .dropdown {
         position: relative;
         display: inline-block;
         font-size: 110%;
    }

   .dropdown ul {
         position: absolute;
         top: -100%;
         left: 100%;
         display: none;
         background-color: inherit;
         padding: 0;
         list-style: none;
         border: 1px solid #ccc;
   }

  .dropdown ul li {
         position: relative;
         list-style: none;
         margin: 5px 0;
         background-color: inherit;
  }

  .dropdown ul li a {
         display: block;
         padding: 3px 10px;
   }

  .dropdown ul li a:hover {
         background-color: #18b6f2 !important;
  }

  .dropdown ul li:hover > ul {
         display: block;
         top: 0;
         background-color: inherit;
   }

  .dropdown ul li:hover > a {
         background-color: #85ddff;
  }

  .dropdown:hover > ul {
        display: block;
  }

Try this.
A pure css3 menu. This is scalable ( as in you can have any number of levels).
Just comment all the lines in your css file and paste this.
Apply class 'dropdown' to the menu container and you are done. 

        Sample markup 

       <div class="dropdown" style="background-color: white;">
    <a>Menu</a>
    <ul>
        <li>
            <a>Fruits</a>
            <ul>
                <li><a>Apple</a></li>
                <li><a>Orange</a></li>
                <li><a>Grape</a></li>
                <li><a>Banana</a></li>
            </ul>
        </li>
        <li>
            <a>Vegetables</a>
            <ul>
                <li><a>Lemon</a></li>
                <li><a>Cucumber</a></li>
                <li><a>Melon</a></li>
            </ul>
        </li>
        <li>
            <a>Birds</a>
            <ul>
                <li>
                    <a>Flying</a>
                    <ul>
                        <li><a>Crow</a></li>
                        <li><a>Parrot</a></li>
                    </ul>
                </li>
                <li>
                     <a>Walking</a>
                     <ul>
                           <li><a>Hen</a></li><li><a>Duck</a></li></ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Related Topics

Positioning Context on Table-Cell Element in Firefox

In CSS, How Does Overflow Interact with Float

How to Make Numbers in an Ordered List Bold

Compass: Generate Sprites, Plus Width/Height on Each Images in the Sprite

Clip Div with Svg Path

About Bootstrap Grid System

Vertically Aligning CSS :Before and :After Content

Css3: Two Transitions with Different Timing Functions (Css3)

CSS 3 Column Liquid Layout Dynamic Same Height Column

Overriding Body Background Color in Angular 7

Auto Margins Don't Center Image in Page

Horizontal and Vertical Center Text in HTML

Textbox Background Image Pushing Out in Ie 6 & Ie 7

CSS - Increasing Size of Holder or What Ever Its Called

Add Image to Left of Text via CSS

Weird Behavior When Rotating an Element on Hover

Css: How to Adjust My Font Size Fill All the Space in a Justified Layout

How to Make Certain Text Not Selectable with CSS


Leave a reply



Submit