css - CSS 下拉菜单中的第三级位置不正确

Question

我正在尝试向我的 WordPress 站点添加三级菜单:www.RyanRay.com。我正在添加的菜单 <LI> 元素目前位于:

Explorer > Walk Across Europe (2016)

&

Explorer > Walk Across America (2015)

我希望这些新元素的 <UL> 直接对齐到它们父级 <LI> 的右侧。目前，它们向右对齐，但位于其父 <UL> 的顶部。

HTML

<div id="nav">
        <div class="wrap">
            <ul id="menu-main-nav" class="main-menu clearfix"><li id="menu-item-454" class="speaker menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-454"><a href="http://www.ryanray.com/speaker/#menu-main-nav">Speaker</a>
<ul class="sub-menu">
    <li id="menu-item-453" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-453"><a href="http://ryanray.com/speaker/a-lifetime-of-searching/#content">About Ryan</a></li>
    <li id="menu-item-387" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-387"><a href="http://ryanray.com/speaker/#menu-main-nav">Invite Ryan to Speak</a></li>
</ul>
</li>
<li id="menu-item-455" class="explorer menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-455"><a href="http://ryanray.com/explorer/#menu-main-nav">Explorer</a>
<ul class="sub-menu">
    <li id="menu-item-388" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-388"><a href="http://ryanray.com/explorer/#menu-main-nav">About</a></li>
    <li id="menu-item-1552" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1552"><a href="http://ryanray.com/explorer/walking-across-europe/#content">Walk Across Europe  (2016)</a>
    <ul class="sub-menu">
        <li id="menu-item-1558" class="sub-sub-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-1558"><a href="http://ryanray.com/explorer/walk-2016/">Overview</a></li>
        <li id="menu-item-1110" class="sub-sub-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-1110"><a href="http://ryanray.com/speaker/#content">Invite Ryan to Speak</a></li>
    </ul>
</li>
    <li id="menu-item-803" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-803"><a href="http://ryanray.com/explorer/walking-across-america/#content">Walk Across USA (2015)</a>
    <ul class="sub-menu">
        <li id="menu-item-1553" class="sub-sub-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-1553"><a href="http://ryanray.com/explorer/walking-across-america/#content">Overview</a></li>
        <li id="menu-item-1342" class="sub-sub-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-1342"><a href="http://ryanray.com/explorer/walking-across-america/keepsake-calendar/">Keepsake Calendar (2016)</a></li>
        <li id="menu-item-1467" class="sub-sub-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-1467"><a href="http://ryanray.com/explorer/walking-across-america/keepsake-postcards/#content">Keepsake Postcards</a></li>
        <li id="menu-item-1133" class="sub-sub-menu menu-item menu-item-type-custom menu-item-object-custom menu-item-1133"><a href="http://ryanray.com/news">In the News</a></li>
    </ul>
</li>
    <li id="menu-item-555" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-555"><a href="http://ryanray.com/explorer/eye-beauty/#photos-videos">Photos &#038; Videos</a></li>
</ul>
</li>
<li id="menu-item-456" class="writer menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-456"><a href="http://ryanray.com/writer/#menu-main-nav">Writer</a>
<ul class="sub-menu">
    <li id="menu-item-389" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-389"><a href="http://ryanray.com/writer/#menu-main-nav">About</a></li>
    <li id="menu-item-461" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-461"><a href="http://ryanray.com/writer/writing-samples/#content">Writing Samples</a></li>
</ul>
</li>
</ul>       </div>
        <div class="left-bg"></div>
        <div class="right-bg"></div>
    </div>

CSS

/*** Nav ***/
#nav{
    position: relative;
    height: 207px;
    top: -14px;
    z-index:900;
}
.left-bg,
.right-bg{
    position: absolute;
    width: 50%;
    height: 207px;
    top: 0;
}
.left-bg{
    left:0;
    background: url(images/sprite-nav.png) repeat-x 0 0;
}
.right-bg{
    right: 0;
    background: url(images/home-right-bg.png) repeat-x;
}
.main-menu{
    position: relative;
    z-index:1;
    padding-top: 14px;
}
.main-menu a{
    display: block;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}
.main-menu > li{
    float: left;
    position:relative;
}
.main-menu > li > a{
    text-indent:-99999px;
    font-size: 0;
    line-height: 0;
}
.main-menu li.speaker > a{
    width: 310px;
    height: 163px;
    background: url(images/speaker.png) no-repeat 41px 18px;
}
.main-menu li.explorer > a{
    width: 340px;
    height: 163px;
    background:#314190 url(images/explorer.png) no-repeat center 54px;
}
.main-menu li.writer > a{
    width: 310px;
    height: 163px;
    background: url(images/writer.png) no-repeat 32px 48px;
}
div.speaker .left-bg,
div.speaker .right-bg{
    background: url(images/sprite-nav.png) repeat-x 0 0;
}
div.speaker .main-menu li.explorer a,
div.speaker .main-menu li.writer a{
    background-color: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
    opacity: .15;
}
div.explorer .left-bg,
div.explorer .right-bg{
    background: url(images/sprite-nav.png) repeat-x 0 -207px;
}
div.explorer .main-menu li.speaker a,
div.explorer .main-menu li.writer a{
    background-color: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
    opacity: .15;
}
div.writer .left-bg,
div.writer .right-bg{
    background: url(images/sprite-nav.png) repeat-x 0 -414px;
}
div.writer .main-menu li.speaker a,
div.writer .main-menu li.explorer a{
    background-color: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
    filter: alpha(opacity=15);
    opacity: .15;
}

/*** Second Level Menu ***/
.main-menu > li > ul{
    font-size: 25px;
    color: #fff;
    font-style: italic;
    position:absolute;
    right: 0;
    top: 100%;
    background:#6689c5 url(images/shadower.png) repeat-x;
    width: 300px;
    box-shadow:  3px 3px 7px 0px rgba(0, 0, 0, 0.36);
    display: none;
}

.sub-menu a{
    padding: 14px 18px 15px;
}
.main-menu li:hover > ul{
    display: block;
    position: absolute;
}
.sub-menu a:hover{
    background: #4d77bb;
}
.sub-menu li:first-child a:hover{
    background:#4d77bb url(images/shadower.png) repeat-x;
}
li.explorer .sub-menu{
    right: auto;
    background:#6d78ad url(images/shadower.png) repeat-x;
}
li.explorer .sub-menu a:hover{
    background: #314190;
}
li.explorer .sub-menu li:first-child a:hover{
    background:#314190 url(images/shadower.png) repeat-x;
}
li.writer .sub-menu{
    right: auto;
    left:0;
    background:#83c7c6 url(images/shadower.png) repeat-x;
}
li.writer .sub-menu a:hover{
    background: #32b9b7;
}
li.writer .sub-menu li:first-child a:hover{
    background:#32b9b7 url(images/shadower.png) repeat-x;
}

/*** Third Level Menu ***/
.main-menu > li > ul li > ul{
    font-size: 18px;
    color: #fff;
    font-style: italic;
    right: 0;
    top: 0;
    background:#6689c5 url(images/shadower.png) repeat-x;
    display: none;
    position: absolute;
    left: 100%;
    white-space: nowrap;
}

.sub-sub-menu a{
    padding: 4px 40px 4px;
}

.main-menu li li:hover {
    background:#314190;
    display: block;

}

.sub-sub-menu a:hover{
    background: #4d77bb;
}
.sub-sub-menu li:first-child a:hover{
    background:#4d77bb url(images/shadower.png) repeat-x;
}
li.explorer .sub-sub-menu{
    right: auto;
    left:0px;
    background:#6d78ad repeat-x;
}
li.explorer .sub-sub-menu a:hover{
    background: #314190;
}
li.explorer .sub-sub-menu li:first-child a:hover{
    background:#314190 url(images/shadower.png) repeat-x;
}
li.writer .sub-sub-menu{
    right: auto;
    left:0;
    background:#83c7c6 url(images/shadower.png) repeat-x;
}
li.writer .sub-sub-menu a:hover{
    background: #32b9b7;
}
li.writer .sub-sub-menu li:first-child a:hover{
    background:#32b9b7 url(images/shadower.png) repeat-x;
}

Answer 1

您需要删除 top: 0 并添加一个负边距顶部，应该可以解决问题! Top:0 将其锁定到可用空间的顶部。

/*** Third Level Menu ***/
.main-menu > li > ul li > ul{
    font-size: 18px;
    color: #fff;
    font-style: italic;
    right: 0;
    margin-top: calc(-29px - 1.55em) /* Negative your list item padding - font size*/
    background:#6689c5 url(images/shadower.png) repeat-x;
    display: none;
    position: absolute;
    left: 100%;
    white-space: nowrap;
}