CSSを使用した水平メニュー

Question

CSSを使用して水平メニューを作成しようとしていますが、私はロードブロッキングを実行しました。私が達成しようとしているのは、最初のリンクbblockと最後のリンクブロックにcss3を使用して角を丸めることです。私はメニューを作りましたが、私は希望の効果を達成することができません。

私はこれらの個々のリストアイテムをスタイリングしようとしましたが、効果は示されませんでした。私は誰かのために私のCSSとHTMLを添付しています。任意のポインタは、あなたがulためoverflow:hidden;を設定する必要が

<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

は、リスト内の最初と最後の項目の外側の角を丸めるためにCSS3を使用してjsfiddleだ - 私はあなたが正しく達成しようとしているかを理解場合。

私はあまりにも、要素をインラインからあなたのCSSを<のスタイル>セクションに移動するか、CSSファイルをより良いものにすることをお勧めします。

Answer 2

をいただければ幸いです。

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

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

画面が1行にナビゲーションを表示するのに十分な大きさでない場合、これは動作しません。

第二の方法：ここで

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が有効な値ではありません、あなたはまた、それがクラスfirstとlast（または類似）を使用することをお勧めします0pxまたはちょうど0

が必要li

に例えばここ
http://jsfiddle.net/WYuNR/

を見て