如何停止下拉菜单将我的页面内容向下推？答案

【问题标题】：How do i stop my drop down menu pushing my content of my page down?如何停止下拉菜单将我的页面内容向下推？
【发布时间】：2012-10-25 09:56:36
【问题描述】：

我有一个下拉菜单，但是当我单击下拉菜单时，它也会将我的内容向下推。

我希望我的菜单滑过我网页的上下文部分。有人可以告诉我如何设置吗？

CSS

body {
    font-size: 100%;
    background:#32373d;
}
a {
    text-decoration: none;
}
ul, ul ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#wrapper {  
    width: 220px;
    margin: 100px auto;
    font-size: 0.8125em;
}
.menu {
    width: 225px;
    height: auto;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    -moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
    box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
    background-color: #616975;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 122, 134)),to(rgb(80, 88, 100)));
    background-image: -webkit-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -moz-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -o-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: -ms-linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    background-image: linear-gradient(top, rgb(114, 122, 134), rgb(80, 88, 100));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#727a86', EndColorStr='#505864');
    border-bottom: 1px solid #33373d;
    -webkit-box-shadow: inset 0px 1px 0px 0px #878e98;
    -moz-box-shadow: inset 0px 1px 0px 0px #878e98;
    box-shadow: inset 0px 1px 0px 0px #878e98;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
}
.menu ul li a {
    background: #fff;
    border-bottom: 1px solid #efeff0;
    width: 100%;
    height: 2.75em;
    line-height: 2.75em;
    text-indent: 2.75em;
    display: block;
    position: relative;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.923em;
    font-weight: 400;
    color: #878d95;
}
.menu ul li:last-child a {
    border-bottom: 1px solid #33373d;
}
.menu > li > a:hover, .menu > li > a.active {
    background-color: #35afe3;
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(69, 199, 235)),to(rgb(38, 152, 219)));
    background-image: -webkit-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -moz-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -o-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: -ms-linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    background-image: linear-gradient(top, rgb(69, 199, 235), rgb(38, 152, 219));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#45c7eb', EndColorStr='#2698db');
    border-bottom: 1px solid #103c56;
    -webkit-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    -moz-box-shadow: inset 0px 1px 0px 0px #6ad2ef;
    box-shadow: inset 0px 1px 0px 0px #6ad2ef;
}
.menu > li > a.active {
    border-bottom: 1px solid #1a638f;
}
.menu > li > a:before {
    content: '';
    background-image: url(../images/sprite.png);
    background-repeat: no-repeat;
    font-size: 36px;
    height: 1em;
    width: 1em;
    position: absolute;
    left: 0;
    top: 50%;
    margin: -.5em 0 0 0;
}
.item1 > a:before {
    background-position: 0 0;
}
.item2 > a:before {
    background-position: -38px 0;
}
.item3 > a:before {
    background-position: 0 -38px;
}
.item4 > a:before {
    background-position: -38px -38px;
}
.item5 > a:before {
    background-position: -76px 0;
}
.menu > li > a span {
    font-size: 0.857em; 
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; 
    background: #48515c;
    line-height: 1em;
    height: 1em;
    padding: .4em .6em;
    margin: -.8em 0 0 0; 
    color: #fff;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: .769em;
    border-radius: .769em;
    -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
    text-shadow: 0px 1px 0px rgba(0,0,0,.5);
    font-weight: 500;
}
.menu > li > a:hover span, .menu > li a.active span {
    background: #2173a1;
}
.menu > li > ul li a:before{
    content: '▶';
    font-size: 8px;
    color: #bcbcbf;
    position: absolute;
    width: 1em;
    height: 1em;
    top: 0;
    left: -2.7em;
}

.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
    color: #32373D;
}


.menu ul > li > a span {
    font-size: 0.857em; 
    display: inline-block;
    position: absolute;
    right: 1em;
    top: 50%; /
    background: #fff;
    border: 1px solid #d0d0d3;
    line-height: 1em;
    height: 1em;
    padding: .4em .7em;
    margin: -.9em 0 0 0; 
    color: #878d95;
    text-indent: 0;
    text-align: center;
    -webkit-border-radius: .769em;
    -moz-border-radius: 769em;
    border-radius: 769em;
    text-shadow: 0px 0px 0px rgba(255,255,255,.01));
}

HTML

<link rel="stylesheet" type="text/css" href="../../Content/Menu.css" />
  <div class="float-right">
     <nav>
        <ul class="menuMain" style="float: left;">
          <li class="item1"><a href="#" class="">Home</a>
            <ul style="display: block; ">
          <li class="subitem1"><a class="active" href="/DashBoard">DashBoard</a></li>
          <li class="subitem2"><a href="/Home/Contact">Contact</a></li>
          <li class="subitem3"><a href="/Home/About">About</a></li>
            </ul>
          </li>
          <li class="item2"><a href="#" class="">Functions</a>
            <ul style="display: block; ">
              <li class="subitem1"><a href="/Home/Download?token=f09e0c76-c06f-44da-8811-07af92f0dd7d">Download</a></li>
               <li class="subitem2"><a href="/Home/ReturnProperties?token=f09e0c76-c06f-44da-8811-07af92f0dd7d">Valuation</a></li>
            </ul>
            </li>   
            <li class="item3"><a href="#" class="">Admin</a>  
              <ul style="display: block; ">
                <li class="subitem1"><a href="/Admin">Admin</a></li>
              </ul>
            <li>    
              <li class="item4"><a href="#" class="">Logout</a>  
                <ul style="display: block; ">
                  <li class="subitem1"><a href="/Home/Logout">Logout</a></li>
                </ul>
              <li>                           
          </ul>
      </nav>
   </div>

【问题讨论】：

请提供一个工作演示或与您的下拉菜单关联的 html 和 css。
您想发布您当前的代码吗？这样解决你的问题要容易得多！
你有这个网站的例子吗？我认为这与您如何定位下拉列表及其 z-index 相关
您希望我编写的 JS 用于向上或向下滑动、样式表或菜单的 html？
@Jrod 请查看我的编辑，我已经提供了您所要求的内容。

标签： css drop-down-menu

【解决方案1】：

下拉菜单应使用position: absolute 进行定位。

作为参考，请使用：http://www.htmldog.com/articles/suckerfish/dropdowns/

【讨论】：

这在不将内容向下推的情况下起作用，但它将我的菜单捣碎到右上角。
参考我给你的例子链接，应该都清楚了。

【解决方案2】：

实际上我几天前就发布了一个关于此的问题并设法解决了它，CSS dropdown nav causing html content to move

希望这对你有用，我的问题通过在子菜单 ul 的 css 中添加 z-index:1000 得到解决

【讨论】：