CSS下拉菜单 - 激活时移动页面上的所有内容

时间:2013-01-24 06:15:52

标签: php html css

我的导航栏已经在网站上存在了很长时间。它很棒。现在,我正在尝试在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;}

2 个答案:

答案 0 :(得分:2)

虽然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/(水平菜单)

答案 1 :(得分:0)

如果您希望在添加其他内容时页面不向下移动,则需要使用position: absolute。由于这里没有确切的例子,我无法给出一个确切的例子来向您展示我的意思。

相反,这里有解释CSS定位的资源:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/ http://www.impressivewebs.com/absolute-position-css/

只是一个快速免责声明 - 绝对定位可能是你最好的朋友和最大的敌人。确保您进行跨浏览器测试,并了解您正在尝试完成的任务。

只要您的商品位于绝对位置且获得topleft值,它们就不会影响页面流量。