第一个错误：

Question

请帮助我，我在“下拉菜单”中收到两种错误

第一个错误：

当我在子菜单中向右移动光标时（示例：投资组合2），我得到一个黑盒子。如果我的光标位于文本上方（例如：投资组合2），则不会发生这种情况。 - 打印屏幕：http://i.imgur.com/qdVrB2m.jpg

第二个错误：

这是我的第二个错误，请查看此打印屏幕：http://i.imgur.com/YEtn9sZ.jpg

查看演示实时链接哦：http://jsbin.com/akugin/1/edit

这是我的html内容：

<div id="navigasi_menu">
<div class="navigasi_list">
    <div class="menu-main-menu-container">
    <ul class="menu" id="menu-main-menu">

        <li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-6" id="menu-item-6">
        <a href="/">Home</a></li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7" id="menu-item-7"><a href="#">Portfolio</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-8" id="menu-item-8"><a href="#">Portfolio 1</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9" id="menu-item-9"><a href="#">Portfolio 2</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10" id="menu-item-10"><a href="#">Portfolio 3</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11" id="menu-item-11"><a href="#">Portfolio 4</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12" id="menu-item-12"><a href="#">Portfolio 5</a></li>
            </ul>
        </li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-349" id="menu-item-349"><a href="#">Category</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-245" id="menu-item-245"><a href="/?cat=3">Lifestyle</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-246" id="menu-item-246"><a href="/?cat=4">Interior</a></li>
                <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-367" id="menu-item-367"><a href="/?cat=10">Examples</a></li>
            </ul>
        </li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-348" id="menu-item-348"><a href="#">Features</a>
            <ul class="sub-menu">
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-343" id="menu-item-343"><a href="/?page_id=286">Shortcode</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-366" id="menu-item-366"><a href="/?p=351">Sample Images</a></li>
                <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-378" id="menu-item-378"><a href="/?page_id=2">Sample Page</a></li>
                <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-397" id="menu-item-397"><a href="/?p=146">Sample Comments</a></li>
            </ul>
        </li>

        <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14" id="menu-item-14"><a href="http://www.forum.com/">Support</a></li>

    </ul>
    </div>  
</div>
</div>

这是我的CSS内容：

#navigasi_menu {
background:#ffffff;
height:45px;
width:1188px;
float:left;
display:block;
box-shadow:0px 1px 4px #000000;
border-bottom:1px solid #D4D4D4;
border-top:1px solid #D4D4D4;
z-index:9999;
}

.navigasi_list {
height:45px;
margin-left:0;
text-align:left;
}

.navigasi_list a {
color:#333333;
font-family:'bebasneueregular','Oswald','Helvetica Neue','Helvetica',Helvetica,Arial,sans-serif;
padding:0px 17px 0px 19px;
text-decoration:none;
}

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

#navigasi_menu li {
border-right:2px solid #ffffff;
position:relative;
float:left;
font-size:25px;
height:45px;
}

#navigasi_menu li a {
line-height:2;
height:45px;
display:inline-block;
}

#navigasi_menu li:hover {
background:#999999;
float:left;
list-style:none;
}

#navigasi_menu ul li ul {
display:none;
float:left;
left:0;
position:absolute;
z-index:99999;
}

#navigasi_menu ul li ul li {
position:relative;
float:left;
font-size:23px;
width:180px;
color:#ffffff;
border-right:0px;
}

#navigasi_menu ul li ul li:hover {
background:#333333;
color:#B2B2B2;
}

#navigasi_menu ul li ul li a:hover {
background:#333333;
color:#B2B2B2;
}

#navigasi_menu ul li:hover > ul {
display:block;
background:#999999;
border-top:5px solid #cccccc;
}

谢谢。

Answer 1

要解决这两个问题，请将overflow:hidden添加到您的#navigasi_menu ul li ul规则。

#navigasi_menu ul li ul {
    display:none;
    float:left;
    left:0;
    position:absolute;
    z-index:99999;
    overflow:hidden;
}

并创建一个新规则：

#navigasi_menu ul li ul li a {
    /**/
    display:block;
    width:100%;
}

<强> jsFiddle example

Answer 2

使用此...

在班级#navigasi_menu ul li ul li

为width:180px;

更改此width:250px;

请参阅 DEMO

Answer 3

看起来您修复了第一个问题（通过更改悬停时的文字颜色）。

至于第二个问题，最好不要在元素上设置高度，因为如果内容不能适合该高度，则会出现此溢出问题。在这种情况下最好设置行高，因此我建议您将元素上的height更改为line-height，然后只删除height上的<li> } S：

#navigasi_menu li {
border-right:2px solid #ffffff;
position:relative;
float:left;
font-size:25px;
height:45px;  /* remove this */
}

#navigasi_menu li a {
line-height:2; /* remove this */
line-height:45px; /* add this */
display:inline-block;
}

Answer 4

这有点乱。但对于这些问题：

第一个问题：因为li:hover和li a:hover有单独的样式。你可以改为：

#navigasi_menu ul li ul li:hover {
background:#333333;
color:#B2B2B2;
}

#navigasi_menu ul li ul li:hover a { /* Change was here from ...ul li a:hover */
background:#333333;
color:#B2B2B2;
}

第二个问题：你为list元素设置了一个宽度太小的问题。把它扩大：

#navigasi_menu ul li ul li {
position:relative;
float:left;
font-size:23px;
min-width:180px;
  width: 210px; /* Change was here from 180px */
color:#ffffff;
border-right:0px;
}

这是一个快速修复，但如果我是你，我会检查一个好的，有效的例子的CSS。

修改后的JSBIN：http://jsbin.com/eyoziy/1/edit

下拉菜单中的两个错误

第一个错误：

第二个错误：

4 个答案: