當鼠標懸停時，背景顏色不起作用.main class？

Question

當我將鼠標懸停.main li，.sub類是顯示爲子menu.but我給背景色.SUB是不是在這裏工作......

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>

Answer 1

嗨現在定義這個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>

===================這裏的第二個選項====================== =

或第二個選項是該用於這個CSS

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

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

Answer 2

既然你已經設置的規則爲每li進行浮動，你需要設置overflow: hidden到.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>