當我進入html頁面的子菜單時，無法在菜單上保持懸停狀態

我能夠做出一個側面菜單，並顯示了當我在菜單項上滾動時的子菜單。現在我面臨兩個問題 1.當懸停到菜單項時，它顯示子菜單，但當我懸停在子菜單上時，菜單項的懸停狀態消失。我需要它處於懸停狀態。 2.顯示子菜單塊時，它顯示爲透明，我可以看到它後面的內容。但是，我怎麼能使它完全不透明？當我進入html頁面的子菜單時，無法在菜單上保持懸停狀態

我的代碼如下...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>CSS Drop Down Menus</title> 

<style type="text/css"> 
<!-- * { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font-family: "Trebuchet MS", Helvetica, Sans-Serif; 
    font-size: 14px; 
} --> 

a { 
    text-decoration: none; 
    color: #FFFFFF; 
} 

a:hover { 
    color: black; 

} 

#menu { 
    position: relative; 
    width:20%; 
    height:400px; 
    border:1px solid #000; 
} 

#menu a { 
    display: block; 
    width: 140px; 
    background-image:url(menuitemhover.png); 
} 

#menu ul { 
    list-style-type: none; 
    padding-top: 5px; 
} 

#menu li { 
    float: top; 
    position: relative; 
    padding: 3px 0; 
    text-align: center; 
} 

#menu ul.sub-menu { 
    display: none; 
    position: absolute; 
    top: -10px; 
    left: 170px; 
    padding: 10px; 
    z-index: 90; 
} 

#menu ul.sub-menu li { 
    text-align: top; 
} 

#menu li:hover > ul.sub-menu { 
    display: block; 
    border: 1px solid #ececec; 
    background-image:url(menuitemhover.png); 
} 
</style> 

</head> 
<body> 

<div id="menu"> 
    <ul> 
     <li><a href="#">Home</a> 

     <ul class="sub-menu" style="border:1px solid #d14836"}> 
      <li><a href="#">Pages</a></li> 
      <li><a href="#">Archives</a></li> 
      <li><a href="#">New Posts</a></li> 
      <li><a href="#">Recent Comments</a></li> 
     </ul> 

     </li> 

     <li><a href="#">About</a> 

     <ul class="sub-menu" style="border:1px solid #d14836"> 
      <li><a href="#">Get to know us</a></li> 
      <li><a href="#">Find out what we do</a></li> 
     </ul> 

     </li> 

     <li><a href="#">Contact</a> 

     <ul class="sub-menu" style="border:1px solid #d14836"> 
      <li><a href="#">E-mail Us</a></li> 
      <li><a href="#">Use Our Contact Form</a></li> 
     </ul> 

     </li> 
    </ul> 
</div> 

</body> 
</html>

來源

2013-03-11 Surjya Narayana Padhi

如果可能的話，提供一個鏈接到你的網站，以及它更容易調試 – 2013-03-11 06:49:12