CSS下拉菜单消失在内容后面答案

【问题标题】：CSS drop down menu disappear behind contentCSS下拉菜单消失在内容后面
【发布时间】：2014-01-15 15:31:09
【问题描述】：

我搜索了类似的主题，但没有一个解决方案适合我。我的 CSS 下拉菜单消失在另一个内容区域后面。

#poshmenu {
padding-top: 10px;
 }

#cssmenu ul {
   margin: 0;

   padding: 4px 6px 0;

   line-height: 100%;
   border-radius: 1em;
   font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   width: auto;
    }

    #cssmenu li {
    margin: 0 5px;
    padding: 0 0 4px;
    float: left;
    position: relative;
    list-style: none;

    }
    #cssmenu a,
    #cssmenu a:link {
     font-weight: bold;
   font-size: 13px;
   color: #4B4B4B;
   text-decoration: none;
   display: block;
   padding: 5px 20px;
   margin: 0;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;


    }
   #cssmenu a:hover {
   background: #000;

    }
   #cssmenu .active a,
   #cssmenu li:hover > a {

background: #5a565a url(images/overlay.png) repeat-x 0 -40px;
background: #666666 url(images/overlay.png) repeat-x 0 -40px;
color: #666;
border-top: solid 1px  #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
    }
    #cssmenu ul ul li:hover a,
    #cssmenu li:hover li a {

    background: none;
    border: none;
    color: #666;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
     }
     #cssmenu ul ul a:hover {

    background: #403d40 url(images/overlay.png) repeat-x 0 -100px !important;
    color: #fff !important;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
     }
    #cssmenu li:hover > ul {
     display: block;

       }
     #cssmenu ul ul {
       display: none;
     margin: 0;
     padding: 0;
     width: 185px;
     position: absolute;
     top: 40px;
     left: 0;
     background: url(images/overlay.png) repeat-x 0 0;
     border: solid 1px #b4b4b4;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

      }
        #cssmenu ul ul li {
        float: none;
        margin: 0;
         padding: 3px;

           }
         #cssmenu ul ul a,
         #cssmenu ul ul a:link {
         font-weight: normal;
          font-size: 12px;

                 }
          #cssmenu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;  
     }
   * html #cssmenu ul {
       height: 1%;

      }

这是我的 HTML：

         <div class="poshmenu">

         <div id='cssmenu'>
           <ul>
             <li class='active'><a href='index.html'><span>Home</span></a></li>
            <li><a href='#'><span>About</span></a></li>
            <li class='has-sub'><a href='#'><span>Wood</span></a>
      <ul>
     <li><a href='#'><span>Oak</span></a></li>
     <li><a href='#'><span>Sycamore</span></a></li>
     <li class='last'><a href='#'><span>Ash</span></a></li>
  </ul>
   </li>
   <li class='last'><a href='#'><span>Contact</span></a> </li>
  </ul>
  </div>
  </div>
  <div id="imagecontainerindex"><img src="images/indeximagetext.jpg" width="800"               height="320" /></div>

“Wood”菜单在下图后面弹出。我一直在寻找溢出：隐藏；但没有，我试过 z-indexes 无济于事。

【问题讨论】：

请将您的代码发布到 jsfiddle.net 或类似的实时预览网站并与我们分享链接，以便我们尝试帮助您解决问题。
不可重现：jsbin.com/eletOgI/1/edit 也许您只是需要更高的 z-index？
在您的 #cssmenu ul ul { 规则中，您是否尝试过将 top 从 40 减少到 26 像素？
我会说更改 Z 索引，我的网站将菜单放在图像后面，因此必须更改它们并修复它
我已经将 z-index 调高了，这似乎奏效了。非常感谢;这么简单！

标签： css drop-down-menu

【解决方案1】：

我在主菜单栏允许下拉项目消失在主要内容或其他元素后面时遇到了同样的问题。

我的解决方案不是 CSS3 或 z-index，而是 HTML 和元素的定位。

没用的页面是这样布局的……

我遇到了同样的问题，但更改 z-index 值没有任何区别，因为问题不在于 CSS3，而在于 hthl。

我通过更改 html 页面上元素的顺序来解决。为了解决这个问题，断断续续地花了四天时间。

[code]
<html>
    <head>
        <title></title>
    </head>
    <body>
        <header>
            <nav>
            </nav>
        </header>
        <div id="mainbody">
            <article></article>
            ...etc...
        </div>
        <footer>
        </footer>
    </body>
</html>
[code]

我通过简单地将导航部分移出标题来解决它，就像这样......

[code]
    <html>
    <head>
        <title></title>
    </head>
    <body>
        <header>
        </header>
        <nav>
        </nav>
        <div id="mainbody">
            <article></article>
            ...etc...
        </div>
        <footer>
        </footer>
    </body>
</html>
[code]

在标题中包含导航块意味着它受到标题栏设置的任何大小的约束。

【讨论】：