радиус границы внизу выпадающего меню

Question

Работает на простой навигационной панели. пока он отлично работает для меня минус одна мелочь. когда он падает, я хочу, чтобы средние секции оставались прямоугольником, а нижняя часть всегда была изогнутой на дне. прямо сейчас у меня есть так, что нижняя секция изогнута, хотя, когда я нависаю над ней, появляется обычный прямоугольник. Я пытался исправить это сам, но все, что я мог бы приступить к работе было это изменит все разделы CURVY

вот jsFiddle того, что я работаю над: http://jsfiddle.net/7mjEC/

и вот CSS:

@charset "utf-8"; 
#topMenu { 
    padding: 0px; 
    width: 760px; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    position: relative; 
    top: 80px; 
} 
#topMenu ul { 
    margin: 0px; 
    padding: 0px; 
} 
#topMenu ul li { 
    background-color: #666; 
    float: left; 
    border: 1px solid #999999; 
    position: relative; 
    list-style-type: none; 
} 
#topMenu ul li a { 
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    line-height: 30px; 
    color: #FFF; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    height: 30px; 
    width: 150px; 
} 
#topMenu ul ul { 
    position: absolute; 
    visibility: hidden; 
    top: 31px; 
} 
#topMenu ul li ul li a:hover { 
    background-color: #39F; 
} 
#topMenu ul li:hover ul { 
    visibility: visible; 
} 
#topMenu ul li:hover { 
    background-color: #919191; 
} 
#topMenu .topleftmenuitem { 
    border-radius: 20px 0 0 20px; 
} 
#topMenu .toprightmenuitem { 
    border-radius: 0 20px 20px 0; 
} 
#topMenu .topleftmenuitem:hover { 
    border-radius: 20px 0 0 0; 
} 
and #topMenu .toprightmenuitem:hover { 
    border-radius: 0 20px 0 0; 
} 
#topMenu ul ul li:last-child { 
    border-radius: 0 0 20px 20px; 
} 

видеть, когда вы наведите курсор мыши на последний ребенок он превращается из изогнутого к прямоугольнику, я просто хочу, чтобы держать его всегда изогнуты.

Answer 1

Вы должны использовать :last-of-type или :last-child псевдо

#topMenu > ul > li > ul > li:last-of-type a:hover { 
    border-radius: 0 0 20px 20px; 
    background: #f00; /* You can remove this, its just for a demo */ 
} 

Demo

---

Вышеуказанные средства селектора, выберите прямого ребенка ul к элементу имеющий id из #topMenu, чем выбрать прямой li на том, что ul, перемещение далее применяется одинаково, и в конце мы выбираем последний li ребенок, который находится под уровнем 2 ul, и мы применяем стили на a:hover

Answer 2

Я обновил вашу скрипку. Вам НЕ нужно расколоть все это, как это. Пожалуйста, смотрите мою скрипку гораздо более простой код:

http://jsfiddle.net/7mjEC/2/

Единственное изменение CSS вам действительно нужно добавить еще один селектор в:

ul ul li:last-child, 
ul ul li:last-child a { 
    border-radius: 0 0 20px 20px; 
}