導航欄的CSS幫助

Question

我已經准備好了我的導航欄小提琴：

http://jsfiddle.net/88r9G/

目前，懸停底部邊界比活動狀態窄，我看不到如何解決它，並且想知道這里的專家是否可以提供幫助？

HTML

<!-- Forgive the messy markup - wordpress output -->
<div class="wpbook_header">
    <div id="underlinemenu" class="clearfix">
       <ul>
           <li class="page_item page-item-67 current_page_item"><a id="load-home-page" href="#">Home</a></li>
           <li class="page_item page-item-69"><a id="load-blog-list" href="#">The Blogs</a></li>
           <li class="page_item page-item-60"><a id="load-authors-page" href="#">Meet the Bloggers</a></li>
           <li class="page_item page-item-2"><a id="load-gallery" href="#">Gallery</a></li>
           <li class="page_item page-item-271"><a id="load-faqs" href="#">FAQs</a></li>
           <li class="page_item page-item-168"><a id="load-compform" href="#">Competition</a></li>                        
       </ul>
   </div>
</div>​

CSS

#underlinemenu {
    font-family: arial, helvetica;
    padding: 0;
    margin: 0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul {
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -1px 0 -30px 0;
}

#underlinemenu ul li {
    display: inline;
    float: left;
    color: white;
    padding: 21px 30px 0px 8px;
}

.current_page_item {
    color: white;
    padding: 21px 10px 15px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 5px solid white;
}

#underlinemenu ul li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

另外，如果有人可以提出建議，如何將其轉換為熔岩燈樣式菜單（底部邊框的動畫位於懸停的元素下方），那將是驚人的，但如果沒有，我可以將其保存以備后用。

Answer 1

您當前正在將活動項的白線應用於li，而您正在將懸停項的綠線應用於a。 因為您的li中有填充，所以a與他的父母沒有相同，因此底部邊框沒有那么寬。 有幾種解決方案：

• 申請邊框底部到懸停效果li 。 請注意，您將不得不申請文本的顏色在不同的選擇，因為它不會受到的懸停觸發li作為a從那里父不inhereit顏色。
• 從li刪除左右兩側的填充，以使嵌套的a具有相同的寬度。 請注意，這是imo的最佳解決方案，否則將在li的邊緣產生懸停效果，單擊不會觸發鏈接。 大型鏈接也更好，確切地說是在平板電腦和其他產品上。 另外，您還必須將活動狀態邊框設置為a 。 我更新了您的小提琴以演示我的意思： http : //jsfiddle.net/88r9G/8/

至於效果，我不太了解你的追求。 也許您可以嘗試演示一些東西，或者確實發布帶有詳細說明的新問題...

Answer 2

我刪除了很多我認為不必要的樣式-請在此處查看更新的JSFiddle 。 特別注意：

• 現在所有的填充/邊距都在一個元素上。
• 我們在懸停時更改li元素上的邊框，而不是a元素。

至於動畫，如果您只是為現代瀏覽器開發的話，我會研究CSS3動畫和轉換，否則JavaScript動畫可能是最好的選擇。

Answer 3

我用綠色和藍色背景制作了li和a as塊元素。 每個區域li元件需要的是等於區域根據其a元件采取。 但是，當我們再徘徊，我們改變的高度a元。

作為變體（請參見DEMO： http : //jsfiddle.net/88r9G/7/ ）：

#underlinemenu {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#underlinemenu ul {
    width: 770px;
    height: 57px;
}

#underlinemenu ul li {
    display: block;
    float: left;
    height: 57px;
    background-color: #408261;
}

#underlinemenu .current_page_item {
    background-color: white;
}

#underlinemenu .current_page_item a {
    height: 52px;
}

#underlinemenu ul li a {
    display: block;
    height: 57px;
    padding: 0px 10px 0px 10px;
    color: white;
    background-color: #242129;

}

#underlinemenu ul li a:hover {
    height: 52px;
    color: #408261;
}
​

Answer 4

使用CSS選擇器的簡單答案：

#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

希望能幫助到你！