Question

我希望我能对此有所了解。我知道我在这里的某个地方犯了一个新手编码错误，但我似乎无法找到它而且我的眼睛正在睁大眼睛。请帮忙。

因此，即使在悬停之前子菜单仍然可见，并且出于某种原因，每个子菜单项的背景都采用了父悬停背景属性，而我不能为我的生活找出原因。

我做了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;

}

Answer 1

CSS实际上并不隐藏或显示子菜单。尝试添加：

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

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

1 个答案: