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

Question

Я пытаюсь создать горизонтальное меню с помощью CSS, но я столкнулся с препятствием. Я пытаюсь сделать так, чтобы первый блок ссылок и последний блок ссылок имели закругленные углы, используя 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 из встроенных элементов в секцию

Answer 2

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

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

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

Answer 3

Вы должны установить 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;
}