Question

我正在尝试将下拉栏放在主导航栏后面，这样可以使用z-index但是一旦将光标从主导航中移开并向下移动，下拉列表就会消失，不允许您单击链接。任何帮助都是极好的！

HTML

<nav class="top-nav">
        <ul>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Headshots</a></li>
            <li><a href="#">Performances</a>
                <ul>
                    <li><a href="#">Fantasticks</a></li>
                    <li><a href="#">Little Women</a></li>
                    <li><a href="#">Tough Jet Girl</a></li>
                </ul>
            </li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Videos</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav><!--- End top-nav -->

CSS

.top-nav ul ul {
background: #E08399;
background: linear-gradient(top, #E08399 0%, #D66082 40%);
background: -moz-linear-gradient(top, #E08399 0%, #D66082 40%);
background: -webkit-linear-gradient(top, #E08399 0%,#D66082 40%); 
border-radius: 0px 0px 5px 5px; 
padding-left: 0px;
padding-top: 5px;
padding-bottom: 5px;
position: absolute;
top: 100%;
box-shadow: 0px 3px 8px #9C8066;
z-index: -1;

Answer 1

您的下拉菜单消失，因为它与您的父元素没有任何关联。所以你需要指定位置：相对于你的父元素。这意味着您的子元素绝对位置将在父元素内部计算，并且它将在此父元素下可见。

<强> CSS：

 .top-nav ul li:hover ul {
  background: #E08399;
  background: linear-gradient(top, #E08399 0%, #D66082 40%);
  background: -moz-linear-gradient(top, #E08399 0%, #D66082 40%);
  background: -webkit-linear-gradient(top, #E08399 0%,#D66082 40%); 
  border-radius: 0px 0px 5px 5px; 
  padding-left: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  position: absolute;
  top:100%;
  box-shadow: 0px 3px 8px #9C8066;
  z-index: 5;
  display:block;
  list-style-type:none;
  }
  .top-nav ul li ul{display:none}
  .top-nav ul li{position:relative;}

Have a Fiddle Demo!

我有一个z-index下拉问题

1 个答案: