0

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

第一个错误：

当我将光标移到子菜单中的正确方向时（示例：投资组合 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;
}

谢谢你。

4

4 回答 4

0

要解决这两个问题，请添加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 示例

于 2013-05-06T13:58:09.183 回答
0

用这个...

在课堂里#navigasi_menu ul li ul li

将此更改width:180px;为width:250px;

看这个演示

于 2013-05-06T13:59:38.597 回答
0

看起来您已经解决了第一个问题（通过更改悬停时的文本颜色）。

至于第二个问题，最好不要在元素上设置高度，因为如果内容不适合该高度，则会出现溢出问题。在这种情况下最好设置行高，所以我建议你将height元素上的更改为line-height并简单地删除sheight上<li>的：

#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;
}
于 2013-05-06T14:01:19.067 回答
0

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

第一个问题：因为你有单独的风格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;
}

第二个问题：您为列表元素设置了一个宽度，它太小了。使其更宽：

#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

于 2013-05-06T14:02:53.023 回答