Ryan Ryan - 5 months ago 11
CSS Question

Incorrectly Positioned Third Level in CSS Drop Down Menu

I'm trying to add a third level menu to my WordPress site: www.RyanRay.com. The menu

<LI>
items I'm adding are currently under:


Explorer > Walk Across Europe (2016)


&


Explorer > Walk Across America (2015)


I want the
<UL>
for these new items to be aligned directly to the right of their parent
<LI>
. Currently, they are aligning to the right, but at the top of their parent
<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

You need to remove top: 0 and add a negative margin-top, should do the trick! Top:0 was locking it to the top of the space available.

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