CSSナビゲーションバーの終了行を削除する

Question

CSSナビゲーションバーに問題があります。ナビゲーションバーの終了行を削除できません。それは場所と専門家ではないように見えます。

iを幅から差し引くと、ナビゲーションバーの下の終了タブが移動されます。

これを修正する方法に関するヘルプやアイデアはありますか？

コード：あなたのCSSに次の行を追加します。

#cssmenu, 
 
#cssmenu ul, 
 
#cssmenu li, 
 
#cssmenu a { 
 
    border: none; 
 
    line-height: 1; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#cssmenu { 
 
    height: 37px; 
 
    display: block; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    width: auto; 
 
    border-color: #336699; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#cssmenu > ul { 
 
    list-style: inside none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#cssmenu > ul > li { 
 
    list-style: inside none; 
 
    float: left; 
 
    display: inline-block; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#cssmenu.align-center > ul { 
 
    text-align: center; 
 
} 
 
#cssmenu.align-center > ul > li { 
 
    float: none; 
 
    margin-left: -3px; 
 
} 
 
#cssmenu.align-center ul ul { 
 
    text-align: left; 
 
} 
 
#cssmenu.align-center > ul > li:first-child > a { 
 
    border-radius: 0; 
 
} 
 
#cssmenu > ul > li > a { 
 
    outline: none; 
 
    display: block; 
 
    position: relative; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    text-shadow: 1px 1px 0 rgba(55, 110, 166, 0.6); 
 
    font-weight: 700; 
 
    font-size: 13px; 
 
    font-family: verdana; 
 
    border-right: 1px solid #336699; 
 
    color: #ffffff; 
 
    padding: 12px 20px; 
 
} 
 
#cssmenu > ul > li:first-child > a { 
 
    border-radius: 5px 0 0 5px; 
 
} 
 
#cssmenu > ul > li > a:after { 
 
    content: ""; 
 
    position: absolute; 
 
    border-right: 1px solid; 
 
    top: -1px; 
 
    bottom: -1px; 
 
    right: -2px; 
 
    z-index: 99; 
 
    border-color: #3c3c3c; 
 
} 
 
#cssmenu ul li.has-sub:hover > a:after { 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
#cssmenu > ul > li.has-sub > a:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 18px; 
 
    right: 6px; 
 
    border: 5px solid transparent; 
 
    border-top: 5px solid #ffffff; 
 
} 
 
#cssmenu > ul > li.has-sub:hover > a:before { 
 
    top: 19px; 
 
} 
 
#cssmenu > ul > li.has-sub:hover > a { 
 
    /*padding-bottom: 14px;*/ 
 
    z-index: 999; 
 
    border-color: #2B5681; 
 
} 
 
#cssmenu ul li.has-sub:hover > ul, 
 
#cssmenu ul li.has-sub:hover > div { 
 
    display: block; 
 
} 
 
#cssmenu > ul > li.has-sub > a:hover, 
 
#cssmenu > ul > li.has-sub:hover > a { 
 
    background: #2B5681; 
 
    border-color: #2B5681; 
 
} 
 
#cssmenu ul li > ul, 
 
#cssmenu ul li > div { 
 
    display: none; 
 
    width: auto; 
 
    position: absolute; 
 
    top: 38px; 
 
    background: #2B5681; 
 
    border-radius: 0 0 5px 5px; 
 
    z-index: 999; 
 
    padding: 10px 0; 
 
} 
 
#cssmenu ul li > ul { 
 
    width: 200px; 
 
} 
 
#cssmenu ul ul ul { 
 
    position: absolute; 
 
} 
 
#cssmenu ul ul li:hover > ul { 
 
    left: 100%; 
 
    top: -10px; 
 
    border-radius: 5px; 
 
} 
 
#cssmenu ul li > ul li { 
 
    display: block; 
 
    list-style: inside none; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#cssmenu ul li > ul li a { 
 
    outline: none; 
 
    display: block; 
 
    position: relative; 
 
    font: 10pt verdana; 
 
    color: #ffffff; 
 
    text-decoration: none; 
 
    text-shadow: 1px 1px 0 rgba(55, 110, 166, 0.6); 
 
    margin: 0; 
 
    padding: 8px 20px; 
 
} 
 
#cssmenu, 
 
#cssmenu ul ul > li:hover > a, 
 
#cssmenu ul ul li a:hover { 
 
    background: #2B5681; 
 
    background: -moz-linear-gradient(top, #2B5681 0%, #336699 100%); 
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2B5681), color-stop(100%, #336699)); 
 
    background: -webkit-linear-gradient(top, #2B5681 0%, #336699 100%); 
 
    background: -o-linear-gradient(top, #2B5681 0%, #336699 100%); 
 
    background: -ms-linear-gradient(top, #2B5681 0%, #336699 100%); 
 
    background: linear-gradient(top, #2B5681 0%, #336699 100%); 
 
} 
 
#cssmenu > ul > li > a:hover { 
 
    background: #336699; 
 
    color: Orange; 
 
} 
 
#cssmenu ul ul a:hover { 
 
    color: orange; 
 
    font-weight: bold; 
 
} 
 
#cssmenu > ul > li.has-sub > a:hover:before { 
 
    border-top: 5px solid Orange; 
 
}

<div id='cssmenu'> 
 
    <ul style="display: table;"> 
 
    <li style="width: 108px;" class='active'><a runat="server" href='~/Applications/Sentinel/Default.aspx'><span>Home</span></a> 
 
    </li> 
 
    <li style="width: 118px;" class='has-sub'><a><span>Jobs</span></a> 
 
     <ul> 
 
     <li class='has-sub'><a runat="server" style="text-align: left;" href='~/Applications/Sentinel/Jobs.aspx'>Jobs List<span></span></a> 
 
     </li> 
 
     <li class='has-sub'><a runat="server" style="text-align: left;" href='~/Applications/Sentinel/AddJob.aspx'><span>Add New Job</span></a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

#cssmenu > ul > li:last-child > a, #cssmenu > ul > li:last-child > a:after { 
    border-right: none; 
} 

このコードは、単にBORを削除あなたの最後のメニュー項目に由来します。

Answer 2

最後の境界線を削除するには、あなたのCSSでこれを追加します。

#cssmenu > ul > li:last-child a:after, #cssmenu > ul > li:last-child > a { 
    border-right: 0px solid; 
}