最后一個HTML列表項上的圓底角？

Question

我的這些下拉菜單運行正常，但菜單的底角沒有四舍五入。 我包括了html，css和jquery代碼。 您知道為什么我的最后一個列表項沒有顯示圓角嗎？

感謝您的時間！

HTML

    <nav>
    <ul>
        <li><a id="Me" href="#">About Me</a>
        <li><a href="#">Favorite Films</a>
            <!-- Films Drop-Down Menu -->
            <ul>
                <li><a id="DC" href="#">DC Cinematic Universe</a></li>
                <li><a id="Bond" href="#">James Bond</a></li>
                <li><a id="Marvel" href="#">Marvel Cinematic Universe</a></li>
                <li><a id="ST" href="#">Star Trek</a></li>
                <li><a id="SW" href="#">Star Wars</a></li>
                <li><a id="X" href="#">X-Men</a></li>
            </ul>
            <!-- /Films Drop-Down Menu -->
        </li>
        <li><a href="#">Favorite TV Shows</a>
            <!-- TV Drop Down Menu -->
            <ul>
                <li><a id="Americans" href="#">Americans, The</a></li>
                <li><a id="GoT" href="#">Game of Thrones</a></li>
            </ul>
            <!-- /TV Drop Down Menu -->
        </li>
    </ul>
</nav>

CSS

        nav {
    width: 100%;
    height: 2em;
    float: left;
    position: relative;
    background: linear-gradient(hsl(1,79%,30%), hsl(1, 88%, 44%), hsl(2,90%,26%));
    border: hsl(1,79%,30%) 2px solid;
    border-radius: 20px 20px 0 0;
}

nav ul {
    list-style: none;
}

nav li {
    width: 33%;
    display: inline;
    float: left;
    position: relative;
}

nav li a {
    /* Makes entire block for link clickable - not just text. */
    display: block;
    color: white;
    font-size: 1.5em;
    font-weight:bold;
    text-shadow: 5px 5px 5px black;
    transform:skewX(160deg);
    text-decoration: none;
}

nav li a:hover {
    color: #FFCC33;
}

nav ul ul {
    display: none;
    position: absolute;
    background: hsla(1,79%,30%,.8);
    /*Z-Index enables layering - higher values put elements toward top */
    z-index: 99;
}

nav li li {
    float: none;
    width: 100%;
    position: relative;
    padding: 10px;
    /*border: 1px hsl(1,79%,30%);*/
}

nav li li a {
    font-size: 1.25em;
}

/* Round bottom corners of menu items on bottom of drop-down menus.  */
nav li li:last-child {
    border-radius: 0 0 20px 20px;
}

JQUERY

    //DROP-DOWN MENUS
$('nav li').hover(function() {
    // stop() stops all animation before slideDown()
    $('ul',this).stop().slideDown(250);
},
    //When not hovering.
    function(){
        $('ul',this).stop().slideUp(250);
    }
);
//DROP-DOWN MENUS

Answer 1

您是否嘗試過將菜單放在div中，然后聲明要舍入的列表的最后一個？

    divname li:last-of-type a
{
   border-bottom:thin solid black;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;    
}

Answer 2

除了最后一個li的選擇器以外，您擁有的所有內容都是正確的。 您需要執行以下兩項操作之一：

nav li ul:last-child {...bottom border radius code...}

要么...

nav li li:last-of-type {...}

這也使我措手不及，我不確定實現是否在某個時候發生了變化。 顧名思義， :last-child選擇周圍元素的最后一個孩子，這就是為什么您需要使用它來指定父元素的原因。

:last-of-type選擇指定元素的最后一個，在這種情況下為li 。

Answer 3

在CSS中，您可以使用不同的方法制作圓角：

前10 10px為左上角，右上角2°，右下角3°，左下角4°：

border-radius: 10px 10px 10px 10px;

如果僅指定一個值，則將四舍五入：

border-radius: 10px;

或單獨：

border-top-left-radius:     10px;
border-top-right-radius:    10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius:  10px;

Answer 4

使用這個CSS

    nav {
    width: 100%;
    height: 2em;
    float: left;
    position: relative;
    background: linear-gradient(hsl(1,79%,30%), hsl(1, 88%, 44%), hsl(2,90%,26%));
    border: hsl(1,79%,30%) 2px solid;
    border-radius: 20px 20px 0 0;
}

nav ul {
    list-style: none;
}

nav li {
    width: 33%;
    display: inline;
    float: left;
    position: relative;
}

nav li a {
    /* Makes entire block for link clickable - not just text. */
    display: block;
    color: white;
    font-size: 1.5em;
    font-weight:bold;
    text-shadow: 5px 5px 5px black;
    transform:skewX(160deg);
    text-decoration: none;
}

nav li a:hover {
    color: #FFCC33;
}

nav ul ul {
    display: none;
    position: absolute;
    background: hsla(1,79%,30%,.8);
    /*Z-Index enables layering - higher values put elements toward top */
    z-index: 99;
}

nav li li {
    float: none;
    width: 100%;
    position: relative;
    padding: 10px;
    /*border: 1px hsl(1,79%,30%);*/
}

nav li li a {
    font-size: 1.25em;
}

/* Round bottom corners of menu items on bottom of drop-down menus.  */
nav li li:last-child {
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
}

Answer 5

背景應用於導航，而邊界半徑應用於導航：最后一個孩子。 將背景移至導航莉莉即可解決此問題。

Answer 6

您可以像這樣更改邊框半徑的不同角：

 .weee {
    border-radius: 0 0 0.2em 0.2em; /* top left, top right, bottom right, bottom left */

鏈接

希望有幫助！