0

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

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 */
}
4

3 回答 3

3

将背景设置为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);
}

更新的小提琴

于 2013-10-14T07:45:58.460 回答
0

这是一个快速修复：

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

但是你真的应该重新设计菜单。我建议您在 .sub-menu 中添加一个 padding-top，但因此您必须将背景颜色移动到（例如）子菜单包装器上，以便保持视觉差距。

于 2013-10-14T07:40:53.807 回答
0

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

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;
}
于 2013-10-14T07:43:37.950 回答