Question

我正在使用标题div中带有css下拉菜单的网站。当出现下拉菜单时，它会调整标题div的大小，从而缩小内容div。

在我的index.php的主体中：

<div class="top"></div>
<div class="container">
<?php include_once("header.php"); ?>
<div class="content"></div>
</div>

header.php

<div class="header">
<div style="display: table-cell; width: 250px; text-align: center;">
LOGO
</div>
<div style="display: table-cell;">
<br><br><br>
<ul>
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
<li><a href="#">Monkey 4</a></li>
<li><a href="#">Monkey 5</a></li>
<li><a href="#">Monkey 6</a></li>
<li><a href="#">Monkey 7</a></li>
</ul>
</li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">Monkey 1</a></li>
<li><a href="#">Monkey 2</a></li>
<li><a href="#">Monkey 3</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</div>

和main.css

ul{
    padding: 0;
    list-style: none;
}
ul li{
    float: left;
    width: 100px;
    text-align: center;
}
ul li a{
    display: block;
    padding: 5px 10px;
    color: #333;
    background: #f2f2f2;
    text-decoration: none;
}
ul li a:hover{
    color: #fff;
    background: #939393;
}
ul li ul{
    display: none;
}
ul li:hover ul{
    display: block; /* display the dropdown */
}
.top{
    background: #1b2d3c;
    width: 100%;
    height: 40px;
}
.container{
    width: 1100px;
    height: 1000px;
}
.header{
    display: table-row;
    width: 1100px;
    height: 130px;
}
.content{
    position: absolute;
    background: #fff;
    width: 1100px;
    height: 500px;
}
* {
    background: #87a0b4;
    margin: 0px;
    padding: 0px;
    margin-left: auto ;
    margin-right: auto ;
}

我为冗长的帖子道歉。我怎样才能防止我遇到的问题？在深入了解项目之前，我想确保我正确地做事。

Answer 1

您需要将position ul li:hover ul更改为absolute，并添加其他一些属性，例如JSFiddel（Source）

ul li:hover ul {
    display: block;
    position: absolute;
    width: 100px;
    z-index: 100;
}

希望这会对你有帮助..

Answer 2

正如之前的回答中所说，您需要设置position: absolute。我想补充一些关于原因的信息。

根据MDN：

相对定位的元素仍被视为文档中正常的元素流。相比之下，绝对定位的元件从流动中取出，因此在放置其他元件时不占用空间。绝对定位的元素相对于最近定位的祖先定位。如果定位的祖先不存在，则使用初始容器。

基本上，通过给出元素绝对定位，在定位页面的其余部分时不再考虑它。无论如何，它将占据其设定位置的分配空间。

在你的情况下，div相对于它周围的元素移动。通过使用position: absolute，您可以省略和相对性。

防止Div移动

2 个答案: