Sub menu wont show when menu item hovered over (css html)

Question

I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!

I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.

What am u missing? Must be something so simple but cannot see in the css styling.

Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/

Swarnamayee Mallia · Accepted Answer · 2013-07-08 11:51:33Z

1

here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css

*{
    padding:0;
    margin:0;
    }
body {
    font:normal 12px/18px Arial, Helvetica, sans-serif;
    color:#000;
    padding:20px;
    background-color:#F2F2F2;
    }
ul, li, ol {
    list-style-type:none;
    }


ul#nav-1 {
    width:60%;
    height:46px;
    border:1px solid red;
}
ul#nav-1 li {
    position:relative;
    display:inline-block;
    *float:left;
    margin-top:16px;
    margin-left:-4px;
}
ul#nav-1 li a {
    padding:22px 13px;
    font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
    cursor:pointer;
    background-color:#000;
}
ul#nav-1 li ul#sub-menu {
    display:none;
    position:absolute;
    width:200px;
    list-style:none;
    left:0;
    top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
    display:block !important;
}
ul#nav-1 ul#sub-menu li {
    float: none;
    margin: 0;
}
ul#nav-1 ul#sub-menu li a {
    border-bottom:1px solid #dbddd4;
    background-color:#f2f2f2;
    width:200px;
    text-align:left;
    display: block;
    padding:0;
    padding-left:18px;
    padding-top:13px;
    padding-bottom:13px;
    float:left;
    margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
    background-color:#3a3a3a;
    color:#FFF;
}

edited Jul 8, 2013 at 11:51

answered Jul 8, 2013 at 11:46

Swarnamayee Mallia

2,00814 silver badges11 bronze badges

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

1 Comment

user2212564 Over a year ago

Just what i was after. Thanks for the update of the css too, tidy and everyones answers answered my question!

Chris · Accepted Answer · 2013-07-08 11:37:20Z

1

Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:

ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {

http://jsfiddle.net/ULSsa/2/

answered Jul 8, 2013 at 11:37

Chris

5182 silver badges11 bronze badges

Comments

Mr. Alien · Accepted Answer · 2013-07-08 11:37:43Z

1

You are using wrong selector here, it should be

ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
    display:block !important;
}

Demo

Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element

answered Jul 8, 2013 at 11:37

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

2 Comments

Chris Over a year ago

Just curious... how well is this supported on somewhat older browsers?

Mr. Alien Over a year ago

@Chris It's well supported :) reference.sitepoint.com/css/adjacentsiblingselector

Guilherme Oderdenge · Accepted Answer · 2013-07-08 11:52:13Z

1

Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).

See the example by clicking here.

If you do not know, the CSS > selector means the specifically child of the element.

Updated

To maintain the link state, just do this:

ul#nav-1 li:hover a {
    background-color: black;
}

See the example by clicking here.

edited Jul 8, 2013 at 11:52

answered Jul 8, 2013 at 11:37

Guilherme Oderdenge

5,0316 gold badges66 silver badges96 bronze badges

1 Comment

user2212564 Over a year ago

These answers are great(cant accept any answers for 5 more mins) but the active background on the main nav item doesn't keep it's state when the drop down is displayed. Is this something i will have to do via jQuery or simply css?

Collectives™ on Stack Overflow

Sub menu wont show when menu item hovered over (css html)

4 Answers 4

1 Comment

Comments

2 Comments

Updated

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Updated

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related