悬停.main类时背景颜色不起作用？

Question

当我将鼠标悬停在.main li时，.sub类显示为子菜单。但我为.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
}

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

===================这里的第二个选项====================== =

或第二个选项是用于此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;

<强>样本

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;