CODEWITHSUNDEEP
htmlcss
Jack jdeoel
Jack jdeoel

Reputation: 4584

background color is not working when hover .main class?

When I hover .main li ,.sub class is display as sub-menu.but i give background color to .sub is not work here...

nav{
    width :500px;
    background :#dd8932;
    min-height:30px;
}
.main{    
    width:500px;
    line-height:30px;
}
.main li{
    width:150px;
    float:left;
}
.sub{
    display:none;       
}
.main li:hover > .sub{
    display:block;    
    width:150px;
    background:#99aaaa !important;
    color:black;
}
<nav>
    <ul class="main">
        <li>Home
            <ul class="sub">
                <li>Login</li>
                <li>Sign Up</li>
            </ul>
         </li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

Upvotes: 0

Views: 50

Answers (2)

slashsharp
slashsharp

Reputation: 2833

Since you have set a rule for every li to be floated, you need to set overflow: hidden to .sub

.main li:hover > .sub {
    overflow: hidden;

DEMO

nav{
    width :500px;
    background :#dd8932;
    min-height:30px;
}
.main{    
    width:500px;
    line-height:30px;
}
.main li {
    width:150px;
    float:left;
}
.sub{
    display:none;       
}
.main li:hover > .sub{
    overflow: hidden;
    display:block;    
    width:150px;
    background-color:#99aaaa;
    color:black;
}
<nav>
    <ul class="main">
        <li>Home
            <ul class="sub">
                <li>Login</li>
                <li>Sign Up</li>
            </ul>
         </li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hi now define this css

  .main li:hover > .sub{
        display:inline-block;vertical-align:top;  //add this css
display:block;  // remove this line
}


nav{
    width :500px;
    background :#dd8932;
    min-height:30px;
}
.main{    
    width:500px;
    line-height:30px;
}
.main li{
    width:150px;
    float:left;
}
.sub{
    display:none;       
}
.main li:hover > .sub{
    display:inline-block;vertical-align:top;    
    width:150px;
    background:#99aaaa !important;
    color:black;
}
<nav>
    <ul class="main">
        <li>Home
            <ul class="sub">
                <li>Login</li>
                <li>Sign Up</li>
            </ul>
         </li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</nav>

=================== Second Option here =======================

or second option is this used to this css

.main li:hover > .sub:after {
    display: table;
    clear: both;
}

.main li:hover > .sub:after,  .main li:hover > .sub:before {
    content: "";
}

Upvotes: 1

Related Questions