CSS：UL導航 - 關於懸停，背景顏色錯誤

懸停時，背景顏色似乎超出了作爲我的導航項目的「框」。我曾嘗試調整一切。這裏是我的CSS和HTML ...CSS：UL導航 - 關於懸停，背景顏色錯誤

<div id="menuTop"> 

<ul id="menuOne" class="menuHoriz"> 
    <li><a href="index.html">home</a></li> 
    <li><a href="communication.html">about us</a></li> 
    <li><a href="about.html">services</a></li> 
    <li><a href="help.html">samples</a></li> 
    <li><a href="contact.html">contact</a></li> 
</ul> 

</div> 

#menuTop { 
clear: both; 
padding-top: 18px; 
height: 55px; 
font-size: 12pt; 
background-color: #000; 
} 

#menuTop ul, #menuTop li { 
margin: 0; 
padding: 4px 0 0 0; 
} 

#menuTop ul { 
list-style-type: none; 
} 

#menuTop li { 
display: block; 
background-color: #3C87D1; 
text-align: center; 
width: 197px; 
height: 30px; 
margin: 0 0px 0 0; 
padding: 4px 0 0 0; 
border: 1px solid #2A5E92; 
} 

#menuTop a { 
display: block; 
margin: 0; 
padding: 4px 0 0 0; 
} 

#menuTop a:link, #menuTop a:visited { 
width: 197px; 
height: 30px; 
padding: 4px 0 0 0; 
margin: 0; 
font-family: 'Trebuchet MS', Helvetica, sans-serif; 
color: #fff; 
text-decoration: none; 
} 

#menuTop a:hover { 
width: 197px; 
height: 30px; 
padding: 4px 0 0 0; 
margin: 0; 
color: #fff; 
background-color: #5F9FFF; 
} 

ul.menuHoriz li { 
float: left; 
}

來源

2011-05-26 Katelyn

我從樣式表中刪除了不需要的/雙重定義，並修復了這個錯誤。

* { 
    margin: 0; 
    padding: 0 
} 
#menuTop { 
    font: 12pt 'Trebuchet MS', Helvetica, sans-serif; 
    padding-top: 18px; 
    height: 55px; 
    background: #000 
} 
#menuTop ul { 
    padding-top: 4px; 
    list-style: none 
} 
#menuTop li { 
    background: #3C87D1; 
    border: 1px solid #2A5E92; 
    text-align: center 
} 
#menuTop a { 
    display: block; 
    width: 197px; 
    line-height: 30px 
} 
#menuTop a:link, #menuTop a:visited { 
    color: #fff; 
    text-decoration: none 
} 
#menuTop a:hover { 
    background-color: #5F9FFF 
} 
ul.menuHoriz li { 
    float: left 
}

這裏有一些注意事項：

這是方便使用*，設計佈局前設置所有元素爲零margin和padding。
僅將菜單項的寬度和高度設置爲a元素（最嵌套的元素）。周圍的li元素將採用相同的大小。同時使用line-height而不是height，因爲它會自動使您的文本垂直居中。
不要在:link,:visited,:hover或:active（例如尺寸和字體）中重新定義樣式。它給瀏覽器帶來了不必要的計算。

來源

2011-05-26 21:28:06 Midas

謝謝大家..這對我工作:)太棒了！感謝指針。 – Katelyn 2011-05-27 18:27:11

邁達斯你能告訴我如何從現在開始添加容器嗎？它現在被推到頂部，我試圖向容器中添加填充以將其向下移動約10px左右，並且它最終將我的標題與我的邊界分開。 – Katelyn 2011-05-27 18:34:24

你是什麼意思'將我的標題與我的邊界分開'？ – Midas 2011-05-27 21:01:49

如果你的問題是隻箱子外面傳來的顏色，添加到您的#menuTop李

overflow:hidden;

爲我工作。 :)

來源

2011-05-26 21:18:00 Joe

這遠遠比我更容易提出。這是一個演示：http://jsfiddle.net/LN26d/ – thirtydot 2011-05-26 21:19:35

試試這個：jsfiddle example

#menuTop { 
    clear: both; 
    padding-top: 18px; 
    height: 55px; 
    font-size: 12pt; 
    background-color: #000; 
    text-align: center; 
    font-family: 'Trebuchet MS', Helvetica, sans-serif; 
    line-height: 34px;  
} 
#menuTop a { 
    float: left; 
    border: 1px solid #2A5E92; 
    background-color: #3C87D1; 
    width: 197px; 
    color: #fff; 
    text-decoration: none; 
} 
#menuTop a:hover { 
    background-color: #5F9FFF; 
}

來源

2011-05-26 21:33:56 NGLN

CSS：UL導航 - 關於懸停，背景顏色錯誤

回答

相關問題