CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Amine Zel
Amine Zel

Reputation: 409

Keep Background color when hover other elements

I have the HTML structure below for a menu, I try to keep the color of the background div when the user navigates in the sub list

any ideas ?

ThankYou.

 .color1 > div:hover {
        background-color: yellow;
    }
    .sub{
        display: none;
    }
    .globalList:hover .sub {
        display: block !important; 
    }
<html>
    <body>
        <ul class="MyList">
            <li class="globalList color1">
                <div>Menu1</div>
                <ul class="sub">
                    <li class="Sub1"><div>Sublist1</div></li>
                    <li class="Sub2"><div>Sublist2</div></li>
                </ul>
            </li>
             <li>
                 <div>Menu2</div>
                 <ul>
                    <li></li>
                    <li></li>
                 </ul>
            
             </li>
          </ul>
    </body>
</html>

Upvotes: 2

Views: 1297

Answers (2)

IvanVazquez
IvanVazquez

Reputation: 45

Something like this?

 .color1 > div:hover {
        background-color: yellow;
    }
    .sub{
        display: none;
    }
    .globalList:hover .sub {
        display: block !important; 
    }
<html>
    <body>
        <ul class="MyList">
            <li class="globalList color1">
                <div>Menu1
                <ul class="sub">
                    <li class="Sub1"><div>Sublist1</div></li>
                    <li class="Sub2"><div>Sublist2</div></li>
                </ul>
                <!-- MOVE </> DIV OVER HERE! -->
                </div>
            </li>
             <li>
                 <div>Menu2</div>
                 <ul>
                    <li></li>
                    <li></li>
                 </ul>
            
             </li>
          </ul>
    </body>
</html>

Upvotes: 1

Gareth Jordan
Gareth Jordan

Reputation: 976

Have the hover style on the li tag instead

.color1:hover > div {
    background-color: yellow;
}

Unless you also wanted the submenu to have the bg color, in that case move it inside your div

Upvotes: 1

Related Questions