Css如何創建導航欄

我試圖在CSS中做到這一點。試圖製作這個導航欄。任何幫助都會很棒。這是IAM試圖做：Css如何創建導航欄

enter image description here

所以第一張圖上是應該的樣子，當用戶進入該網站。然後，如果他們懸停在任何選項卡上，它應該只是改變顏色。試圖做到這一點的任何幫助都會很好。我試過這個，但不會工作。

HTML：

<div class="horizontal"> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="Register.html">Register</a></li> 
<li><a href="Rules.html">Rules</a></li> 
</ul> 
</div>

只需要看到的CSS將是什麼樣子。再次感謝

編輯我已經爲人們想二看完成：

div.horizontal 
{ 
width:809px; 
height:63px; 
position:relative; 
top: -1046px; 
left: 104px; 
} 
div.horizontal ul 
{ 
list-style-type:none; 
margin:0; 
padding:0; 
} 
div.horizontal li 
{ 
    display: inline-block; 
    margin-left: 5px; 
} 
div.horizontal a 
{ 
display:block; 
width:809px; 
} 
div.horizontal a:link,div.horizontal a:visited 
{ 
font-weight:bold; 
color:#FFFFFF; 
background-color:#000000; 
text-align:center; 
padding:4px; 
text-decoration:none; 
text-transform:uppercase; 
} 
div.horizontal a:hover,div.horizontal a:active 
{ 
background-color:#999999; 
}

就像我說的，這是不對的，但是這是我能做到的ATM。由於

來源

2013-04-02 TheEagle

你有什麼嘗試？我相信Google上有水平CSS菜單有十億個結果。 – Quantastical

一個類似的問題已經被問及答案。 http://stackoverflow.com/questions/11733065/background-color-change-on-ahover –

我已經添加了我所做的。但就像我說的只是試圖使這張照片在頂部 – TheEagle

使用您的HTML，你可以做這樣的事情：

CSS

ul{ 
    list-style:none; 
} 

li{ 
    float:left; 
    width:100px; 
    height:50px; 
    background:black; 
    border:2px solid gray; 
    text-align:center; 
} 

a{ 
    color:white; 
    text-decoration:none; 
    font-size:24px; 
    font-weight:bold; 
    line-height:50px; 
    font-style:italic 
} 

li:hover{ 
    background:gray; 
}

JSFiddle。

只是改變顏色。

來源

2013-04-02 17:52:31 Vucko

完美。非常感謝你的幫助 – TheEagle

@TheEagle歡迎您。 – Vucko

Css如何創建導航欄

回答

相關問題