如何使子菜单出现在主菜单下方

Question

菜单

注意：您可能需要展开结果框

上面是我要解决的问题，想法是，当您将Men＆Women <li>元素悬停时，下面会出现一个子菜单，这就是为什么隐藏的div位于<li>内部的原因，因为当您离开链接时，进入div不会消失。 但是我的问题是其他菜单项被下推了。

现在，在我工作之前，这就是我所拥有的

旧版本

但是我被要求将前3个链接推到左侧，将最后一个链接推到右侧。 我所做的就是添加花车，这似乎是原因。 我尝试更改显示属性，尝试更改位置属性，但是我得到的唯一其他结果是，子菜单设置在末尾而不是在菜单下。

除了获取x和y坐标并使用css强制div放置在那里，我几乎没有想法了，但是除非它在<li>之外，否则我认为它不会起作用，我还能做什么？让我的子菜单正常工作，同时保持菜单对齐

Answer 1

这是您想要达到的结果吗？ 我已经在末尾添加了CSS，为了浮动“购物车”条目，我向购物车<li>元素添加了一个ID（ cart ）。

的jsfiddle

这是一个片段。

 .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; /* ie 6/7 */ } /* Actual CSS */ #copyright { text-align: center; margin: 0px auto; font-size: 10px; } #container { width: 930px; margin: 0px auto; } #navbar { border-top: 1px solid #686868; border-bottom: 1px solid #686868; /*padding: 5px;*/ } /* Hero Footer List */ #herofooter ul li a { padding: 1em 2.5em; text-decoration: none; float: left; text-align: center; } #byline { background: #7D787D; text-align: center; color: white; margin-top: 12px; margin-bottom: 12px; padding: 5px; } #herofooter ul li a { background-repeat: no-repeat; /*background-position:0.2em;*/ background-position: left center; } .shipping a { /* width: 200px; */ } #herocontainer { clear: both; margin: 0; padding: 0; padding-bottom: 10px; border-top: 1px solid #686868; border-bottom: 1px solid #686868; } .contactus a { background-image: url('/Pics/13901.png'); } .store a { background-image: url('/Pics/13895.png'); } .shipping a { background-image: url('/Pics/13905.png'); } .returns a { background-image: url('/Pics/13909.png'); } .store a { padding-left: 27px !important; } .shipping a { padding-left: 47px !important; } .secure a { background-image: url('/Pics/NortonVerisign-sml.png'); padding-left: 75px !important; padding-top: .2em !important; } .loyaltyprogram a { background-image: url('/Pics/LoyaltyProgramIcon.png'); padding-left: 23px !important; padding-top: .2em !important; } #herofooter ul li a:hover, #footernav li a:hover { /* background-color: #efefef;*/ color: #341414; } #herofooter ul li a, #footernav a { color: #686868; } /* Footer extra buttons */ #footermenu { width: 800px; text-align: center; margin: 0px auto; } #footernav li { font-size: 12px; } #footernav li a { padding: 0.1em 2.5em; text-decoration: none; } /* Font replacements */ #headernav { font-family: 'Oswald', 'Verdana'; font-size: 20px; } #logotext { font-family: 'Raleway', Verdana; font-weight: 800; font-size: 88px; color: #000; } #search { font-family: 'Oswald', Verdana; font-weight: 400; font-size: 18px; color: #000; } #herofooter { font-family: 'Raleway', Arial; font-size: 14px; font-weight: 500; } #copyright { font-family: 'Raleway'; font-size: 10px; font-weight: 300; } #byline { font-family: 'Playfair Display', 'verdana'; font-weight: 400; font-size: 24px; } #herofooter ul li a { color #000 !important; } /* Hovers and animations */ #headernav a { transition: background-color .25s ease; -webkit-transition: background-color .25s ease; -moz-transition: background-color .25s ease; -o-transition: background-color .25s ease; } #headernav a:hover { color: #CC3333; color: #FFFFFF; } /* Sale, logo colour */ #headernav a { color: #000000; } a#sale, #logo { color: #CC0001; } #logo a img { border: 0; } /* Search */ #search { width: 185px; text-align: center; margin-right: 25px; display: block; float: right; margin-top: 15px; } #stylesearch { border: 1px solid black; padding: 0; margin: 0; width: 190px; padding-top: 2px; line-height: 22px; } #productsearch { padding-left: 5px; padding-right: 5px; } #searchbox { border: 0; border-right: 1px solid #686868; margin-right: 2px; margin-bottom: 1px; margin-top: 1px; padding: 5px; width: 140px; float: left; } #searchbox:focus, #searchbox:hover { background: #FDFDFD; color: #000; } /* Header lists */ #navbar ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #navbar ul li { display: inline; } #navbar ul li a { text-decoration: none; padding: 0 1.5em; /*padding: 0 2em;*/ /*float: left;*/ } #mycart { float: right; } #navbar ul li a:hover { background-color: #7D787D; border-top: 1px solid #CC0001; } /* nav me */ .navme ul li { display: inline; } .navme ul li a { text-decoration: none; } #memberprogram p { /* margin: 0; */ } #footermenu { text-align: left; } #footernav li { display: inline-block; width: 145px; } .cartimage { vertical-align: middle; margin-top: -7px; border-style: none } .navbuttons { min-height: 30px; } .mega-menu { float: left; z-index: 1000; position: inherit; text-align: left; background: #aaaaaa; } /*--------Added CSS---------*/ .mega-menu { position: absolute; left: 0; top: 100%; width: 500px; } #navbar ul li { position: relative; float: left; } #navbar ul ul li { float: none; } #navbar ul ul li a { padding: 0 15px 0 15px; } #navbar ul li:hover > ul { display: block; } #navbar ul li#cart { float: right; } li.header { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> function showMenu(heading) { $(heading).find("div[class='mega-menu']").css({ display: "block" }) } function hideMenu(heading) { $(heading).find("div[class='mega-menu']").css({ display: "none" }) } </script> <div id="navbar" class="navbuttons"> <ul id="headernav"> <li><a href="/catalogdb/newarrivals.asp" id="new" style="float:left;">New Arrivals</a> </li> <li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"><a href="/shopmens.asp" id="men" style="float:left;">Men</a> <div id="mens-cat" name="mens-cat" class="mega-menu" style="display: none; margin-top: -1px;"> <div id="category" class="clearfix"> <div id="categorycontent" class="clearfix"> <ul class="clothing category"> <li class="header"> <h4>Clothing</h4> </li> <ul class="items"> <li> <a href="/catalogdb/products.asp?category=163">Activewear</a> </li> <li> <a href="/catalogdb/products.asp?category=143">Business Shirts</a> </li> <li> <a href="/catalogdb/products.asp?category=11">Coats and Jackets</a> </li> </ul> </ul> </div> </div> </div> </li> <li onmouseover="showMenu(this)" onmouseout="hideMenu(this)"><a href="/shopwomens.asp" id="women" style="float:left;">Women</a> <div id="womens-cat" name="womens-cat" class="mega-menu" style="display: none;"> <div id="category" class="clearfix"> <div id="categorycontent" class="clearfix"> <ul class="clothing category"> <li class="header"> <h4>Clothing</h4> </li> <ul class="items"> <li> <a href="/catalogdb/products.asp?category=27">Basic Tops</a> </li> <!-- <li><a href="/catalogdb/products.asp?category=177">Cathouse Suits</a></li>--> <li> <a href="/catalogdb/products.asp?category=185">Fashion Tops</a> </li> <li> <a href="/catalogdb/products.asp?category=36">Jackets</a> </li> </ul> </ul> </div> </div> </div> </li> <li id="cart"><a href="/catalogdb/cart.asp?cmdView=-9" id="mycart">My Cart</a> </li> </ul> </div> 

Answer 2

参见jsfiddle代码： http : //jsfiddle.net/sbaxe5m3/2/

添加此CSS：

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1; /* ie 6/7 */
}
/* Actual CSS */

#copyright { text-align:center; margin:0px auto; font-size:10px; }

#container { 
    width: 930px;
    margin:0px auto;
}

#navbar {
    border-top: 1px solid #686868;
    border-bottom: 1px solid #686868;
    /*padding: 5px;*/
}

/* Hero Footer List */
#herofooter ul li a { 
    padding: 1em 2.5em;
    text-decoration: none;
    float:left;
    text-align:center;
}

#byline {
    background: #7D787D;
    text-align:center;
    color: white;
    margin-top:12px;
    margin-bottom:12px;
    padding:5px;
}


#herofooter ul li a {
    background-repeat: no-repeat;
    /*background-position:0.2em;*/
    background-position: left center;
}



.shipping a {
/* width: 200px; */
}

#herocontainer {
    clear:both;
    margin:0;
    padding:0;
    padding-bottom: 10px;
    border-top: 1px solid #686868;
    border-bottom: 1px solid #686868;
}

.contactus a {
background-image: url('/Pics/13901.png');
}

.store a {
background-image: url('/Pics/13895.png');
}

.shipping a {
background-image: url('/Pics/13905.png');
}

.returns a {
background-image: url('/Pics/13909.png');
}

.store a {
padding-left:27px !important;
}

.shipping a {
padding-left:47px !important;
}

.secure a {
background-image: url('/Pics/NortonVerisign-sml.png');
padding-left:75px !important;
padding-top:.2em !important;
}

.loyaltyprogram a {
background-image: url('/Pics/LoyaltyProgramIcon.png');
padding-left:23px !important;
padding-top:.2em !important;
}

#herofooter ul li a:hover, #footernav li a:hover {
/*  background-color: #efefef;*/
color: #341414;
}

#herofooter ul li a, #footernav a {
color: #686868;
}


/* Footer extra buttons */
#footermenu { width: 800px; text-align:center; margin: 0px auto;}
#footernav li { font-size:12px; }

#footernav li a { 
    padding: 0.1em 2.5em;
    text-decoration: none;
}

/* Font replacements */
#headernav { 
    font-family: 'Oswald', 'Verdana';
    font-size: 20px;
}

#logotext  {
    font-family: 'Raleway', Verdana;
    font-weight: 800;
    font-size: 88px;
    color:#000;
}

#search {
    font-family: 'Oswald', Verdana;
    font-weight: 400;
    font-size: 18px;
    color:#000;
}

#herofooter {
    font-family: 'Raleway', Arial;
    font-size: 14px;
    font-weight: 500;
}

#copyright {
    font-family: 'Raleway';
    font-size: 10px;
    font-weight: 300;
}

#byline {
    font-family: 'Playfair Display', 'verdana';
    font-weight: 400;
    font-size: 24px;
}

#herofooter ul li a {
    color #000 !important;
}

/* Hovers and animations */
#headernav a {
    transition: background-color .25s ease;
    -webkit-transition: background-color .25s ease;
    -moz-transition: background-color .25s ease;
    -o-transition: background-color .25s ease;
}

#headernav a:hover {
    color:#CC3333 ;
    color:#FFFFFF ;
}

/* Sale, logo colour */
#headernav a {
    color: #000000;
}

a#sale, #logo {
    color: #CC0001;
}

#logo a img {
    border: 0;
}

/* Search */
#search {
    width: 185px;
    text-align:center;
    margin-right:25px;
    display:block;
    float:right;
    margin-top:15px;
}


#stylesearch {
    border:1px solid black;
    padding:0;
    margin:0;
    width:190px;
    padding-top:2px;
    line-height:22px;
}

#productsearch {
    padding-left:5px;
    padding-right:5px;
}

#searchbox {
    border:0;
    border-right:1px solid #686868;
    margin-right:2px;
    margin-bottom:1px;
    margin-top:1px;
    padding:5px;
    width:140px;
    float: left;
}

#searchbox:focus, #searchbox:hover {
    background: #FDFDFD;
    color:#000;
}

/* Header lists */
#navbar ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
}

#navbar ul li { display: inline; }

#navbar ul li a {
    text-decoration: none;
    padding: 0 1.5em; /*padding: 0 2em;*/
    /*float: left;*/
}

#mycart {

}

#navbar ul li a:hover {
    background-color: #7D787D;
    border-top:1px solid #CC0001;
}

/* nav me */
.navme ul li { display: inline; }

.navme ul li a {
    text-decoration: none;
}

#memberprogram p 
{
/* margin: 0; */
}

#footermenu { text-align:left; }
#footernav li { display: inline-block; width: 145px; }

.cartimage
{
    vertical-align: middle;
    margin-top: -7px;
    border-style:none
}

.navbuttons
{
    min-height:30px;

}

#navbar ul li {
    display: inline;
    line-height: 30px;
    position: relative;
}
.mega-menu
{
    float: left;
    z-index:1000;
    position: inherit;
    text-align:left;
    background:#aaaaaa; left: 50%;
    margin-left: -327px;
    position: absolute;
    top: 27px;
    width: 654px;
}