css导航栏下拉菜单特效怎样才不会撑开下面内容

1.在CSS样式下拉菜单中，使用z-index属性控制下拉菜单的级别，确保其位于其他页面内容之上；但以下内容将不再重复。
2、网页布局时；为了避免下拉菜单与下拉菜单之间重叠或拉伸，请将其放置在其他内容的空白处。
例如，菜单下定义一个空容器；里面只会显示下拉菜单。
3.您可以使用max-height或overflow属性等CSS3属性来控制下拉菜单的高度和溢出模式。
价值垂直隐藏栏或隐藏栏会自动溢出，因此下面的内容不会拉伸。

如何用DIV+CSS做漂亮的横排导航栏

首先，您不需要编写导航栏所需的基本HTML代码<body>Home>导航1调查2>调查3调查4a>调查5调查6。
首先，让我们将导航放置在浏览器的中间。
不过，你必须先设置一个距离中心的宽度，这样做的原因是它不能在中心。
目前，最常用的网页宽度是960或980（当然还有其他的，有些网页会根据访问者的显示器尺寸而有不同的宽度，原因我就不细说了）这里就用980。
改变宽度的技巧是在之间添加以下代码。
为了澄清结果，我们添加另一个边框。
测试结果如图2所示。
接下来，我们向中心工作。
我们将以下代码添加到样式中。
.navul{width:980px;/*元素宽度980px*/border:1pxsolid#000;/*颜色#000，宽度1px*/margin:0pxauto0pxauto;/*也可以缩写为margin:0auto*/}测试结果应如图3所示。
因为我们所做的是水平方向，所以现在我们需要将其更改为水平方向。
我们将以下代码添加到样式中。
.navulli{float:left;/*Li元素向左浮动*/}我们可以看到图4的测试结果。
边界之所以被压缩在一起，是因为漂浮后，背风落入物质中，没有宽度和高度，所以边界无法被拉伸。
（想知道原因可以百度一下）当然，我们可以稍后给ul或者.nav加上高度。
接下来，我们将通过向元素添加样式来使其更加精美。
添加以下代码。
.navullia{width:80px;/*设置元素宽度为80px*/height:28px;/*设置高度为28px*/line-height:28px;/*设置行距为28px，保留文本。
文本位于每行的中心*/background:red;/*设置元素背景为红色*/color:#FFF;/*文本颜色为白色*/margin:5px10px;font-size:12px;/*使用12号字体*/display:block;/*这一点更为关键，因为它本身就是一个“级联”元素，因此它没有块级成员资格的宽度或高度。
用这个来改变宽度和高度的设置就可以了*/text-align:center;/*居中文本*/text-decoration:none;/*去掉线条*/}结果如图5。
然后我们添加一些交互，以便当访问者将鼠标悬停在该元素上时，该元素应该与其他元素不同。
为了实现这一点，我们需要使用悬停伪类。
将以下代码添加到样式中。
.navullia:hover{/*表示当鼠标放在元素上时，元素的样式将会改变，代码如下*/width:78px;高度：26像素；行高：28像素。
border:1pxsolidred;color:red;background:#FFF;}测试结果如图六所示。
最后我们稍微修改一下代码。
navul{width:980px;margin:0pxauto;height:38px;padding:0;}.navulli{浮动：左;}.navullia{宽度h:80px，高度：28px;行高：28像素；背景：红色；颜色：#FFF；边距：5像素x10像素；字体大小：12像素；显示：块；文本对齐方式：居中；文本-​​装饰：无;}.navullia：悬停{宽度：78px;高度：26像素；行高：28px；边框：1pxsolidred；颜色：红色；背景：#FFF；}看看影响，成功了吗？思路是这样的，你可以添加一些自己的元素，比如背景图片等，效果会更好。