0

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

1 回答 1

0

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

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

演示

更新

深入阅读您的代码，我发现了实际问题。它不像我最初想象的那样在边距或填充中，而是top在#drop-nav ul li a. 13px 的顶部在您的列表中创建了一个空白的非活动空间。

摆脱那块，它工作正常：DEMO

于 2013-08-25T16:17:47.597 回答