Question

我准备了导航栏的小提琴：

目前，悬停的底部边界比活动状态窄，我看不出如何修复它，并想知道这里的大师是否可以提供一些帮助？

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

当您将悬停项目的绿线应用于a时，您当前正在将活动项目的白线应用于li。因为你的李有填充，a与他的父母没有相同，因此底部边界不是那么宽。有几个解决方案：

将边框底部的悬停效果应用于li。请注意，您必须在不同的选择器中应用文本的颜色，因为li的悬停不会触发它，因为a不会从父母那里获得颜色。
从li左侧和右侧移除填充，以使嵌套的a具有相同的宽度。请注意，这是最佳解决方案，否则您将在li的边缘处具有悬停效果，其中单击将不会触发链接。同样大的链接更好，绝对是平板电脑和东西。此外，您还必须将活动状态边界设置为a。我更新了你的小提琴以证明我的意思：http://jsfiddle.net/88r9G/8/

至于效果，我真的不明白你的意思。也许你可以试着展示一些东西，或者确实发布一个新的问题并附上详细的解释......

Answer 2

我删除了很多我认为不必要的样式 - 请参阅updated JSFiddle here。特别值得注意的是：

所有填充/边距现在都在一个元素上。
我们正在更改悬停时li元素的边框，而不是a元素。

至于动画，如果您只是为现代浏览器开发，我会研究CSS3动画和转换，否则JavaScript动画可能是您最好的选择。

Answer 3

我将li和a作为具有绿色和蓝色背景的块元素。每个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;
}

希望它有所帮助！

我的导航栏的CSS帮助

4 个答案: