html - CSS:无法访问下拉菜单

Question

我正在尝试制作一个下拉导航栏，但我总是遇到无法访问下拉菜单的问题。菜单本身会显示正常，当我想访问下拉菜单时出现问题:一旦我将光标从取消隐藏下拉列表的按钮上移开，下拉列表本身就会消失。

http://codepen.io/anon/pen/bNGqvp

CSS:

#navigation li {
  display:          inline;
}

/*navigation text*/
.nav a
{
    display: inline-block;
    padding: 0 20px;
    background:#383838;
    border-radius: 2em;
    border: 1px solid #272727;
    color:#C4B09C;
    text-decoration:none;
    font: bold 12px Arial;
    line-height: 27px;
    margin-right:1 px;
    position: relative;
    left: 250px;
    top: 7px; 
}


/*naviagation menu*/
.nav  {
    background: #333; 
    background: -moz-linear-gradient(#383838, #272727);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#383838), to(#272727)); 
    background: -webkit-linear-gradient(#383838, #272727);
    border-bottom: 1px solid #222;
}




/*menu hover*/
.nav li >ul {display : none;}

.nav li:hover > ul  {
    display: block;
    position: absolute;
    padding-top: 20px;
    margin-left: 20%;
}

HTML:

   <div class="nav">
        <ul id="navigation">
            <li><a href="../index.html">Home</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="#">Media</a>
                <ul>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="video.html">Video</a></li>
                </ul>
            </li>
            <li><a href="#">About Me</a>
                <ul>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="contact.html">Contact</a></li>
                </ul>
            </li>
            <li><a href="honesty.html">Honesty</a></li>
        </ul>
    </div>

Answer 1

您需要做的就是将 width: 100% 添加到 .nav :hover。这样，当您点击子导航项时，从技术上讲，您仍然悬停在导航栏上。

这是久经考验的 - 例如这里:

http://codepen.io/anon/pen/VYwpdN