Html 当我在下拉菜单上悬停时，悬停效果会消失_Html_Css

Html 当我在下拉菜单上悬停时，悬停效果会消失

html css

Html 当我在下拉菜单上悬停时，悬停效果会消失,html,css,Html,Css,我做了一个css下拉列表，问题是当我在“男人”上悬停，然后在出现的下拉列表上悬停时，“男人”上的悬停效果消失了。这是代码。谁能帮我解决这个问题吗 <!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">

我做了一个css下拉列表，问题是当我在“男人”上悬停，然后在出现的下拉列表上悬停时，“男人”上的悬停效果消失了。这是代码。谁能帮我解决这个问题吗

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


无标题文件
正文，ul{padding:0；margin:0；字体系列：'ambleregular'；}
*{边距：0；填充：0；}
ul{margin:0；padding:0；}
li{边距：0；列表样式：无；}
a、 img{边框：无；}
.cb{clear:两者；}
.fl{float:左；}
.fr{float:right；}
@字体{
字体系列：“AmblerRegular”；
src:url（'../font/amble-regular_0-webfont.eot'）；
src:url（'../font/amble-regular_0-webfont.eot？#iefix'）格式（'embedded-opentype'），
url（'../font/amble-regular_0-webfont.woff'）格式（'woff'），
url（'../font/amble-regular_0-webfont.ttf'）格式（'truetype'），
url（'../font/amble-regular_0-webfont.svg#amblereregular'）格式（'svg'）；
字体大小：正常；
字体风格：普通；
}
页眉、页脚、侧边、节、hgroup{display:block；}
.number{float:右；颜色：#81d300；字体大小：23px；行高：41px；}
.wrap{宽度：986px；边距：0自动；}
标题{宽度：100%；背景色：#000；颜色：#fff；浮动：左侧；填充：10px 0；}
.header_内部{宽度：100%；浮动：左；}
.logo{width:421px；float:left；}
.header_right{width:565px；float:left；字体大小：15px；字体系列：'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:右；行高：30px；填充：0 5px；}
.header_right ul.headertop li a{float:左；颜色：#fff；文本装饰：无；}
.header_right ul.headertop li a.mycart{float:left；背景色：#81d300；填充：5px；颜色：#000；字体重量：粗体；}
a、 mycart span.cartimage{背景：url（../img/sprite1.png）右上角不重复；高度：25px；宽度：28px；浮动：左；}
.headerbottom ul li.ht{高度：40px；}
span.call{宽度：14px；高度：40px；右边距：7px；显示：块；浮点：右；背景：url（../img/sprite1.png）左上不重复；}
.headerbottom ul li.bullet{高度：12px；背景：url（../img/sprite1.png）左上角不重复；}
.logo img{页边距顶部：25px；}
.searchh_外部{宽度：100%；浮动：左侧；边距顶部：10px；}
.searchh{背景色：#000；宽度：428px；边距：0自动0自动；填充：5px；}
.searchh输入[type=“text”]{height:28px；padding:0 3px；width:338px；float:left；border:none；线宽：28px；背景色：#ffffffff；边框半径：2px；-moz边框半径：2px；-webkit边框半径：2px；边距：0；padding:0；字体权重：粗体；颜色：#888；}
.searchh输入[type=“button”]{填充：4px；边框：无；背景色：#ff9c00；颜色：#fff；高度：28px；线条高度：28px；浮点：左；光标：指针；}
span.searchhimg{margin left:10px；float:left；background:url（../img/sprite1.png）right-38px不重复；背景色：#ff9c00；高度：28px；宽度：22px；}
导航{宽度：100%；边距顶部：8px；背景色：#000000；浮动：左；}
导航ulli{填充：4px40px 0px40px；浮动：左；}
nav ul li a{颜色：#fff；字体重量：正常；填充：0 20px；浮动：左侧；字体系列：17px；文本装饰：无；线条高度：30px；}
nav ul li a:悬停{背景颜色：#fff；颜色：#000；边界半径：3px 3px 0；}
导航ulli:hover>ul{显示：块；宽度：100%；背景色：#e7e7e7；}
导航ul{位置：相对；}
导航ul{显示：无；左：0；顶：30px；位置：绝对；}
导航ul ul.分区1{宽度：328px！重要；浮动：左侧；最小高度：237px；}
导航ul ul.division2{宽度：328px！重要；浮动：左；边距左：328px；最小高度：237px；}
导航ul ul.分区3{宽度：328px！重要；浮动：左；边距左：656px；最小高度：237px；}
nav ul li，nav ul li a{float:none；position:relative；}
导航ul.division1li，导航ul.division2li，导航ul.division3li{显示：块；宽度：328px；}
nav ul li a{颜色：#383838；字体大小：15px！重要；填充：0；}
导航ulli a：悬停{颜色：#111；背景：无；}
.dropdowntitle{color:#0066d8；字体大小：粗体；背景色：#FFFFFF}
.bluelink{color:#0066d8；字体大小：粗体；}
.bluelink:hover{color:#004ca1；}
nav ul li a.chris{字体大小：21px；颜色：#ee1a26；}


|

|

|



（877）370-1311
所有超过75美元的美国订单均可免费送货
所有美国订单均可免费退货

之所以会发生这种情况，是因为只有将

元素悬停时才会触发悬停效果。尝试将悬停效果添加到li
元素
nav ul li:hover a{ background-color:#fff; color:#000; border-radius:3px 3px 0 0 ;}

看看这把小提琴：

它实际上会触发dropdwon，即使你还没有通过链接。为了避免这种情况，我建议将父
元素的大小调整为下面链接元素的大小，并使用边距而不是填充来正确定位所有内容
 交换：
nav ul li a:hover { }

用于：
它提供您想要的效果，但会中断li
中您可以清理的其他链接
编辑：推理：当您将鼠标移到li
上时，我的样式将激活，而不是li
中的a

nav ul li:hover a { }