CODEWITHSUNDEEP
htmlcss
StuBlackett
StuBlackett

Reputation: 3857

Keep Parent li as class hovered while navigation a submenu

I have built a jsFiddle for this. What I am looking to do is, Once you navigate to the submenu, It keeps the padding around the parent li item. At the moment, If you hover over the li, You can see the padding.

My CSS is as follows : 

#access {
    margin-top: 45px;
}

#access ul#menu-top_nav {
    margin:0 0 10px 15px;
}

#access ul#menu-top_nav li {
    font-size: 15px;
    position: relative;
    display: inline-block;
}

#access ul#menu-top_nav li a {
    color: #336c82;
    padding: 10px;
}

#access ul#menu-top_nav ul {
    display: none;
}

#access ul#menu-top_nav li a:hover {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

#access ul#menu-top_nav li:hover > ul {
    display: block;
    position: absolute;
    top: 30px;
    left: -25px;
    background: #336c82;
}

#access ul#menu-top_nav ul.sub-menu li {
    display: block;
    width: 200px;
    padding: 10px;
}

#access ul#menu-top_nav ul.sub-menu li a {
    color: #fff;
    padding: 0;
}

#access ul#menu-top_nav ul.sub-menu li a:hover {
    padding: 0;
    text-decoration: underline;
}

and my HTML is :

<div role="navigation" id="access">
<ul id="menu-top_nav" class="menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17" id="menu-item-17">
        <a href="#">Our Business</a>
        <ul class="sub-menu">
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73" id="menu-item-73"><a href="#">About Us</a></li>
            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-72" id="menu-item-72"><a href="#">Careers</a></li>
        </ul>
    </li>
</ul>
</div>

But going further into the sub menu the hover effect goes off.

How can I make it so that the parent li is always of effect hover?

Thanks in advance. Hope I've explained properly.

Upvotes: 0

Views: 1196

Answers (2)

Sowmya
Sowmya

Reputation: 26969

Change #access ul#menu-top_nav li a:hover to #access ul#menu-top_nav li:hover a

    #access ul#menu-top_nav li:hover a{
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

DEMO

HERE is the detailed example of CSS drop-down menu.

Upvotes: 2

jfrej
jfrej

Reputation: 4648

This looks like a duplicate of How to keep the parent menu hovered while the mouse in child menu in a dropdown

Anyway, put the hover pseudo-class on li - change

#access ul#menu-top_nav li a:hover {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

to:

#access ul#menu-top_nav li:hover a {
    background: #336c82;
    color: #fff;
    text-decoration: none;
}

Upvotes: 1

Related Questions