Question

HTML：

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
        <ul><a href="#">Power tools</a></ul>
        <ul><a href="#">Decorating</a></ul>
        <ul><a href="#">Plumbing</a></ul>
        <ul><a href="#">Electrical</a></ul>
        <ul><a href="#">Lighting</a></ul>
        <ul><a href="#">Tools</a></ul>
        <ul><a href="#">More products...</a></ul>
    </li>
    <li><a href="#">Service</a>
        <ul><a href="#">Handy man</a></ul>
        <ul><a href="#">Key cutting</a></ul>
    </li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">More...</a></li>
</ul>

CSS：

li ul {
    display:none;
}

li:hover ul {
    display:block;
}

ul li {
    list-style:none;
}

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

li {
    float:left;
    position:relative;
}

ul{
    position: relative;
}

ul li a{
    display:block;
    padding: 25px;
    background-color:white;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(238,238,238,1) 100%); /* W3C */
    text-decoration:none;
    color: black;
    font-family:arial bold;
    border-bottom: 4px solid rgb(140, 0, 0);
}

ul li ul a {
    display:block;
    padding: 25px;
    background-color:rgb(140,0,0);
    background:rgb(140,0,0);
    color: white;
    font-family:arial bold;
    border-bottom: 0px solid rgb(140, 0, 0);
}

JSFIDDLE：http://jsfiddle.net/r6Mzp/6/

如何删除悬停主导航栏链接时发生的额外空间？
我的意思是当我在导航栏中悬停一个链接时，下拉列表会显示，但最初悬停的链接从右边稍微大一些。如何阻止原始链接从右侧变大？帮助！

Answer 1

我在手机上，无法评论我的代表的原因。除此之外，使你的ul（子菜单）位置绝对并且是相对的专利元素位置。应该做的。

Answer 2

提供ul li css元素的宽度如下：

ul li {
    list-style:none;
    width:125px;
}

或者您可以给出每个li（ul li a）元素的宽度。这也可行。

JSFIDDLE

Answer 3

子菜单包含的字符多于创建该效果的主导航链接。为了消除宽度的增加，您需要限制导航链接的宽度。所以这是你需要修改的内容：

ul li ul a {
    display:block;
    /*add this width element*/
    width:64px;
    padding: 25px;
    background-color:rgb(140,0,0);
    background:rgb(140,0,0);
    color: white;
    font-family:arial bold;
    border-bottom: 0px solid rgb(140, 0, 0);
}

Fiddle

<强>更新

不像我建议的那样改变上面元素的宽度，你可以像这样调整ul li的宽度：

ul li {
    list-style:none;
    width:150px;
}

UPDATED FIDDLE

最终更新：

请找到更新的CSS。我想如果不改变任何宽度就不可能。

ul li ul a {
    display:block;
    background-color:rgb(140,0,0);
    background:rgb(140,0,0);
    color: white;
    width:60px;
    word-wrap:break-word;
    font-family:arial bold;
    border-bottom: 0px solid rgb(140, 0, 0);
}

FIDDLE FOR SAME

Answer 4

子对象的大小比父对象大。

在填充中将大小增加到35。

ul li a{
   ...
   padding: 35px;
   ..
}

Answer 5

ul li {
    list-style:none;
    width: 15%;
}

将鼠标悬停在导航栏中时出现的额外空间

5 个答案: