CODEWITHSUNDEEP
htmlcss
stillanewbie
stillanewbie

Reputation: 31

Nav. bar hovering color

Background color (red) misses out after I am hovering drop down items.

What should I do to keep the background color of the menu item I am in?

<style>

    nav ul 
    {
    list-style-type:none;
    padding:0px;
    text-align:center;
    background-color:grey;
    }

    nav ul li 
    {
    display:inline-block;
    }

    nav ul a 
    {
    display:block;
    padding:20px;
    padding-left:50px;
    padding-right:50px;
    text-decoration:none;
    color:black;
    text-transform:uppercase;
    font-family:arial;
    font-size:20px;
    }

    nav ul a:hover 
    {
    background:red;
    }

    nav ul ul {
        display: none;
    }

        nav ul li:hover ul{
            display:block;
            position:absolute;
    }

        nav ul ul li
        {
        display:block;
        border-bottom:solid 1px black;
        }

</style>
</head>

<body>

    <nav>
        <ul>
            <li><a href="#">one</a></li>
            <li><a href="#">two</a>
                <ul>
                    <li><a href="#">Photoshop</a></li>
                    <li><a href="#">Illustrator</a></li>
                    <li><a href="#">Web Design</a></li>
                </ul>
            </li>
            <li><a href="#">three</a>
                <ul>
                    <li><a href="#">ay</a></li>
                    <li><a href="#">bee</a></li>
                </ul>
            </li>
            <li><a href="#">four</a></li>
        </ul>
    </nav>

</body>

Upvotes: 2

Views: 78

Answers (1)

SW4
SW4

Reputation: 71150

This is because the parent li is not attracting the :hover, so a hover on the child submenu doesn't keep it active. As such, you need to move the style change to the li:hover instead of the a child, as the submenu is an sibling of the a and not direct child.

Change:

nav ul a:hover {
    background:red;
}

To:

nav ul li:hover {
    background:red;
}

Demo Fiddle

Upvotes: 4

Related Questions