你不该把浮动的属性加到A上面,因为这样的话他会默认所有的A标签都会出现到一个位置,就是最顶部位置。然后我们看到的是他们叠加在一起了的效果。
所以你要把这个属性赋给他上面父级,这样就能让这个DIV里面的所有内容都为浮动,你的效果不就达到了?下面是我修改的代码和代码最后样式
#wrapper{float:left; width:130px;height:30px; border:1px solid #e3e3e3; }
#nav{ background-color:#fff;position:absolute;z-index:9999;}
#nav ul{ margin:0 auto; padding:0; width:130px;list-style:none;background-color:#fff; height:25px;}
#nav ul li{ float:left; position:relative;}
#nav ul li a{width:100px; padding:0px 0px 0px 20px ;line-height:25px; display:block; background-color:#fff; ; text-decoration:none; border-left:1px solid #fff;}
#nav ul li a:hover{ background-color:#7DD1CF; color:#fff;}
#nav ul li span{ display:none; padding-bottom:1px; position:absolute; left:0; top:25px; background-color:#7DD1CF;}
因为设置了absolute了,所以a标签都出现在了同一个位置,所以看起来就只显示两个。
设置position:relative就可以看到全部的了。
还有,你的html代码,多了一个div的结束标签。而且那里也打错了,不是ui。目前,不会影响效果,但还是要注意点这种细节。