html - 子菜单在悬停之前可见加上子菜单背景使用父悬停背景

我希望我能对此有所了解。我知道我在这里的某个地方犯了一个菜鸟编码错误，但是我似乎找不到它，而且我的眼睛已经cross了眼睛。请帮忙。

因此，即使在悬停之前，子菜单仍然保持可见，并且由于某些原因，每个子菜单项的背景都具有父悬停背景属性，而我一生都无法弄清原因。

我做了Fiddle

如果您不想访问该链接，请使用以下代码

的HTML

<div id="menu">
    <ul>
        <li class="current_page_item"><a href="home.html">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a>
        <ul>
        <li class="style13"><a href="#"><strong>Option 1</strong></a></li>
        <li class="style13"><a href="#"><strong>Option 2</strong></a></li>
        </ul></li>
        <li><a href="#">Comments</a></li>
        <li><a href="#">Contact</a></li>
    </ul>

</div>

的CSS

#menu {
width: 740px;
height: 60px;
margin: 0px auto;
padding: 0px 20px 0px 20px;
background: #000033 url(images/menu-wrapper-bg2.png) repeat-x left top;
}

#menu ul {
margin: 0;
padding: 0px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu ul li {
float: left;
padding: 0px 0px 0px 0px;
}

#menu ul li a {
display: block;
float: left;
height: 60px;
margin: 0px;
padding: 0px 36px 0px 36px;
line-height: 60px;
letter-spacing: -1px;
text-decoration: none;
text-shadow: 2px 2px 2px #00033;
font-family: 'Abel', sans-serif;
font-size: 23px;
font-weight: normal;
color: #FFFFFF;
border: none;
text-shadow: 2px 2px 2px #0000FF;
}

#menu .current_page_item a {
text-shadow: 2px 2px 2px #0000FF;
background: #000066;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Opera */
background-image: -o-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0,
#000066), color-stop(1, #000033));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #000066 0%, #000033 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #000066 0%, #000033 100%);
}

#menu ul li a:hover {
background: #000066;
text-decoration: none;
text-shadow: 2px 2px 2px #0000FF;
color: #FFFFFF;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Opera */
background-image: -o-linear-gradient(bottom, #000066 0%, #000033 100%);

/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0,
#000066), color-stop(1, #000033));

/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #000066 0%, #000033 100%);

/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #000066 0%, #000033 100%);
}
#menu ul li ul li.active a, #menu ul li ul li a:hover {
text-decoration:none;
color:#000066;
text-shadow: 2px 2px 2px #0000FF;
}
#menu ul li ul {
height:500px;
left:289px;
overflow:visible;
position:absolute;
top:69px;
width:160px;
float: left;
}
#menu ul li ul li:hover ul li ul {
left:275px;
top:37px;
padding-top: 2em;
padding-left: .90em;
line-height: 30px!important;

}
#menu ul li ul li {
background: #000066;
border:1px solid #ffffff;
float:none;
height:29px;
margin:-1px 0 0;
padding:0 12px;
position:relative;
width:auto;
z-index:1000;
}
#menu ul li ul li a {
color:#ffffff!important;
font-family:'Abel', sans-serif;
font-size:20px;
line-height:22px;
text-transform:none;
text-shadow: 2px 2px 2px #0000FF;
font-weight:0;
margin:0;
padding:0;
display:block;
padding-top: 5px;

}
#menu ul li ul li.active a, #menu ul li ul li a:hover {
color:#fff!important;
line-height: 30px!important;

}

最佳答案

该CSS实际上不会隐藏或显示子菜单。尝试添加以下内容：

#menu ul ul {
    display: none;
}
#menu li:hover ul{
    display: block;
}

关于html - 子菜单在悬停之前可见加上子菜单背景使用父悬停背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21733591/