Html 我的导航栏的CSS帮助_Html_Css_Menu

Html 我的导航栏的CSS帮助

html css menu

Html 我的导航栏的CSS帮助,html,css,menu,Html,Css,Menu,我准备了一把我的导航条小提琴：目前，悬停底部边界比活动状态窄，我看不出如何修复它，我想知道这里的专家是否可以提供一些帮助 HTML  <div class="wpbook_header"> <div id="underlinemenu" class="clearfix"> <ul> <li c

我准备了一把我的导航条小提琴：

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

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>

此外，如果有人能就如何将其转换为熔岩灯样式菜单（底部边框在悬停元素下设置动画）提供建议，那将是令人惊讶的，但如果没有，我可以将其保存到以后的问题中。

我已经删除了许多我认为不必要的样式-请参阅。特别值得注意的是：

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

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

我已经删除了许多我认为不必要的样式-请参阅。特别值得注意的是：

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

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

您当前正在将活动项的白线应用于li，而将悬停项的绿线应用于a。因为你的li中有填充物，所以a和他的父母不一样，所以底部边界没有那么宽。有几种解决方案：

将边框底部的悬停效果应用于
```
li
```
。请注意，您必须在另一个选择器中应用文本的颜色，因为它不会被
```
li
```
的悬停触发，因为
```
a
```
不会从父项中继承颜色
从
```
li
```
中删除左右填充，使嵌套的
```
a
```
具有相同的宽度。请注意，这是最好的解决方案，否则您将在
```
li
```
的边缘产生悬停效果，单击不会触发链接。大链接也更好，尤其是在平板电脑和其他东西上。此外，还必须将活动状态边界设置为
```
a
```
。我更新了你的小提琴来证明我的意思：

至于效果，我真的不明白你在追求什么。也许您可以尝试演示一些东西，或者确实发布一个新问题，并给出详细解释……

将边框底部的悬停效果应用于
```
li
```
。请注意，您必须在另一个选择器中应用文本的颜色，因为它不会被
```
li
```
的悬停触发，因为
```
a
```
不会从父项中继承颜色
从
```
li
```
中删除左右填充，使嵌套的
```
a
```
具有相同的宽度。请注意，这是最好的解决方案，否则您将在
```
li
```
的边缘产生悬停效果，单击不会触发链接。大链接也更好，尤其是在平板电脑和其他东西上。此外，还必须将活动状态边界设置为
```
a
```
。我更新了你的小提琴来证明我的意思：

至于效果，我真的不明白你在追求什么。也许你可以试着演示一些东西，或者确实可以发布一个新的问题，并给出详细的解释…

我将

li

和

作为绿色和蓝色背景的块元素。每个

li

元素占用的面积等于根据

元素占用的面积。但当我们悬停时，我们会改变

元素的高度
作为变体（请参见演示：）：
我制作了li
和a
作为绿色和蓝色背景的块元素。每个li
元素占用的面积等于根据a
元素占用的面积。但当我们悬停时，我们会改变元素的高度
作为变体（请参见演示：）：
使用Css选择器的简单答案：
#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

希望有帮助
 使用Css选择器简单回答：
#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

希望有帮助
 +1-从li
中删除填充的调用很好。我会把它放在a
上，不过你需要在a
上使用display:block
或类似的工具来让填充在内联元素上生效。我确实忘了提到这一点，尽管我是在小提琴上做的。谢谢投票+1-从li
中删除填充的调用很好。我会把它放在a
上，不过你需要在a
上使用display:block或类似的工具来让填充在内联元素上生效。我确实忘了提到这一点，尽管我是在小提琴上做的。谢谢投票！啊，问题是我把菜单的总宽度从原来的小提琴上去掉了——我去掉了不必要的杂乱，把注意力集中在手头的问题上。听起来您在Firefox中设置的JSFIDLE输出窗口与Chrome不同；我不认为这是浏览器不一致的问题。啊，问题是我从原来的小提琴上删除了菜单的整体宽度——我删除了不必要的杂乱内容，以便专注于手头的问题。听起来您在Firefox中设置的JSFIDLE输出窗口与Chrome不同；我不认为这是浏览器不一致。
#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}