0

我做了一个 CSS 下拉菜单，问题是当我将鼠标悬停在“Men”上，然后悬停在出现的下拉菜单上时，“men”上的悬停效果消失了。这是代码。有人可以帮我解决这个问题吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>body, ul{ padding:0; margin:0;     font-family: 'ambleregular';}
*{ margin:0; padding:0;}
ul{ margin:0; padding:0;}
li{ margin:0; list-style:none;}
a, img{ border:none;}
.cb{ clear:both;}
.fl{ float:left;}
.fr{ float:right;}


@font-face {
    font-family: 'ambleregular';
    src: url('../fonts/amble-regular_0-webfont.eot');
    src: url('../fonts/amble-regular_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/amble-regular_0-webfont.woff') format('woff'),
         url('../fonts/amble-regular_0-webfont.ttf') format('truetype'),
         url('../fonts/amble-regular_0-webfont.svg#ambleregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

header, footer, aside, section, hgroup{ display:block;}

.number{ float:right; color:#81d300; font-size:23px; line-height:41px;}
.wrap{ width:986px; margin:0 auto;}

header{ width:100%; background-color:#000; color:#fff; float:left; padding:10px 0;}

.header_inner{ width:100%; float:left;}
.logo{ width:421px; float:left;}
.header_right{ width:565px; float:left; font-size:15px;  font-family: 'ambleregular';}
.header_right ul.headerbottom li{ float:right; text-align:right; width:100%;}


.header_right ul.headertop{ width:100%; float:left;}
.header_right ul.headertop li{ float:right; line-height:30px; padding:0 5px;}
.header_right ul.headertop li a{ float:left; color:#fff; text-decoration:none;}
.header_right ul.headertop li a.mycart{ float:left; background-color:#81d300; padding:5px; color:#000; font-weight:bold;}
a.mycart span.cartimage{ background:url(../img/sprite1.png) right top no-repeat; height:25px; width:28px; float:left;}


.headerbottom ul li.ht{ height:40px;}
span.call{ width:14px; height:40px; margin-right:7px; display:block; float:right; background:url(../img/sprite1.png) left top no-repeat;}

.headerbottom ul li.bullet{ height:12px; background:url(../img/sprite1.png) left top no-repeat;}
.logo img{ margin-top:25px;}


.searchh_outer{ width:100%; float:left; margin-top:10px;}
.searchh{ background-color:#000; width:428px; margin:0 auto 0 auto; padding:5px;}
.searchh input[type="text"]{ height:28px; padding:0 3px; width:338px; float:left; border:none; line-height:28px; background-color:#FFFFFF; border-radius:2px; -moz-border-radius:2px; -webkit-border-radius:2px; margin:0; padding:0; font-weight:bold; color:#888;}
.searchh input[type="button"]{ padding:4px; border:none; background-color:#ff9c00; color:#fff; height:28px; line-height:28px;  float:left; cursor:pointer;}
span.searchhimg{ margin-left:10px; float:left;  background:url(../img/sprite1.png) right -38px no-repeat; background-color:#ff9c00; height:28px; width:22px;}


nav{ width:100%; margin-top:8px; background-color:#000000; float:left;}
nav ul li{ padding:4px 40px 0px 40px; float:left;}
nav ul li a { color:#fff; font-weight:normal; padding:0 20px; float:left; font-family:17px; text-decoration:none; line-height:30px;}
nav ul li a:hover{ background-color:#fff; color:#000; border-radius:3px 3px 0 0 ;}
nav ul li:hover > ul { display:block; width:100%; background-color:#e7e7e7;}

nav ul{ position:relative;}
nav ul ul{ display:none; left:0; top:30px; position:absolute;}
nav ul ul.division1{ width:328px !important; float:left;  min-height:237px;}
nav ul ul.division2{ width:328px !important; float:left; margin-left:328px;  min-height:237px;}
nav ul ul.division3{ width:328px !important; float:left; margin-left:656px; min-height:237px;}
nav ul ul li, nav ul ul li a{ float:none; position:relative;}

nav ul ul.division1 li, nav ul ul.division2 li, nav ul ul.division3 li{ display:block; width:328px;}


nav ul ul li a{ color:#383838; font-size:15px !important; padding:0;}
nav ul ul li a:hover{ color:#111; background:none;}
.dropdowntitle{ color:#0066d8; font-weight:bold; background-color:#FFFFFF}


.bluelink{ color:#0066d8; font-weight:bold;}
.bluelink:hover{ color:#004ca1;}
nav ul li a.chris{ font-size:21px; color:#ee1a26;}</style>
</head>

<body>
<!-- header start -->
<header>
<div class="wrap">


<div class="header_inner">
<div class="logo"><img src="img/logo.jpg" alt="some logo"></div>
<div class="header_right">

<ul class="headertop">

<li><a class="mycart"><span class="cartimage"></span> (0 items)</a></li>

 <li><a href="#">Stores</a></li>
   <li>|</li>
   <li><a href="#">My Account</a></li>
     <li>|</li>
  <li> <a href="#">Wishlist</a></li>
    <li>|</li>
<li><a href="#">Help</a></li>



</ul>
<ul class="headerbottom">
<li class="ht"><span class="number">(877) 370-1311</span><span class="call"></span></li>
<li class="bullet">FREE SHIPPING ON ALL U.S. ORDERS OVER $75</li>
<li>FREE RETURNS ON ALL U.S. ORDERS</li>

</ul>

</div>

</div>
</div>
</header>
<!-- header end -->

<!-- search start -->
<section class="searchh_outer">

<div class="searchh"><input type="text"><span class="searchhimg"></span><input type="button" value="Search"><div class="cb"></div></div>

</section>

<div class="wrap"><nav><ul>
<!-- men start --><li><a href="#">Men</a>
<!-- dropdown start -->

<ul class="division1">



<li class="dropdowntitle"><a href="#" class="bluelink">Top Categories   </a></li>
<li><a href="#">Long Sleeve Woven Shirts    </a></li>
<li><a href="#">Short Sleeve Woven Shirts</a></li>  
<li><a href="#">Summer Mens Short Sleeve Woven</a>  </li>
<li><a href="#">T-Shirts    </a></li>
<li><a href="#">Pants</a>   </li>
<li><a href="#" class="bluelink">View All Categories</a>    </li>



</ul><ul class="division1">



<li class="dropdowntitle"><a href="#" class="bluelink">Top Categories   </a></li>
<li><a href="#">Long Sleeve Woven Shirts    </a></li>
<li><a href="#">Short Sleeve Woven Shirts</a></li>  
<li><a href="#">Summer Mens Short Sleeve Woven</a>  </li>
<li><a href="#">T-Shirts    </a></li>
<li><a href="#">Pants</a>   </li>
<li><a href="#" class="bluelink">View All Categories</a>    </li>



</ul><ul class="division2">



<li class="dropdowntitle"><a href="#" class="bluelink">Top Brands   </a></li>
<li><a href="#">DaVinci</a> </li>
<li><a href="#">Lennon/McCartney</a>    </li>
<li><a href="#">Scott Weiland   </a></li>
<li><a href="#">John Lennon </a></li>
<li><a href="#">Rock & Roll Relgion</a></li>


<li><a href="#" class="bluelink">View All Categories</a>    </li>



</ul><ul class="division3">



<li class="dropdowntitle"><a href="#" class="bluelink">Top Categories   </a></li>
<li><a href="#">Suits and Blazers</a>   </li>
<li><a href="#">Jeans   </a></li>
<li><a href="#">Ties    </a></li>
<li><a href="#">Jackets </a></li>
<li><a href="#">Scarves</a></li>    



</ul>







</li>
<!-- men end -->



<!-- dropdown end -->



<li><a href="#">Women</a></li>
<li><a href="#">Sale</a></li>
<li><a href="#">Gift Card</a></li>
<li><a href="#" class="chris">Christopher Wicks</a></li>


</ul></nav></div>

<section class="wrap">


<!-- header start -->

<section class="maincontent">



</section>


<div class="cb"></div>
</section>

</body>
</html>
4

2 回答 2

1

发生这种情况是因为悬停效果仅通过悬停a元素触发。尝试将悬停效果添加到li元素。

nav ul li:hover a{ background-color:#fff; color:#000; border-radius:3px 3px 0 0 ;}

看看这个小提琴：

http://jsfiddle.net/HqtDn/

即使您尚未通过链接，它实际上也会触发 dropdwon。为了避免这种情况，我建议将父<li>元素的大小调整为下面链接元素的大小，并使用边距而不是填充来正确定位所有内容。

于 2013-06-06T12:50:21.687 回答
0

交换：

nav ul li a:hover { }

为了：

nav ul li:hover a { }

它为您提供所需的效果，但会破坏li您可以清理的其他链接。

编辑：推理：当您将鼠标悬停在 而li不是a在li

于 2013-06-06T12:51:54.380 回答