响应菜单内的子菜单

时间：2017-02-24 16:53:27

标签： css twitter-bootstrap-3

嘿，我的mega菜单有些问题。我试图模仿Newegg的风格。我想要一个小的子菜单显示悬停。这是我的代码：https://codepen.io/iamgonge/pen/vxEEeN

我尝试在每个菜单链接中使用插入符号使子菜单对齐。现在它停留在同一个位置，当我从Absolute更改它时，它会在悬停时将所有内容推下来。

＆＃13;
＆＃13; 
/* Body  */

body {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica;
  background-color: #fff;
}
header {
  min-height: 450px;
}
header.dd-blue {
  background-color: #fff;
}

/* Nav */

nav {
  position: relative;
}
header.dd-blue nav {
  background-color: #4F96BA;
}
ul.main-nav {
  list-style-type: none;
  padding: 0px;
  font-size: 0px;
  max-width: 1000px;
  margin: 0 auto;
}
ul.main-nav h2 {
  font-size: .9em;
  font-weight: 300;
}
ul.main-nav>li {
  display: inline-block;
  padding: 0;
}
ul.main-nav>li>a {
  display: block;
  padding: 20px 30px;
  position: relative;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  box-sizing: border-box;
}
ul.main-nav>li:hover {
  background-color: #f9f9f9;
}
ul.main-nav>li:hover>a {
  color: #333;
  font-weight: 400;
}
ul.main-nav>li ul.sub-menu-lists {
  margin: 0px;
  padding: 1px;
  list-style-type: none;
  display: block;
}
ul.main-nav>li ul.sub-menu-lists>li {
  padding: 0 0px;
  margin-top: 2px;
}
ul.main-nav>li ul.sub-menu-lists>li>a {
  font-size: .84em;
  font-weight: 500;
}
.sub-menu-head {
  margin: 10px 0;
  border-bottom: 1px solid #4F96BA;
  width: 100%;
}

@media only screen and (min-width: 769px) {
  /* Desktop */
  ul.main-nav {
    display: block;
    position: relative;
  }
  .sub-menu-block {
    padding: 15px;
  }
  /* Sub-menu */
  ul.main-nav>li>div.sub-menu-block {
    visibility: hidden;
    background-color: #f9f9f9;
    position: absolute;
    margin-top: 0px;
    width: 100%;
    color: #333;
    left: 0;
    box-sizing: border-box;
    z-index: 3;
    font-size: 16px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    opacity: 0;
    /*CSS animation applied for sub menu : Slide from Top */
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
  }
  ul.main-nav>li:hover>div.sub-menu-block {
    background-color: #fff;
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  ul.main-nav>li>div.sub-menu-block>* {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  ul.main-nav>li:hover>div.sub-menu-block>* {
    opacity: 1;
  }
  .sub-menu-head {
    font-size: 20px;
  }
 
  header.dd-blue ul.main-nav>li>a {
    border-right: 1px solid #666;
  }
  /* List Separator: Inner Border */
  ul.main-nav>li>a:after {
    content: '';
    width: 1px;
    height: 62px;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
  }
  header.dd-blue ul.main-nav>li>a:after {
    background-color: #999;
  }
  /* Drop Down/Up Arrow for Mega Menu */
  ul.main-nav>li>a.mega-menu>span {
    display: block;
    vertical-align: middle;
  }
  ul.main-nav>li>a.mega-menu>span:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content: '';
    background-color: transparent;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }
  ul.main-nav>li:hover>a.mega-menu span:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #666;
  }
}


.sub-menu-lists li {
  line-height: 1;
}

/* 5 Columns */

.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-15 {
  width: 20%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
}

/* end 5 columns */

#rds-font {
  font-size: 15px;
}
a, a:active, a:visited, a:link {
  color: #599ab9;
  text-decoration: none;
}
a:hover {
  color: black;
}
#left-border {
  border-left: 1px solid #666;
}

/* Hover dropdown */

.dropdown ul.dropdown-menu {
  margin-top: 0;
}


.hover_drop_down:hover ul.dropdown-menu {
  margin-top: 2px;
}


.hover_drop_down:hover ul.dropdown-menu {
  display: inline-block;
  position: absolute;
  top: 25px;
  left: 90%;
  z-index: 1;
}
.dropdown-menu>li>a {
  display: block;
  margin: 10px: padding-bottom: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #599ab9;
  
}
＆＃13; 
<header class="dd-blue">
    <nav role="navigation">
      <ul class="main-nav">
        <li class="top-level-link">
          <a class="mega-menu" id="left-border"><span>Main 1</span></a>
          <div class="sub-menu-block">
            <div class="row">
              <div class="col-xs-15">
                <h2 class="sub-menu-head">Header 1</h2>
                <ul class="sub-menu-lists">
                  <li class="hover_drop_down">
                    <a href="#">Item with sub-menu<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">                     
                      <li><a href="#">Item X</a></li>
                     
                    </ul>
                  </li>        
                   <li class="hover_drop_down">
                    <a href="#">Item with sub-menu<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">                     
                      <li><a href="#">Item X</a></li>
                     
                    </ul>
                  </li>      
                </ul>
              </div>
            </div> 
          </div> <!--end of sub-menu-block -->
        </li>
     
      </ul>
    </nav>
  </header>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

设置position: absolute; display: inline-block;并删除所有left和top值，以便元素显示在DOM中的位置。

＆＃13;
＆＃13; 
/* Body  */

body {
  margin: 0px;
  padding: 0px;
  font-family: Helvetica;
  background-color: #fff;
}
header {
  min-height: 450px;
}
header.dd-blue {
  background-color: #fff;
}

/* Nav */

nav {
  position: relative;
}
header.dd-blue nav {
  background-color: #4F96BA;
}
ul.main-nav {
  list-style-type: none;
  padding: 0px;
  font-size: 0px;
  max-width: 1000px;
  margin: 0 auto;
}
ul.main-nav h2 {
  font-size: .9em;
  font-weight: 300;
}
ul.main-nav>li {
  display: inline-block;
  padding: 0;
}
ul.main-nav>li>a {
  display: block;
  padding: 20px 30px;
  position: relative;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  box-sizing: border-box;
}
ul.main-nav>li:hover {
  background-color: #f9f9f9;
}
ul.main-nav>li:hover>a {
  color: #333;
  font-weight: 400;
}
ul.main-nav>li ul.sub-menu-lists {
  margin: 0px;
  padding: 1px;
  list-style-type: none;
  display: block;
}
ul.main-nav>li ul.sub-menu-lists>li {
  padding: 0 0px;
  margin-top: 2px;
}
ul.main-nav>li ul.sub-menu-lists>li>a {
  font-size: .84em;
  font-weight: 500;
}
.sub-menu-head {
  margin: 10px 0;
  border-bottom: 1px solid #4F96BA;
  width: 100%;
}

@media only screen and (min-width: 769px) {
  /* Desktop */
  ul.main-nav {
    display: block;
    position: relative;
  }
  .sub-menu-block {
    padding: 15px;
  }
  /* Sub-menu */
  ul.main-nav>li>div.sub-menu-block {
    visibility: hidden;
    background-color: #f9f9f9;
    position: absolute;
    margin-top: 0px;
    width: 100%;
    color: #333;
    left: 0;
    box-sizing: border-box;
    z-index: 3;
    font-size: 16px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    opacity: 0;
    /*CSS animation applied for sub menu : Slide from Top */
    -webkit-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
  }
  ul.main-nav>li:hover>div.sub-menu-block {
    background-color: #fff;
    visibility: visible;
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform: rotateX(0deg);
  }
  ul.main-nav>li>div.sub-menu-block>* {
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 0.4s;
    -moz-transition-duration: 0.4s;
    -o-transition-duration: 0.4s;
    transition-duration: 0.4s;
    opacity: 0;
  }
  ul.main-nav>li:hover>div.sub-menu-block>* {
    opacity: 1;
  }
  .sub-menu-head {
    font-size: 20px;
  }
 
  header.dd-blue ul.main-nav>li>a {
    border-right: 1px solid #666;
  }
  /* List Separator: Inner Border */
  ul.main-nav>li>a:after {
    content: '';
    width: 1px;
    height: 62px;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 2;
  }
  header.dd-blue ul.main-nav>li>a:after {
    background-color: #999;
  }
  /* Drop Down/Up Arrow for Mega Menu */
  ul.main-nav>li>a.mega-menu>span {
    display: block;
    vertical-align: middle;
  }
  ul.main-nav>li>a.mega-menu>span:after {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    content: '';
    background-color: transparent;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }
  ul.main-nav>li:hover>a.mega-menu span:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 0px solid transparent;
    border-bottom: 5px solid #666;
  }
}


.sub-menu-lists li {
  line-height: 1;
}

/* 5 Columns */

.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 {
  position: relative;
  min-height: 1px;
  padding-right: 10px;
  padding-left: 10px;
}
.col-xs-15 {
  width: 20%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-15 {
    width: 20%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-15 {
    width: 20%;
    float: left;
  }
}

/* end 5 columns */

#rds-font {
  font-size: 15px;
}
a, a:active, a:visited, a:link {
  color: #599ab9;
  text-decoration: none;
}
a:hover {
  color: black;
}
#left-border {
  border-left: 1px solid #666;
}

/* Hover dropdown */

.dropdown ul.dropdown-menu {
  margin-top: 0;
}


.hover_drop_down:hover ul.dropdown-menu {
  position: absolute;
  display: inline-block;
  z-index: 1;
  left: auto;
  top: auto;
}

.caret-right {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-left: 5px solid;
  border-left-color:#1c2b36;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;
}
＆＃13; 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

  <header class="dd-blue">
    <nav role="navigation">
      <ul class="main-nav">
        <li class="top-level-link">
          <a class="mega-menu" id="left-border"><span>Main 1</span></a>
          <div class="sub-menu-block">
            <div class="row">
              <div class="col-xs-15">
                <h2 class="sub-menu-head">Header 1</h2>
                <ul class="sub-menu-lists">
                  <li class="hover_drop_down">
                    <a href="#">Item with sub-menu<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">                     
                      <li><a href="#">Item X</a></li>
                     
                    </ul>
                  </li>        
                   <li class="hover_drop_down">
                    <a href="#">Item with sub-menu<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">                     
                      <li><a href="#">Item X</a></li>
                     
                    </ul>
                  </li>      
                </ul>
              </div>
              
              
              
            </div> 
          </div> <!--end of sub-menu-block -->
        </li>
     
        
        
      </ul>
    </nav>
  </header>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题