如何让子菜单显示在主菜单下方

时间：2015-01-29 05:11:36

标签： javascript jquery html css menu

Menu

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

以上就是我想要解决的问题，我的想法是，当你将男性和女性<li>元素悬停在下面的子菜单时，这就是为什么隐藏的div位于<li>内部的原因当你离开链接进入div时，它不会消失。但问题是其他菜单项被推下来了。

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

Old Version

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

除了获得x和y坐标以及使用css迫使div坐在那里之外，我已经没想完了，但我不认为它会工作，除非它能够工作。在<li>之外，我还能做些什么来让我的子菜单正常工作，同时保持菜单对齐，因为它是

2 个答案:

答案 0 :(得分：0)

这是你想要达到的结果吗？我最后添加了我的CSS，用于＆＃34; Cart＆＃34;我已将一个ID（cart）添加到购物车<li>元素。

JSFiddle

这是一个片段。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

请参阅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;
}
相关问题
最新问题