Question

我有一个导航栏，配置为隐藏下拉元素（使用display:none），直到它显示为下拉时（在display:block使用a:hover）。这一切都很有效，除了它下面的“div”在下拉显示时被按下。无论下拉项目的显示如何，我如何让“div”保持原位？

谢谢！

Answer 1

我希望它可以帮到你

<h1>Simple Pure CSS Drop Down Menu</h1>
<ul class="nav">
    <li><a href="#">Menu1</a>
        <ul>
            <li><a href="#">Sub menu1</a></li>
            <li><a href="#">Sub menu2</a></li>
            <li><a href="#">Sub menu3</a></li>
            <li><a href="#">Sub menu4</a>
                <ul>
                    <li><a href="#">Deep menu1</a></li>
                    <li><a href="#">Deep menu2</a>
                        <ul>
                            <li><a href="#">Sub deep menu1</a></li>
                            <li><a href="#">Sub deep menu2</a></li>
                            <li><a href="#">Sub deep menu3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Deep menu3</a></li>
                </ul>
            </li>
            <li><a href="#">Sub menu5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu2</a>
        <ul>
            <li><a href="#">Sub menu1</a></li>
            <li><a href="#">Sub menu2</a></li>
            <li><a href="#">Sub menu3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu3</a>
        <ul>
            <li><a href="#">Sub menu1</a></li>
            <li><a href="#">Sub menu2</a>
                <ul>
                    <li><a href="#">Category1</a></li>
                    <li><a href="#">Category2</a></li>
                    <li><a href="#">Category3</a></li>
                    <li><a href="#">Category4</a></li>
                    <li><a href="#">Category5</a></li>
                </ul>
            </li>
            <li><a href="#">Sub menu3</a></li>
            <li><a href="#">Sub menu4</a></li>
            <li><a href="#">Sub menu5</a></li>
        </ul>
    </li>
</ul>

.nav {
  margin: 15px 0 0;
}
.nav li {
  display: inline-block;
  width: 150px;
  position: relative;
  text-align: center;
}
.nav li:hover {
  background: #f6f6f6;
}
.nav li a {
  display: block;
  padding: 10px 15px;
}
.nav ul {
  display: none;
  position: absolute;
}
.nav ul li {
  display: block;
}
.nav li:hover ul {
  display: block;
}
.nav li:hover ul li ul {
  display: none;
}
.nav li ul li:hover ul {
  display: block;
  left: 100%;
  top: 0;
}
.nav li ul li:hover ul li ul {
  display: none;
}
.nav li ul li ul li:hover ul {
  display: block;
}

fiddle

Answer 2

包含下拉部分的<div>元素必须包含position: absolute。这样他们就不会占据周围容器的任何空间。使用top和left（或右）设置调整其与父元素的关系。

这些DIV的父元素需要position: relative才能启用子元素的绝对定位。

顺便说一句，position: fixed不能很好地工作，因为这会将一个元素绝对定位到窗口，在大多数情况下你不想要（例外：如果你有一个固定的导航栏）。

使用CSS下拉显示受影响

2 个答案: