Question

我已经制作了一个css下拉菜单，我希望每个下拉选项在悬停时都有蓝色背景。但是，当我尝试这个时，该选项的背景只有在其上半部分悬停时才为蓝色。这是jsfiddle。如果将鼠标悬停在“产品”选项上，然后将鼠标放在“板”下但在灰色水平线上方，则背景将不是蓝色。有谁能够帮我？谢谢。

http://jsfiddle.net/hDWuJ/1/

HTML（请注意，这是我的网页的一部分，因此它没有有效的语法）

<h1 id="title">Sample Text</h1>
<div id="HorzLineDiv"><hr></div>    
<div id="MenuCenter">
<nav id="Menu" class="MenuBar">
    <ul id="drop-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Products <span id="arrowDown">&#9660</span></a>
        <ul>
          <li><a href="#">Children's Stuff</a></li>
          <li><a href="#">Plates</a></li>
          <li><a href="#">Top Sellers</a></li>
        </ul>
      </li>
      <li><a href="#">Services <span id="arrowDown">&#9660</span></a>
        <ul>
          <li><a href="#">Wash 'n' Fold</a></li>
          <li><a href="#">Blanket Making</a></li>
          <li><a href="#">Wedding Dress</a></li>
          <li><a href="#">Custom</a></li>
        </ul>
      </li>
    </ul>
    </nav>
    </div>

CSS

body
{
background-color: #dfdfdf;
}

#title
{
    text-align: center;
    color: #07a8ca;
    font-size:60pt;
    margin: 0px;
    padding: 0px;
    text-shadow: 2px 2px 0px #888888;
}

h1
{
    margin: 0px;
    padding: 0px;
}

hr 
{
    height: 3px;
    color: #07a8ca;
    background: #07a8ca;
    font-size: 0;
    border: 0;
}

#HorzLineDiv
{
    width: 95%;
    margin: 2% 0% 3% 0%;
    margin-left: auto ;
    margin-right: auto ;
}

#Menu
{
    width:100%;
}

#drop-nav
{
    margin: 0 auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

ul 
{
    list-style: none;
    padding: 0px;
    margin: 0px;

}

ul li 
{
    display: block;
    position: relative;
    float: left;
    display: inline;
    padding: 12px 50px 8px 50px;
    margin: 0px 5px 0px 5px;
    border-left: 3px solid #07a8ca;
}

ul li:first-child
{
    border-left: 0px; 
}

li ul 
{
    display: none;
}

ul li a 
{
    display: block;
    text-transform: uppercase;
    text-decoration: none;
    text-align:center;
    color: #000;
    font: 25px/1.1em "Kelly Slab","serif";
    transition: color 0.4s ease 0s;
    -moz-transition: color 0.4s ease 0s; /* Firefox 4 */
    -webkit-transition: color 0.4s ease 0s; /* Safari and Chrome */
    -o-transition: color 0.4s ease 0s; /* Opera */
}

ul li a:hover 
{
    color: #FF4D4D;
}

li:hover ul 
{
    display: block; 
    position: absolute;
}

li:hover li 
{
    float: none;
}

li:hover a 
{
    margin:0;
}

li:hover li a:hover 
{
    background: #21e8fa;
}

#drop-nav li ul li 
{
   border-top: 0px; 
   border-left: 0px;
}

#drop-nav ul li a
{
    border-top: 3px solid #888;
    padding: 13px 0px 13px 0px;
    margin: -10px -8px;
    text-align:center;
    text-transform: none;
    position:relative;
    top: 13px;
    color: #000;
}

#drop-nav ul
{
    width:100%;
    position:absolute;
    right:-5px;
}

a
{
    margin:0px;
    padding:0px;
}

#arrowDown
{
    font-size: 10pt;
    vertical-align:text-bottom
}

Answer 1

主要问题在于您的边距和填充，但这可以通过将ul li更改为display: block;而不是display: inline;来解决。

当然，这不是问题的直接解决方法，底部仍有一个区域在悬停时不起作用，但它比以前小得多。解决此问题的正确方法是修复边距和填充。

Demo

更新

深入了解您的代码，我发现了实际问题。它不像我原先想的那样在边距或填充中，而是在top中定义的#drop-nav ul li a属性为13px。 13px的顶部是在列表中创建一个空白的非活动空间。

摆脱那件作品并且工作正常：DEMO

悬停在CSS菜单上只影响元素的一部分？

1 个答案: