上一个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

除了最后一个li的选择符外，您拥有的所有内容都是正确的。你需要做两件事情之一：

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

或者......

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

这了我个措手不及了一段时间，以及和我不知道如果实现在某个时刻改变。如名称所示，:last-child选择周围元素的最后一个孩子，这就是为什么您需要使用它来指定父母元素。

:last-of-type在这种情况下选择指定元素的最后一个，即li。

Answer 2

你可以改变边界半径的不同角落是这样的：

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

link

希望有所帮助！

Answer 3

你有没有尝试把菜单放在一个div中，然后专门声明最后一个被舍入的列表？

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

Answer 4

在CSS中，你可以做圆角不同的方式：

第10px是左上角，2°右上角，3°右下角，4℃左下：

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

如果仅指定一个值，这将圆所有的玉米ERS：

border-radius: 10px; 

或单独：

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

Answer 5

使用这个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 6

背景已应用于导航栏，而border-radius应用于nav li li：最后一个孩子。将背景移到nav li li解决了问题。