css3 하위 메뉴의 하위 메뉴 하위 메뉴로 이동

Question

css3 메뉴의 샘플을 사용하고 있습니다. 내 문제는 하위 메뉴의 하위 메뉴이며 상위 메뉴로 이동 한 후 쉽게 이동할 수 없습니다.

CSS3 :

body { 
    font: 0.8em/1.5em Arial, Helvetica, sans-serif; 
    background: none repeat scroll 0% 0% rgb(235, 235, 235); 
    width: 900px; 
    margin: 100px auto; 
    color: rgb(102, 102, 102); 
} 
a { 
    color: rgb(51, 51, 51); 
} 
#nav { 
    margin: 0px; 
    padding: 7px 6px 0px; 
    background: url('gradient.png') repeat-x scroll 0px -110px rgb(125, 125, 125); 
    line-height: 100%; 
    border-radius: 2em 2em 2em 2em; 
} 
#nav li { 
    margin: 0px 5px; 
    padding: 0px 0px 8px; 
    float: left; 
    position: relative; 
    list-style: none outside none; 
} 
#nav a { 
    font-weight: bold; 
    color: rgb(231, 229, 229); 
    text-decoration: none; 
    display: block; 
    padding: 8px 20px; 
    margin: 0px; 
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3); 
} 
#nav a:hover { 
    background: none repeat scroll 0% 0% rgb(0, 0, 0); 
    color: rgb(255, 255, 255); 
} 
#nav .current a, #nav li:hover > a { 
    background: url('gradient.png') repeat-x scroll 0px -40px rgb(102, 102, 102); 
    color: rgb(68, 68, 68); 
    border-top: 1px solid rgb(248, 248, 248); 
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); 
    text-shadow: 0px 1px 0px rgb(255, 255, 255); 
} 
#nav ul li:hover a, #nav li:hover li a { 
    background: none repeat scroll 0% 0% transparent; 
    border: medium none; 
    color: rgb(102, 102, 102); 
} 
#nav ul a:hover { 
    background: url('gradient.png') repeat-x scroll 0px -100px rgb(0, 120, 255) ! important; 
    color: rgb(255, 255, 255) ! important; 
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1); 
} 
#nav li:hover > ul { 
    display: block; 
} 
#nav ul { 
    display: none; 
    margin: 0px; 
    padding: 0px; 
    width: 185px; 
    position: absolute; 
    top: 35px; 
    left: 0px; 
    background: url('gradient.png') repeat-x scroll 0px 0px rgb(221, 221, 221); 
    border: 1px solid rgb(180, 180, 180); 
    border-radius: 10px 10px 10px 10px; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); 
} 
#nav ul li { 
    float: none; 
    margin: 0px; 
    padding: 0px; 
} 
#nav ul a { 
    font-weight: normal; 
    text-shadow: 0px 1px 0px rgb(255, 255, 255); 
} 
#nav ul ul { 
    left: 181px; 
    top: 23px; 
} 
#nav ul li:first-child > a { 
} 
#nav ul li:last-child > a { 
} 
#nav:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0px; 
} 
#nav { 
    display: inline-block; 
} 
html[xmlns] #nav { 
    display: block; 
} 

HTML :

코드를 아래이이 jsfiddle.demo에 submited됩니다

<ul id="nav"> 
    <li><a href="http://www.ndesign-studio.com/">My Projects</a> 
     <ul> 
      <li><a href="http://www.ndesign-studio.com/">N.Design Studio</a> 
       <ul> 
        <li><a href="http://www.ndesign-studio.com/portfolio">Portfolio</a></li> 
        <li><a href="http://www.ndesign-studio.com/wp-themes">WordPress Themes</a></li> 
        <li><a href="http://www.ndesign-studio.com/wallpapers">Wallpapers</a></li> 
        <li><a href="http://www.ndesign-studio.com/tutorials">Illustrator Tutorials</a></li> 
       </ul> 
      </li> 
      <li><a href="http://www.webdesignerwall.com/">Web Designer Wall</a> 
       <ul> 
        <li><a href="http://jobs.webdesignerwall.com/">Design Job Wall</a></li> 
       </ul> 
      </li> 
      <li><a href="http://icondock.com/">IconDock</a></li> 
      <li><a href="http://bestwebgallery.com/">Best Web Gallery</a></li> 
     </ul> 
    </li> 
</ul> 

, 어떻게 부모 JSFIDDLE

Answer 1

문제 등 AZ 하위 메뉴의 하위 메뉴 꾸짖다 될 수있는 하위 메뉴가 마우스로 가리켜 표시된다는 것입니다. 왼쪽에서 오른쪽으로 23px를 표시하도록 그랜드 하위 메뉴를 설정 했으므로 마우스를 오른쪽으로 이동하면 더 이상 마우스를 가져 가지 않으므로 메뉴가 사라집니다.

수정하려면 그랜드 자식 메뉴를 하위 메뉴와 수직으로 정렬해야합니다. 그러면 그랜드 자식이 마우스를 가져 오기 전에 마우스를 놓을 수 있습니다.

#nav ul ul { 
    left: 181px; 
    top: 0; 
} 

이

http://jsfiddle.net/CZLuq/1/