CSS菜單

我試圖模仿這種菜單的外觀，但修復錯誤：http://349ghgg83g.weebly.com/CSS菜單

當你將鼠標懸停在「首頁」，然後移動到「組合」一個下劃線出現在「組合」正如它應該。但是當你從「聯繫」到「組合」時，下劃線不會出現。同樣在我的版本中，我無法從「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;  
}

來源

2013-01-03 mike

您可以使用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。所以下拉菜單實際上是覆蓋下劃線，下劃線不是這裏的問題。

來源

2013-01-03 02:03:31 SeanLi

好的，謝謝。任何想法如何我可以修復消失的投資組合子項目？ – mike

回答

相關問題