html - 无法访问子菜单

Question

我试图在菜单和子菜单之间创建一个间隙，但目前还没有成功。当我按下子菜单时，它变得无法访问。另一件事是我不想向下推内容，只是子菜单。

http://jsfiddle.net/zilli/DBpTX/3/

HTML:

<nav class="site-navigation" role="navigation">
    <ul class="menu">
        <li class="menu-item"><a href="http://wpthemetestdata.wordpress.com/">Home</a>
        </li>
        <li class="menu-item"><a href="http://wp.dev/blog/">Blog</a>
        </li>
        <li class="menu-item"><a href="http://wp.dev/about/">About The Tests</a>

            <ul class="sub-menu">
                <li class="menu-item "><a href="http://wp.dev/about/page-image-alignment/">Page Image Alignment</a>
                </li>
                <li class="menu-item "><a href="http://wp.dev/about/page-markup-and-formatting/">Page Markup And Formatting</a>
                </li>
                <li class="menu-item "><a href="http://wp.dev/about/clearing-floats/">Clearing Floats</a>
                </li>
                <li class="menu-item current-menu-item"><a href="http://wp.dev/about/page-with-comments/">Page with comments</a>
                </li>
                <li class="menu-item"><a href="http://wp.dev/about/page-with-comments-disabled/">Page with comments disabled</a>
                </li>
            </ul>
        </li>
        <li class="menu-item menu-parent-item"><a href="http://wp.dev/level-1/">Level 1</a>

            <ul class="sub-menu">
                <li class="menu-item menu-parent-item"><a href="http://wp.dev/level-1/level-2/">Level 2</a>

                    <ul class="sub-menu">
                        <li class="menu-item"><a href="http://wp.dev/level-1/level-2/level-3/">Level 3</a>
                        </li>
                        <li class="menu-item"><a href="http://wp.dev/level-1/level-2/level-3a/">Level 3a</a>
                        </li>
                        <li class="menu-item"><a href="http://wp.dev/level-1/level-2/level-3b/">Level 3b</a>
                        </li>
                    </ul>
                </li>
                <li class="menu-item"><a href="http://wp.dev/level-1/level-2a/">Level 2a</a>
                </li>
                <li class="menu-item"><a href="http://wp.dev/level-1/level-2b/">Level 2b</a>
                </li>
            </ul>
        </li>
        <li class="menu-item"><a href="http://wp.dev/lorem-ipsum/">Lorem Ipsum</a>
        </li>
    </ul>
</nav>

CSS:

.site-navigation {
    text-align: left;
    float: right;
    margin: 0;
    background: #eee;
}
.site-navigation .menu {
    font-family:'PT Sans', Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.5;
}
.site-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-navigation ul > li {
    float: left;
    position: relative;
    margin: 0 0 0 2rem;
}
.site-navigation li > a {
    padding:0;
    /* Padding around each top level menu option (if needed) */
}
.site-navigation .sub-menu > li {
    margin: 0;
    padding: 0 0 5px 0;
}
.site-navigation a {
    display: block;
    text-decoration: none;
    color: #333;
    /* Nav bar link color */
}
.site-navigation .sub-menu a {
    padding: 0 5px;
    /* Padding around each dropdown menu option */
    font-size: 1rem;
}
.site-navigation .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    z-index: 99999;
    background-color: #333;
    /* Nav bar dropdown background color */
    -webkit-box-shadow:2px 2px 5px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.site-navigation .sub-menu ul {
    left: 100%;
    top: 0;
}
.site-navigation .sub-menu a {
    color: #fff;
    /* Nav bar dropdown link color */
    width: 11rem;
    /* Nav bar dropdown width */
}
.site-navigation .sub-menu :hover > a {
    color: #333;
    /* Nav bar dropdown level 2 link color on level 3 hover */
    background-color: #fafafa;
    /* Nav bar dropdown link background color on hover */
}
.site-navigation li ul {
    margin-top: 20px;
    position: relative;
}
.site-navigation ul li:hover > ul {
    display: block;
}
.site-navigation ul li.dropdown-header a, .site-navigation ul li.current-menu-item ul .dropdown-header a {
    color: #aaa;
    /* Nav bar dropdown header color */
    background-color: #333;
    /* Nav bar dropdown header background color */
}

Answer 1

将背景设置为 li 而不是 ul 并添加 padding-top:

.site-navigation .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    z-index: 99999;
    padding-top: 20px;
}
.site-navigation .sub-menu li {
    background-color: #333;
    /* Nav bar dropdown background color */
    -webkit-box-shadow:2px 2px 5px 0px rgba(0, 0, 0, 0.6);
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.6);
}

updated Fiddle