下拉div或阻止其下拉菜单

时间：2018-04-06 12:00:17

标签： html css menu dropdown

我遇到了这个问题，我的下拉菜单内容出现在菜单前面。我已经尝试了一切并搜索了stackoverflow但我似乎无法找到答案。请帮我看一下。感谢

这是代码

＆＃13;
＆＃13; 
#box {
  width: 180px;
  min-height: 570px;
  background: #4D4D4D;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
  /*shadows  */
  box-shadow: 1px 1px 5px 3px #333;
  -webkit-box-shadow: 1px 1px 5px 3px #333;
  -moz-box-shadow: 1px 1px 5px 3px #333;
  -o-box-shadow: 1px 1px 5px 3px #333;
  /* transparency  */
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}

#box-under {
  width: 600px;
  min-height: 583px;
  background: #4D4D4D;
  position: absolute;
  right: -600px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: table-cell;
  vertical-align: middle;
  /*shadows  */
  box-shadow: 1px 1px 5px 3px #333;
  -webkit-box-shadow: 1px 1px 5px 3px #333;
  -moz-box-shadow: 1px 1px 5px 3px #333;
  -o-box-shadow: 1px 1px 5px 3px #333;
  /* transparency  */
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
  transition: all 0.5s cubic-bezier(0, 0, 0, 1.13) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0, 0, 0, 1.13) 0s;
}


/*  xxxxxxxx testing drop down  xxxxxxxx  */

#keys:hover #box-under {
  right: 0px;
  z-index: 1;
}

#box:hover #box-under {
  right: 0px;
  z-index: 1;
}

.butz:hover #box-under #box {
  z-index: 999;
  right: 0px;
}


/*  xxxxxxxxxxxxxxxxxxxxxxx  */

#logoz {
  min-height: 40px;
  background: #555555;
  text-align: center;
  padding: 1.4em;
}

.butz {
  min-height: 15px;
  box-sizing: border-box;
  background: #304565;
  padding: 0.9em;
  font-size: 14px;
  color: #CCC;
}

.butz:hover {
  background: #218F77;
  color: #ffffff;
}

.butz2 {
  min-height: 20px;
  background: #555555;
  font-size: 14px;
  color: #CCC;
  display: flex;
}

.butz2-in:hover {
  background: #41967C;
  color: #FFF;
  border-bottom: #41967C 4px solid;
}

.butz2-in {
  min-height: 20px;
  box-sizing: border-box;
  background: #555555;
  padding: 0.9em;
  font-size: 14px;
  color: #CCC;
  width: 75%;
  float: left;
  border-bottom: #777 4px solid;
}

.butz2-out {
  min-height: 20px;
  width: 25%;
  float: right;
  box-sizing: border-box;
  background: #777;
  padding: 0.55em 0.9em;
  font-size: 17px;
  text-align: center;
  color: #CCC;
  display: table-cell;
  vertical-align: middle;
  border-bottom: #00B2B2 4px solid;
}

.butz3 {
  min-height: 30px;
  font-size: 12px;
  color: #dddddd;
  display: flex;
  padding: 1.3em 0.9em;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
}

.butz3:hover {
  background: #CCC;
  color: #2E2E2E;
}
＆＃13; 
<div id="box">
  <div id="logoz">
    <img src="images/page_logo.png" alt="">
  </div>
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <div class="butz" id="keys">KEY FEATURES<br />
    <small>The summaries is gone</small>
    <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
    <div id="box-under"></div>
    <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  </div>
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">The Company</div>
    <div class="butz2-out"><i class="fas fa-angle-double-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">Our Services</div>
    <div class="butz2-out"><i class="fas fa-angle-doub`enter code here`le-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">Our Works</div>
    <div class="butz2-out"><i class="fas fa-angle-double-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">Contact Info</div>
    <div class="butz2-out"><i class="fas fa-angle-double-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz3">
    <span class="cube"><i class="fas fa-align-left"></i></span>
    <span class="notes">To maintain and expand our oursd and to...</span>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz3">
    <span class="cube"><i class="far fa-bookmark"></i></span> To maintain our commercial presence...
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz3">
    <span class="cube"><i class="fab fa-odnoklassniki"></i></span> To maintain and expand our commercial to...
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
</div>
＆＃13;
＆＃13;
＆＃13;

这就是它的样子。

[静态1 [over state] 2

由于

2 个答案:

答案 0 :(得分：0)

我认为您会发现在（X）HTML页面的DTD类型问题之外尝试控制DHTML javascript时会出现两个问题。

  1. 您需要将CSS属性名称和值“visibility：visible;”或“visibility：hidden;”放入每个CSS样式类或“＃”中图层符号或其style =属性的DIV标记作为适当的默认值。
  2. 要通过DHTML操作visibility属性，首先应该在类和层符号的CSS文档声明中实例化它，否则它可能会在用户第一次尝试失败或完全失败时失败。 如果首先没有声明属性，则通常无法操作CSS DHTML，这取决于浏览器是否依赖于在div上使用的默认值！

    3. 通常的默认值是“可见的”！

答案 1 :(得分：0)

将z-index #box_under，#keys:hover #box_under，#box:hover #box_under修改为-1000，如下所示。

注意!! 不需要将z-index的值精确地减少到-1000，而是将负值减小到小于其他div的z-index的值。 

#box-under {
 z-index:-1000;
 }

#keys:hover #box-under {
  right: 0px;
  z-index: -1000;
}

#box:hover #box-under {
  right: 0px;
  z-index: -1000;
}


#box {
  width: 180px;
  min-height: 570px;
  background: #4D4D4D;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
  /*shadows  */
  box-shadow: 1px 1px 5px 3px #333;
  -webkit-box-shadow: 1px 1px 5px 3px #333;
  -moz-box-shadow: 1px 1px 5px 3px #333;
  -o-box-shadow: 1px 1px 5px 3px #333;
  /* transparency  */
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
}

#box-under {
  width: 600px;
  min-height: 583px;
  background: #4D4D4D;
  position: absolute;
  right: -600px;
  top: 50%;
  transform: translateY(-50%);
  z-index: -1000;
  display: table-cell;
  vertical-align: middle;
  /*shadows  */
  box-shadow: 1px 1px 5px 3px #333;
  -webkit-box-shadow: 1px 1px 5px 3px #333;
  -moz-box-shadow: 1px 1px 5px 3px #333;
  -o-box-shadow: 1px 1px 5px 3px #333;
  /* transparency  */
  opacity: 0.9;
  filter: alpha(opacity=90);
  /* For IE8 and earlier */
  transition: all 0.5s cubic-bezier(0, 0, 0, 1.13) 0s;
  -webkit-transition: all 0.5s cubic-bezier(0, 0, 0, 1.13) 0s;
}


/*  xxxxxxxx testing drop down  xxxxxxxx  */

#keys:hover #box-under {
  right: 0px;
  z-index: -1000;
}

#box:hover #box-under {
  right: 0px;
  z-index: -1000;
}

.butz:hover #box-under #box {
  z-index: 999;
  right: 0px;
}


/*  xxxxxxxxxxxxxxxxxxxxxxx  */

#logoz {
  min-height: 40px;
  background: #555555;
  text-align: center;
  padding: 1.4em;
}

.butz {
  min-height: 15px;
  box-sizing: border-box;
  background: #304565;
  padding: 0.9em;
  font-size: 14px;
  color: #CCC;
}

.butz:hover {
  background: #218F77;
  color: #ffffff;
}

.butz2 {
  min-height: 20px;
  background: #555555;
  font-size: 14px;
  color: #CCC;
  display: flex;
}

.butz2-in:hover {
  background: #41967C;
  color: #FFF;
  border-bottom: #41967C 4px solid;
}

.butz2-in {
  min-height: 20px;
  box-sizing: border-box;
  background: #555555;
  padding: 0.9em;
  font-size: 14px;
  color: #CCC;
  width: 75%;
  float: left;
  border-bottom: #777 4px solid;
}

.butz2-out {
  min-height: 20px;
  width: 25%;
  float: right;
  box-sizing: border-box;
  background: #777;
  padding: 0.55em 0.9em;
  font-size: 17px;
  text-align: center;
  color: #CCC;
  display: table-cell;
  vertical-align: middle;
  border-bottom: #00B2B2 4px solid;
}

.butz3 {
  min-height: 30px;
  font-size: 12px;
  color: #dddddd;
  display: flex;
  padding: 1.3em 0.9em;
  transition: all 0.5s ease-out 0s;
  -webkit-transition: all 0.5s ease-out 0s;
}

.butz3:hover {
  background: #CCC;
  color: #2E2E2E;
}
<div id="box">
  <div id="logoz">
    <img src="images/page_logo.png" alt="">
  </div>
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <div class="butz" id="keys">KEY FEATURES<br />
    <small>The summaries is gone</small>
    <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
    <div id="box-under"></div>
    <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  </div>
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">The Company</div>
    <div class="butz2-out"><i class="fas fa-angle-double-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">Our Services</div>
    <div class="butz2-out"><i class="fas fa-angle-doub`enter code here`le-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">Our Works</div>
    <div class="butz2-out"><i class="fas fa-angle-double-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz2">
    <div class="butz2-in">Contact Info</div>
    <div class="butz2-out"><i class="fas fa-angle-double-left"></i></div>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz3">
    <span class="cube"><i class="fas fa-align-left"></i></span>
    <span class="notes">To maintain and expand our oursd and to...</span>
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz3">
    <span class="cube"><i class="far fa-bookmark"></i></span> To maintain our commercial presence...
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <div class="butz3">
    <span class="cube"><i class="fab fa-odnoklassniki"></i></span> To maintain and expand our commercial to...
  </div>
  <!--  ------- --- + ----------  -->
  <!--  ------- --- + ----------  -->
  <!--  xxxxxxxxxxxxxxxxxxxxxxxxx  -->
</div>

相关问题
最新问题