个人中心
gpt4 book ai didi

html - 当我悬停在下拉菜单上时悬停效果消失

转载 作者：太空宇宙 更新时间：2023-11-04 14:56:08 34 4
gpt4 key购买 nike

我制作了一个 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>

最佳答案

发生这种情况是因为悬停效果只有在悬停 a 时才会触发。元素。尝试将悬停效果添加到 li元素代替。 

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

看看这个 fiddle :

http://jsfiddle.net/HqtDn/

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

关于html - 当我悬停在下拉菜单上时悬停效果消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16962419/

34 4 0
文章推荐： c++ - boost::mem_fn 的正确类型是什么？
文章推荐： html - SVG viewbox 总是相对于它的大小？
文章推荐： c++ - 在 C++ 中定义类型安全的 "byte"(如 8 位)类型的最现代和惯用的方法是什么？
文章推荐： java - 我的希尔密码有什么问题吗？ (Java 安卓)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com