Question

我正在尝试在菜单和子菜单之间创建一个间隙但到目前为止还没有达成协议。当我按下子菜单时，同样变得无法访问。另一件事是我不想把内容推下来，只是子菜单。

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并添加填充顶部：

.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

Answer 2

这是一个快速修复：

.site-navigation .menu > li > a {
    margin-bottom: 20px;
    padding-bottom: 20px;
}

但是你应该重新修改菜单。我建议你在.sub菜单中添加一个填充顶部，但是你必须将背景颜色移动到（例如）子菜单包装上，这样才能保持视觉差距。

Answer 3

我认为此链接可能会有所帮助。

jsfiddle

HTML

<div style="display:inline-block" id="menu1outer">
<a href=""><div class="menus">Menu 1</div></a>
<a href=""><div id="submenus1" class="submenus">Sub 1</div><a/>
<a href=""><div id="submenus1" class="submenus">Sub 2</div><a/>
<a href=""><div id="submenus1" class="submenus">Sub 3</div><a/>
</div>

<div style="margin-left:50px;display:inline-block" id="menu2outer">
<a href=""><div class="menus">Menu 2</div></a>
<a href=""><div id="submenus2" class="submenus">Sub 1</div><a/>
<a href=""><div id="submenus2" class="submenus">Sub 2</div><a/>
<a href=""><div id="submenus2" class="submenus">Sub 3</div><a/>
</div>

<强> CSS

.menus {
    width:100px;
    height:50px;
    border: 5px solid #000000;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
}
.submenus {
    margin-top:10px;
    display:none;
    width:100px;
    height:50px;
    border: 5px solid #000000;
    border-radius: 25px;
    text-align: center;
    line-height: 50px;
    color: black;
}
#menu1outer:hover #submenus1 {
    display: block;
}
#menu2outer:hover #submenus2 {
    display: block;
}

无法到达子菜单

3 个答案: