Question

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.

Answer 1

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.