怎么消除css中的绝对定位重叠问题

html-css013

怎么消除css中的绝对定位重叠问题,第1张

首页打开dreamweaver或其它编辑器,创建一个名为nav的导航菜单

<div class="nav">

<ul>

<li><a href="#">栏目一</a></li>

<li><a href="#">栏目二</a></li>

<li><a href="#">栏目三</a></li>

<li><a href="#">栏目四</a></li>

<li><a href="#">栏目五</a></li>

</ul>

</div>

现在为nav添加样式,首先去掉默认的margin和padding,再去掉<ul><li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:

<style type="text/css">

* { margin:0padding:0}

ul, li { list-style:none}

a { text-decoration:none}

.nav { border:2px solid #cccborder-right:noneoverflow:hiddenfloat:leftmargin:100px 0 0 300px}

.nav ul li { float:left}

.nav

ul li a

{ width:120pxheight:40pxtext-align:centerline-height:40pxdisplay:blockborder-right:2px

solid #cccbackground:#eeecolor:#666}

.nav ul li a:hover{ color:#f00}

</style>

像这样,一个菜单横向菜单就建好了,下面给栏目一,栏目二,栏目三,添加二级下拉菜单

<div class="nav">

<ul>

<li><a href="#">栏目一</a>

<ul>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

</ul>

</li>

<li><a href="#">栏目二</a>

<ul>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

</ul>

</li>

<li><a href="#">栏目三</a>

<ul>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

<li><a href="#">二级栏目</a></li>

</ul>

</li>

<li><a href="#">栏目四</a></li>

<li><a href="#">栏目五</a></li>

</ul>

</div>

添加完二级栏目后,现在开始添加css样式,首先给<li>标签下的<ul>标签添加相对定位,再去除之下<li>标签的做浮动样式,再适当修改<a>标签,如一下样式:

.nav ul li ul { position:absolute}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

接下来隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示,样式如下:

.nav ul li ul { position:absolutedisplay:none}

.nav ul li ul li { float:none}

.nav ul li ul li a { border-right:noneborder-top:1px dotted #cccbackground:#f5f5f5}

.nav ul li:hover ul{ display:block}

至此,横向二级下拉菜单就制作完成了,这里附加上全部代码

我也是刚摸索出来的,这样做:

1、把word里的文的单换行全部变成双换行。(点替换,在—更多,定位到查找内容,点特殊格式—段落标记,也就是^p。然后定位到替换为,点特殊格式—段落标记,再重复一遍,也就是替换为变成^p^p,然后点全部替换。)

2、粘贴到记事本里保存,(显示为每一段后都有一个空行),然后再贴到空间里,发表之后就会看到多余的空行不见了,每段都有了首行缩进!

这也是我折腾了一下午的空间才发现的,希望对你有帮助!

原因不知道嘎~~对于html语言完全无力……

.header .center ul li:last-child:before{

   display:none

}

用 :last-child可以搞定。