我有一个导航栏，已经在网站上存在了很长时间。 效果很好。 现在，我正在尝试在 CSS 驱动的导航项之一上添加下拉效果。
这个想法是，当您将鼠标悬停在下面的"下拉菜单"链接上时，您将获得其他菜单选项的垂直列表。
问题是，当我将鼠标悬停在下面的"下拉菜单"链接上时，生成的弹出框会抛弃它下面的所有内容。 它下面的div 容器中的文本行换行，横幅广告向下移动，页面基本上失去了形式。
有没有办法使下拉CSS框覆盖在现有页面上并且不会移动其下方的所有元素？
我的导航行如下所示：
<ul id="navlist">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Services</a></li>
<li style="float:right"><a href="#">Pull Down Menu</a>
<ul>
<li><a href="">Option 1</a></li><br>
<li><a href="">Option 2</a></li><br>
<li><a href="">Option 3</a></li><br>
</ul>
</li>
</ul>
</div>
//below this I have some other stuff
<div align="center">Here is a line of text about 800 pixles wide</div>
<div align="center">A BANNNER AD GOES HERE</div>
<div align="center">THE BODY OF THE PAGE GOES HERE</div>
那么我的CSS看起来像这样：
ul#navlist {
width: 980px; line-height: 2em;
list-style-type: none;
clear: both;}
ul#navlist li { display: inline; }
ul#navlist li a {float: center;}
ul#navlist li a:hover {color: #fff;}
ul#navlist ul {display: none;}
ul#navlist li:hover > ul {display: block;}
虽然CSS很好，但最好重新构建它。如果您提供了包含问题的页面的屏幕截图，那就更好了。好的，我有一个解决方案。检查下面的代码，尝试以这种方式重组CSS和HTML，尽管HTML是相同的。
.HTML
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
.CSS
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */
小提琴：
http://jsfiddle.net/vMuxA/（垂直菜单）
http://jsfiddle.net/vMuxA/1/（水平菜单）
如果您希望页面在添加其他内容时不下移，则需要使用 position: absolute 。由于这里没有确切的例子，我不能给出一个确切的例子来告诉你我的意思。
相反，以下是解释CSS定位的资源：
http://css-tricks.com/absolute-positioning-inside-relative-positioning/http://www.impressivewebs.com/absolute-position-css/
只是一个简短的免责声明 - 绝对定位可能是你最好的朋友和最大的敌人。确保你跨浏览器测试并知道你要完成什么。
只要您的项目处于绝对位置并具有top和left值，它们就不会影响页面流。