CODEWITHSUNDEEP
htmlcssdrop-down-menuhover
user2212564
user2212564

Reputation: 261

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

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/

Upvotes: 0

Views: 2012

Answers (4)

Guilherme Oderdenge
Guilherme Oderdenge

Reputation: 5001

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.

Upvotes: 1

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

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;
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157284

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

Upvotes: 1

Chris
Chris

Reputation: 518

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/

Upvotes: 1

Related Questions