我试图模仿此菜单的外观，但修复错误。：http://349ghgg83g.weebly.com/
当您将鼠标悬停在“主页”上然后移至“作品集”时，将在“作品集”下方显示一个下划线。但是，当您从“联系人”转到“投资组合”时，不会出现下划线。同样在我的版本中，我不能很好地从“ portfoilo”转到其子项，因为子项将消失。
我没有该页的代码，因为它是Weebly，但是我尝试在此处重现它：
http://jsfiddle.net/247t1aW3b/DnRfR/
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="home.css" type="text/css"/>
</head>
<body id="body1">
<div id="nav-wrap">
<ul id="nav">
<li><a href="/">Home</a></li>
<li>
<a href="#">Portfolio</a>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul><!-- END nav -->
</div><!-- END nav-wrap -->
<div id="content">
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
<p>Home content</p>
</div>
<div id="footer"></div>
</body>
</html>
CSS：
/* a[href="http://www.google.com"] {color: green;} */
html {
min-height: 100%;
}
body {
width: 100%; /*960px;*/
/* padding:100px 0; */
margin:0 auto;
font-family:Calibri, sans-serif;
}
#body1 {
background-image:url('speckle.jpg');
background-repeat:repeat;
}
#content {
width: 90%;
margin-left: 3%;
margin-top: 90px;
margin-bottom: 45px;
}
#nav-wrap {
position: fixed;
top: 10px;
width: 100%;
height: 55px;
/*background: #336699;*/
}
#nav {
/*border:1px solid #ccc;*/
/*border-width:1px 0;*/
list-style:none;
margin: 0 auto 0 auto;
padding:0;
width: 400px;
text-align:center;
}
#nav li {
position:relative;
display:inline;
}
#nav a {
display:inline-block;
/*padding:10px;*/
padding: 8px; /* 8 pixel padding all the way around the anchors */
}
#nav ul {
position:absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px; /* hide the unordered list by moving it off-screen. */
margin:0;
padding:0;
text-align:left;
}
#nav ul li {
display:block;
}
#nav li:hover ul {
left:0px; /* show the sub-items in the unordered list by moving it back under the list */
}
#nav li:hover a { /* highlight the sub-items when you move over them */
/*border-bottom:1px solid grey;*/
/*text-decoration:underline;*/
/*border-bottom-width: thick;*/
/*background:#f1f1f1;*/
}
#nav li:hover ul a {
text-decoration:none;
background:#EEE;
border-bottom:1px solid #aaa;
}
#nav li:hover ul a:hover {
/*text-decoration:underline;*/
border-bottom:1px solid #aaa;
/*background:#f1f1f1;*/
background: #BEBEBE;
}
#nav ul a {
white-space:nowrap;
display:block;
/*border-bottom:3px solid red;*/
}
a {
/*color:#c00;*/
color: black;
text-decoration:none;
/*font-weight:bold;*/
font-weight: normal;
}
a:hover {
/*text-decoration:underline;*/
border-bottom: 3px solid #002EB8;
/*background:#f1f1f1;*/
}
#footer {
visibility: none;
}
最佳答案
您可以使用Firebug或Chrome Javascript控制台检查页面。当您将鼠标悬停在投资组合上时，问题出在下拉菜单中。未悬停时的下拉菜单为：
<div id="wsite-menus">
<div style="position: absolute; left: 203.35px; display: none; top: 166px;" class="wsite-menu-wrap">
</div>
</div>
当您从“主页”悬停到“投资组合”时，“顶部” css属性设置为“ 168px”，但是当您从“联系”悬停到“投资组合”时，“顶部”属性保持在166px。因此，下拉菜单实际上掩盖了下划线，这里的下划线不是问题。
关于css - 带粗划线的css菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14132025/