Горизонтальное меню с CSS

Question

Я пытаюсь сделать горизонтальное меню с помощью CSS, но я столкнулся с roadblock. То, что я пытаюсь выполнить, состоит в том, чтобы первый bblock link и последний блок ссылок имели закругленные углы, используя css3. Мне удалось создать меню, но я не могу добиться желаемого эффекта.

Я пробовал стилизовать эти отдельные элементы списка, но эффект не отображается. Я прикрепляю свои css и html к кому-то, на что посмотреть. Любые указатели будут оценены

<ul id="nav"> 
<li style="-moz-border-radius-topleft: 5px;-moz-border-radius-topright: px;-moz- order-radius-bottomright: px;-moz-border-radius-bottomleft: 5px;-webkit-border-radius: 5px px px 5px; border-radius: 5px px px 5px;"><a href="#" style="line-height:48px;">Home</a></li> 
<li><a href="#" style="line-height:48px;">About Us</a></li> 
<li><a href="#" style="line-height:48px;">Services</a></li> 
<li><a href="#" style="line-height:48px;">Events</a></li> 
<li><a href="#" style="line-height:48px;">Gallery</a></li> 
<li><a href="#" style="line-height:48px;">Testimonials</a></li> 
<li><a href="#" style="line-height:48px;">Contact</a></li> 
</ul> 

#nav { 
    margin-left: 9px; 
    padding:0; 
    margin-top: 30px; 
    margin-bottom: 10px; 
    list-style:none; 
    clear:both ; 
} 
#nav li { 
    float:left; 
    display:block; 
    width:139px; 
    position:relative; 
    z-index:500; 
    margin:0 0; 
border-left: 1px solid #5d564e; 
} 
#nav li a { 
    display:block; 
    padding:8px 5px 0 5px; 
    font-weight:500; 
    height:50px; 
    text-decoration:none; 
    background: #333; 
    color: #fff; 
    text-align:center; 
    border-left: 1px solid #000; 
} 
#nav li a:hover { 
    color:#fff; 
    background: #3e7e99; 
    text-decoration:underline; 
} 
#nav a.selected {color:#f00;} 

Answer 1

Вот jsfiddle с помощью CSS3 для закругления внешних углов первых и последних элементов в списке - если я понимаю, что вы пытаетесь правильно выполнить ,

Еще одна вещь, которую я добавил бы, заключается в том, что перемещение вашего css из строки с элементами в раздел < > или даже лучший файл css предпочтительнее.

Answer 2

Вы должны установить overflow:hidden; для ul.

http://jsfiddle.net/KKPmL/1/

#nav{ 
    border-radius:10px; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    overflow:hidden; 
} 

Это не работает, если экран не является достаточно большим, чтобы отобразить навигацию по одной строке.

Второй способ:

http://jsfiddle.net/KKPmL/2/

#nav li:first-child a{ 
    border-top-left-radius:10px; 
    -moz-border-top-left-radius:10px; 
    -webkit-border-top-left-radius:10px; 
    border-bottom-left-radius:10px; 
    -moz-border-bottom-left-radius:10px; 
    -webkit-border-bottom-left-radius:10px; 
} 
#nav li:last-child a{ 
    border-top-right-radius:10px; 
    -moz-border-top-right-radius:10px; 
    -webkit-border-top-right-radius:10px; 
    border-bottom-right-radius:10px; 
    -moz-border-bottom-right-radius:10px; 
    -webkit-border-bottom-right-radius:10px; 
} 

Answer 3

px не является допустимым значением, Вам необходимо 0px или просто 0

Также лучше использовать классы first и last (или аналогичный) на li

Посмотрите здесь для примера
http://jsfiddle.net/WYuNR/