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 に答える