html中加圆角的最小值,上一个HTML列表项的圆角底部角？

我有这些下拉菜单功能正常，除了菜单的底部角落不圆整。我包含了html，css & jquery代码。你会知道为什么我最后的列表项目没有显示圆角底部？上一个HTML列表项的圆角底部角？

谢谢你的时间！

HTML

• About Me
• Favorite Films
  • DC Cinematic Universe
  • James Bond
  • Marvel Cinematic Universe
  • Star Trek
  • Star Wars
  • X-Men
• Favorite TV Shows
  • Americans, The
  • Game of Thrones

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

+0

你想ul有一个边界半径？ http://jsfiddle.net/q4NL3/ –

+0

然后所有4个角落都是圆角的。我只希望底角四舍五入。谢谢你的时间！ –