html - 在导航栏中悬停链接时出现额外空间

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 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