javascript - 如何让子菜单出现在主菜单下方

标签 javascript jquery html css menu

Menu

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

以上是我要解决的问题，我的想法是，当您将鼠标悬停在男人和女人 <li> 上时元素下面出现一个子菜单，这就是隐藏的 div 在 <li> 内的原因因为当您离开链接进入 div 时，它不会消失。但是我的问题是其他菜单项被下推了。

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

Old Version

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

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

最佳答案

这是您想要达到的结果吗？我在最后添加了我的 CSS，为了“购物车”条目的 float ，我添加了一个 ID ( cart ) 到购物车 <li>元素。

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>

关于javascript - 如何让子菜单出现在主菜单下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28207422/

上一篇：jquery - 当推送菜单处于事件状态时，如何移动 div 背景图像？

下一篇：css - 如何编译css文件

相关文章：

javascript - Dojo 问题 : FilteringSelect , 需要 : "false" , 不工作

javascript - Contenteditable div 选择标题标签中的文本

html - iPhone (4S) 上忽略的 CSS 媒体查询

jquery - 使用 jquery 循环 json 多维数组的困惑

html - CSS: "text-transform: capitalize"和意大利语、西类牙语、葡萄牙语、法语等

javascript - 修复了一个可以根据平台引导您访问不同网站的图标

JavaScript 隐藏/可见脚本在第二次点击后不隐藏

javascript - 使用 carouFredSel 执行图像更改功能

javascript - Twitter 意图链接未在新窗口中打开

javascript - JQuery 添加然后删除相同的图像

©2024 IT工具网  联系我们