当鼠标悬停时，背景颜色不起作用.main class？

当我将鼠标悬停.main li，.sub类是显示为子menu.but我给背景色.SUB是不是在这里工作......当鼠标悬停时，背景颜色不起作用.main class？

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>

来源

2015-09-17 David JorHpan

嗨现在定义这个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: ""; 
}

来源

2015-09-17 04:29:22

是工作，但.SUB字体颜色甚至不显示我确实在我的页面 –

用于黑色到＃000相同的代码; –

既然你已经设置的规则为每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>

来源

2015-09-17 04:37:45 slashsharp

当鼠标悬停时，背景颜色不起作用.main class？

回答

相关问题