Question

我正在尝试模仿此菜单的外观，但修正错误：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;    
}

Answer 1

您可以使用Firebug或Chrome Javascript控制台检查页面。当您将鼠标悬停在投资组合上时，问题出在下拉列表中。没有悬停时的下拉菜单是：

<div id="wsite-menus">
    <div style="position: absolute; left: 203.35px; display: none; top: 166px;" class="wsite-menu-wrap">
    </div>
</div>

当您从“Home”悬停到“Portfolio”时，“top”css属性设置为“168px”，但当您从“Contact to”Portfolio“悬停”时，“top”属性将保持在166px。所以下拉菜单实际上掩盖了下划线，下划线不是问题。

带有粗下划线的css菜单

1 个答案: