Javascript 如何使子菜单显示在主菜单下方

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

上面是我试图解决的问题，其想法是当你将男性和女性

元素悬停时，下面会出现一个子菜单，这就是为什么隐藏的div位于

中，因为当你离开链接进入div时，它不会消失。然而，我的问题是其他菜单项被按下了

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

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

---

除了获得x和y坐标并使用css强制div坐在那里之外，我几乎没有什么想法了。但是，我认为除非它在

之外，否则它不会工作。我还可以做些什么来让我的子菜单正常工作，同时保持菜单的对齐状态，这是你想要达到的结果吗？我在末尾添加了CSS，为了浮动“Cart”条目，我在Cart

元素中添加了一个ID（

Cart

）

这里是一个片段

.clearfix:before，
.clearfix:之后{
内容：“；
显示：表格；
}
.clearfix:之后{
明确：两者皆有；
}
.clearfix{
*缩放：1；
/*ie 6/7*/
}
/*实际CSS*/
#版权所有{
文本对齐：居中；
保证金：0px自动；
字体大小：10px；
}
#容器{
宽度：930px；
保证金：0px自动；
}
#导航栏{
边框顶部：1px实心#686868；
边框底部：1px实心#686868；
/*填充物：5px*/
}
/*英雄页脚列表*/
#希罗·乌尔·李a{
填料：1米2.5米；
文字装饰：无；
浮动：左；
文本对齐：居中；
}
#署名{
背景#7D787D；
文本对齐：居中；
颜色：白色；
边缘顶部：12px；
边缘底部：12px；
填充物：5px；
}
#希罗·乌尔·李a{
背景重复：无重复；
/*背景位置：0.2米*/
背景位置：左中；
}
.装运{
/*宽度：200px*/
}
#herocontainer{
明确：两者皆有；
保证金：0；
填充：0；
垫底：10px；
边框顶部：1px实心#686868；
边框底部：1px实心#686868；
}
.联系我们{
背景图片：url（'/Pics/13901.png'）；
}
.商店a{
背景图片：url（'/Pics/13895.png'）；
}
.装运{
背景图片：url（'/Pics/13905.png'）；
}
.返回一个{
背景图片：url（'/Pics/13909.png'）；
}
.商店a{
左侧填充：27px！重要；
}
.装运{
左侧填充：47px！重要；
}
.获得{
背景图片：url（'/Pics/NortonVerisign sml.png'）；
左侧填充：75px！重要；
填充顶部：2米！重要；
}
.忠诚程序a{
背景图片：url（'/Pics/LoyaltyProgramIcon.png'）；
左侧填充：23px！重要；
填充顶部：2米！重要；
}
#Herofoter ul li a:悬停，
#页脚导航李a：悬停{
/*背景色：#EFEF*/
颜色：#341414；
}
#希罗·乌尔·李娜，
#页脚导航a{
颜色：#6868；
}
/*页脚额外按钮*/
#页脚菜单{
宽度：800px；
文本对齐：居中；
保证金：0px自动；
}
#李国宝{
字体大小：12px；
}
#李娜{
填充物：0.1em 2.5em；
文字装饰：无；
}
/*字体替换*/
#海德尔纳夫{
字体系列：“Oswald”、“Verdana”；
字体大小：20px；
}
#标识文字{
字体系列：“Raleway”，Verdana；
字号：800；
字号：88px；
颜色：#000；
}
#搜寻{
字体系列：“奥斯瓦尔德”，Verdana；
字体大小：400；
字号：18px；
颜色：#000；
}
#英雄脚{
字体系列：“Raleway”，Arial；
字体大小：14px；
字号：500；
}
#版权所有{
字体系列：“Raleway”；
字体大小：10px；
字体大小：300；
}
#署名{
字体系列：“Playfair显示”、“verdana”；
字体大小：400；
字体大小：24px；
}
#希罗·乌尔·李a{
颜色#000！重要；
}
/*悬停和动画*/
#海德尔纳夫a{
过渡：背景色。25秒轻松；
-webkit过渡：背景色。25秒轻松；
-moz过渡：背景色。25秒轻松；
-o型过渡：背景色。25秒轻松度；
}
#海德尔纳夫：悬停{
颜色：#CC3333；
颜色：#FFFFFF；
}
/*销售，标志颜色*/
#海德尔纳夫a{
颜色：#000000；
}
大甩卖，
#标志{
颜色：#CC0001；
}
#标志a img{
边界：0；
}
/*搜寻*/
#搜寻{
宽度：185px；
文本对齐：居中；
右边距：25px；
显示：块；
浮动：对；
边缘顶部：15px；
}
#样式搜索{
边框：1px纯黑；
填充：0；
保证金：0；
宽度：190px；
垫顶：2件；
线高：22px；
}
#产品搜索{
左侧填充：5px；
右侧填充：5px；
}
#搜索框{
边界：0；
右边框：1px实心#686868；
右边距：2px；
边缘底部：1px；
页边顶部：1px；
填充物：5px；
宽度：140px；
浮动：左；
}
#搜索框：焦点，
#搜索框：悬停{
背景：#fdfd；
颜色：#000；
}
/*标题列表*/
#纳瓦尔{
保证金：0；
填充：0；
列表样式类型：无；
文本对齐：居中；
}
#纳瓦尔里酒店{
显示：内联；
}
#navbar ul li a{
文字装饰：无；
填充：0.1.5em；
/*填充：0.2em*/
/*浮动：左*/
}
#我的购物车{
浮动：对；
}
#导航栏ul li a：悬停{
背景色：#7D787D；
边框顶部：1px实心#CC0001；
}
/*导航我*/
navme ul li先生{
显示：内联；
}
navme ul li a先生{
文字装饰：无；
}
#会员计划{
/*保证金：0*/
}
#页脚菜单{
文本对齐：左对齐；
}
#李国宝{
显示：内联块；
宽度：145px；
}
.cartimage{
垂直对齐：中间对齐；
利润上限：-7px；
边框样式：无
}
.导航按钮{
最小高度：30px；
}
.大菜单{
浮动：左；
z指数：1000；
职位：继承；
文本对齐：左对齐；
背景：AAAAA；
}
/*--------添加CSS---------*/
.大菜单{
位置：绝对位置；
左：0；
最高：100%；
宽度：500px；
}
#纳瓦尔里酒店{
位置：相对位置；
浮动：左；
}
#navbar ul li{
浮动：无；
}
#navbar ul li a{
填充：0.15便士
.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;
}