Question

我在垂直菜单栏上方有一个响应式水平条。水平条包含子项或下拉列表，它们似乎将垂直菜单栏向下推，而不是悬停在垂直菜单栏上方。

它最有可能与我的位置属性有关，我错了但似乎无法确定在哪里？

关于我哪里出错的任何想法谢谢。

HTML：

   <div class="horizontalmenubar">

        <label for="show-menu" class="show-menu">HORIZONTAL MENU</label>

        <input type="checkbox" id="show-menu" role="button">

        <ul id="menu">
            <li><a href="#">MENU OPTION</a></li>

            <li>
                <a href="#">MENU OPTION</a>
                <ul class="hidden">
                    <li><a href="#">SUB-MENU OPTION</a></li>
                    <li><a href="#">SUB-MENU OPTION</a></li>
                </ul>
            </li>

            <li>
                <a href="#">MENU OPTION</a>
                <ul class="hidden">
                    <li><a href="#">SUB-MENU OPTION</a></li>
                    <li><a href="#">SUB-MENU OPTION</a></li>
                    <li><a href="#">SUB-MENU OPTION</a></li>
                </ul>
            </li>

            <li><a href="#">MENU OPTION</a></li>

            <li><a href="#">MENU OPTION</a></li>
        </ul>
    </div>

    <div class="clear"></div>

    <div id="div_lhs_menu">

        <ul class="js-css-menu responsive vertical">
          <li><a href="#">Link</a>
            <div>

              <ul>
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 2</a></li>
                <li><a href="#">Sublink 3</a></li>
              </ul>

            </div>
          </li>

          <li><a href="#">Link</a>
            <div>

              <ul>
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 2</a></li>
                <li><a href="#">Sublink 3</a></li>
              </ul>

            </div>
          </li> <!-- class="current" for now not needed -->

          <li><a href="#">Link</a>
                        <div>

              <ul>
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 1</a></li>
                <li><a href="#">Sublink 2</a></li>
                <li><a href="#">Sublink 3</a></li>
              </ul>

            </div>
          </li>
        </ul>

CSS：

.horizontalmenubar {
    margin-top: 86px;
    background: #33DD00;
    width: 100%;
}

/*Strip the ul of padding and list styling*/
.horizontalmenubar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/*Create a horizontal list with spacing*/
.horizontalmenubar li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

/*Style for menu links*/
.horizontalmenubar li a {
    display:block;
    min-width: 200px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #555;
    background: #D6D6D6;
    text-decoration: none;
}

/*Hover state for top level links*/
.horizontalmenubar li:hover a {
    background: #F5F5F5;
    color: #3366ff;
}

/*Style for dropdown links*/
.horizontalmenubar li:hover ul a {
    background: #D6D6D6;
    color: #555;
    height: 40px;
    line-height: 40px;
    font-weight: normal;
}

/*Hover state for dropdown links*/
.horizontalmenubar li:hover ul a:hover {
    background: #F5F5F5;
    color: #3366ff;
    font-weight: normal;
}

/*Hide dropdown links until they are needed*/
.horizontalmenubar li ul {
    display: none;
}

/*Make dropdown links vertical*/
.horizontalmenubar li ul li {
    display: block;
    float: none;
}

/*Prevent text wrapping*/
.horizontalmenubar li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
}

/*Display the dropdown on hover*/
.horizontalmenubar ul li a:hover + .hidden, .hidden:hover {
    display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #555;
    background: #D6D6D6;
    text-align: center;
    padding: 10px 0;
    display: none;
    font-weight: bold;
}

/*Hide checkbox*/
.horizontalmenubar input[type=checkbox]{
    display: none;
    font-weight: bold;
}

/*Show menu when invisible checkbox is checked*/
.horizontalmenubar input[type=checkbox]:checked ~ #menu{
    display: block;
    font-weight: bold;
}

/*Responsive Styles*/
@media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    .horizontalmenubar ul {
        position: static;
        display: none;
    }
    /*Create vertical spacing*/
    .horizontalmenubar li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    .horizontalmenubar ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
}

/* Main menu */
.js-css-menu {
  display: inline-block;
  font-weight: normal;
}

.js-css-menu, .js-css-menu ul, .js-css-menu li {
  list-style: none; 
  padding: 0; 
  margin: 0;
}

.js-css-menu a {
  text-decoration: none;
}

.js-css-menu > li {
  display: inline-block; 
  float: left;
}

.js-css-menu > li > a {
  color: #555; 
  display: block;
  padding: 15px 15px;
  margin-top: 1px;
  background: #D6D6D6;
}

.js-css-menu > li:hover > a {
    background: #F5F5F5;
    color: #3366ff;
}

/* Dropdown */
.js-css-menu > li div {
  position: absolute; 
  display: none;
  background: #D6D6D6;
}

.js-css-menu > li:hover div {
  display: block;
}

.js-css-menu > li div ul {
  float: none;
}

.js-css-menu > li div ul li {
  padding: 15px 15px;
  margin-top: 1px;
  font-weight: normal; 
}

.js-css-menu > li div ul li:hover {
    background: #F5F5F5;
    color: #3366ff;
    font-weight: normal;
}

/* Vertical */
.js-css-menu.vertical {
  width: 200px; /* Adjust the width of the vertical menu */
}

.js-css-menu.vertical > li {
  display: block; 
  float: none; 
  position: relative;
  font-weight: normal;
}

.js-css-menu.vertical > li div {
  width: 150px; 
  top: 0;
  left: 201px; /* Adjust the left value according to the width of the vertical menu */
}

.js-css-menu.vertical > li div ul li:hover {
    background: #F5F5F5;
    color: #3366ff;
    font-weight: normal;
    margin-top: 1px;
}

.js-css-menu.vertical > li div ul li a {
    color: #555;
    font-weight: normal;
}

.js-css-menu.vertical > li div ul li a:hover {
    color: #3366ff;
}

.js-css-menu.firstitem {
    font-weight: normal;
}

Answer 1

一种可能的解决方案是将 z-index 设置为容器divS（首先你必须关闭第二个:)）所以“z-index：2或grater”在第一个（水平）和“z-index：1或小于第一个”，现在您的水平条显示在垂直条上方。下一步是重要，您必须在第一个div容器和“位置设置”position：relative“ :(绝对或固定且非静态） “在第二个div容器上，我用位置做了：绝对并用顶部：124px 固定以将顶杆放在他的位置但是那些px-s取决于你的位置布局。请记住，z-index仅适用于已获得明确位置的元素。所以CSS的变化是：

.horizontalmenubar {
z-index: 333;
position: relative;
}
#div_lhs_menu {
position: absolute;
top: 124px;
z-index: 1;
}

Answer 2

当我平稳地调整窗口时，菜单选项被放置在垂直条上，直到出现绿色条（这是你应该想到的东西）。

一切都取决于你的想法和布局。 1。首先想法是继续修复独立元素，例如页脚栏等，但很多元素的硬固定可以很快或后来制动设计，尽管这是我的想法在开始我认为这是不好的做法，你不应该这样做。 :) 2。第二个想法是在包装器div （或其他块元素）中包装vert-bar和页脚，并给他修复和 z-index ：

<div class="wrapper">
    <div id="div_lhs_menu"></div>
    <footer></footer>
</div>

.wrapper {
  z-index: 1;
  position: absolute;
  top: 124px;
}

现在你的垂直条和页脚上有水平条，但是下拉覆盖了页脚的一些区域，顽皮地淘气:)

告诉我是否要在触发绿色条的下拉菜单后显示页脚。

也许溢出的垂直条只有当绿色条显示时，如果这是你的目标，考虑使用@media queryz进行所有定位和z-ndexing。最好的反复！

<ul>作为孩子的孩子不会悬停在</ul>以下的元素上

2 个答案: