html - 悬停在 CSS 菜单上只影响部分元素?

标签 html css drop-down-menu

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

最佳答案

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

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

Demo

更新

深入阅读您的代码,我发现了实际问题。它并不像我最初认为的那样在边距或填充中,而是在 #drop-nav ul li a 中定义的 13px 的 top 属性。 13px 的顶部在您的列表中创建了一个空白的非事件空间。

去掉那 block ,它工作正常:DEMO

关于html - 悬停在 CSS 菜单上只影响部分元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18430681/

相关文章:

html - 是为较小的显示器缩放所有页面的正确解决方案吗?

javascript - 为什么这个脚本在 Javascript 中会出现延迟?

jquery - IE 和 Firefox 中的下拉菜单闪烁

html - 无法访问子菜单

javascript - 修改按钮在动态表 HTML 中不起作用

css - HTML 模板无法在 outlook 7 上打开,为什么?

html - Bootstrap 列偏移量不起作用

html - 像素不会加起来

css - 如何使用具有固定位置 div/的 float、clear 和 overflow 元素并排对齐两个 div

javascript - 带滑动下拉菜单的移动导航