响应式菜单内的子菜单

Question

嘿，我的大型菜单有些问题。我试图模仿新蛋的风格。我希望在悬停时显示一个小子菜单。这是我的代码笔：https://codepen.io/iamgonge/pen/vxEEeN

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

/* 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;
  
}

<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>

Answer 1

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

/* 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;
}

<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>