0

我创建了一个 CSS 下拉菜单，并用边框完成了它。当我添加左边框和下边框时，一切都很好。一旦我添加了右边框，它就会在右边框和下拉菜单之间放置一个间隙。有没有什么办法解决这一问题？这是一张照片http://sphotos-b.ak.fbcdn.net/hphotos-ak-ash3/563034_641717089180441_1749213926_n.jpg

我使用的 HTML：

<nav id="main_nav" class="fluid">
        <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">Show Services</a>
           <ul>
             <li><a href="#">Audio</a></li>
             <li><a href="#">Lighting</a></li>
             <li><a href="#">Power</a></li>
             <li><a href="#">Special Effects</a></li>
             <li><a href="#">Staging/Trussing</a></li>
             <li><a href="#">Video</a></li>
           </ul>
         </li>
         <li><a href="#">Systems Integration</a>
           <ul>
             <li><a href="#">Corporate and Commercial</a></li>
             <li><a href="#">Digital Signage</a></li>
             <li><a href="#">Entertainment</a></li>
             <li><a href="#">IP Based Systems</a></li>
           </ul>
         </li>
         <li><a href="#">Portfolio</a>
           <ul>
             <li><a href="#">Concrets</a></li>
             <li><a href="#">Installations</a></li>
             <li><a href="#">Parties</a></li>
             <li><a href="#">Product Launch</a></li>
             <li><a href="#">Trade Shows</a></li>
           </ul>
         </li>
         <li><a href="#">Our Company</a></li>
        </ul>
      </nav>

我使用的 CSS：

#main_nav {
}
#main_nav ul {
    list-style-type: none;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    width: 100%;
    position: relative;
    float: left;
}
#main_nav ul li {
    float: left;
    position: relative;
    width: 20%;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    background-color: #4d4d4d;
}
#main_nav ul li a {
    width: 100%;
    float: left;
    text-align: center;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    padding-top: 0%;
    font-style: normal;
    font-weight: 400;
    font-family: allerta;
    font-size: 1em;
    display: block;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
    border-left: 0.1em solid #999999;
    border-bottom: 0.1em solid #999999;
    border-right: 0.1em solid #999999;
}
#main_nav a:hover, #main_nav a:active, #main_nav a:focus, #main_nav a.thispage {
    background-color: #666666;
    color: #0099FF;
    width: 100%;
}
#main_nav ul li ul {
    visibility: hidden;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    float: left;
    list-style-type: none;
    position: absolute;
    margin-top: 100%;
    padding-top: 0%;
    width: 100%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}
#main_nav ul li ul li {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-left: 0%;
    padding-top: 0%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    background-color: #4d4d4d;
}
#main_nav ul li ul li a {
    width: 100%;
    padding-right: 0%;
    padding-bottom: 0%;
    padding-left: 0%;
    margin-top: 0%;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 0%;
    float: left;
    font-style: normal;
    font-weight: 400;
    font-family: allerta;
    font-size: 0.9em;
    text-align: center;
    text-decoration: none;
    display: block;
    color: #FFFFFF;
    text-transform: uppercase;
}
#main_nav ul li:hover ul, #main_nav ul li:active ul, #main_nav ul li:focus ul, #main_nav ul li.thispage ul {
    visibility: visible;
    width: 100%;
}
4

2 回答 2

0

我查看了您的代码并进行了一些更改。还冒昧地为您创建了一个 JS Fiddle 示例。我没有更改任何 HTML，只更改了 CSS。

在这里查看 JS Fiddle

    html {
        font: 100%/1.5 Arial, Helvetica, sans-serif;
    }
    html, body {
        margin: 0;
    }
/* Common (Shared) Properties */
    #main_nav, ul, li, a {
        display: block;
        margin: 0;
        padding: 0;
    }
    #main_nav ul {
        list-style: none;
        width: 100%;
        position: relative;
        float: left;
    }
    #main_nav li {
        float: left;
        position: relative;
        width: 20%;
        background: #4d4d4d;
    }
    #main_nav a {
        float: none;
        text-align: center;
        text-transform: uppercase;
        color: #FFF;
        text-decoration: none;
        font-size: 1em;
        border: 1px solid #999;
        border-top: none;
    }
    #main_nav a:hover,
    #main_nav a:active, 
    #main_nav a:focus, 
    #main_nav a.thispage {
        background: #666;
        color: #FFF;
    }
/* Controls Dropdown */
    #main_nav ul li ul {
        visibility: hidden;
        position: absolute;
        top: auto; /* Updated position to 'auto' and removed margin-top: 100% */
        left: 0;
    }
    #main_nav ul ul li {
        float: none;
        width: 100%;
    }
    #main_nav ul li:hover ul, 
    #main_nav ul li:active ul, 
    #main_nav ul li:focus ul, 
    #main_nav ul li.thispage ul {
        visibility: visible;
        display: block;
    }
于 2013-08-06T14:55:34.440 回答
0

我重写了 CSS，希望对学习有所帮助，因为它更易于理解并且可以解决您的问题。

问题是子菜单项的每边宽度为 100% + 1px 边框超过 100%，所以它溢出了。

这是带有修复的 JS Fiddle 示例的链接：http: //jsfiddle.net/MartinTale/69gDQ/3/

这是新的CSS：

#main_nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#main_nav ul {
    width: 100%;
}

#main_nav li {  
    background-color: #4d4d4d;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

#main_nav > ul > li {
    float: left;
    width: 20%; 
}

#main_nav ul ul {
    display: none;
}

#main_nav ul li:hover ul {
    display: inline-block;
}

#main_nav a {
    text-align: center;
    text-decoration: none;
    color: #FFF;
    text-transform: uppercase;
    display: inline-block;
    width: 100%;
    border-left: 1px solid #999999;
    border-bottom: 1px solid #999999;
    border-right: 1px solid #999999;
}

#main_nav ul li ul a {
    border-left: 0;
    border-right: 0;
}

#main_nav a:hover,
#main_nav a:active, 
#main_nav a:focus, 
#main_nav a.thispage {
    background: #666;
    color: #09F;
}
于 2013-08-06T15:10:35.717 回答