html - 防止 Div 移动

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

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

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

希望这对你有帮助..