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

가능하면 디버그하기 쉽고 웹 사이트에 대한 링크를 제공하십시오. –