帶CSS的水平菜單

我想用CSS製作水平菜單，但是我遇到了路障。我試圖完成的是讓第一個鏈接bblock和最後一個鏈接塊使用css3的圓角。我設法做出菜單，但我無法達到預期的效果。帶CSS的水平菜單

我試過造型那些個別列表項，但效果犯規表演。我附上了我的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;}

來源

2012-03-08 RomeNYRR

你使用什麼瀏覽器？ – kgr 2012-03-08 20:25:30

這裏有一個jsfiddle使用CSS3圓在列表中的第一個和最後一個項目的外角 - 如果我明白你正確地完成什麼。

我還要添加的一件事就是將css從元素內聯移動到<樣式>部分，或者更好的是使用css文件。

來源

2012-03-08 20:32:04 kinakuta

太完美了！非常感謝。我仍然試圖得到一個bettle句柄和ID和類。 – RomeNYRR 2012-03-08 22:09:39

必須設置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; 
}

來源

2012-03-08 20:32:02 Alex

px是不是一個有效的值，你需要0px或只是0

而且最好是在這裏li

查找使用類first和last（或類似）爲例
http://jsfiddle.net/WYuNR/

來源

2012-03-08 20:37:51 HerrSerker

帶CSS的水平菜單

回答

相關問題