css中一个div可以同时设置左浮动和相对定位？_html/css_WEB-ITnose

                
网站首页                	
                    	                    	
域名查询
                    	
管理域名记录                        	
                            	                            	
域名查询
                                
管理域名记录
                                
域名查询
                                
管理域名记录
                                
域名查询
                            
                        
                        
域名查询
                    	
管理域名记录
                        
域名查询
                	
                
                
产品介绍
                
新闻资讯
                
成功案例
                
解决方案
                
关于我们
                
客户服务专区
            

回复讨论(解决方案)

推荐你使用Twitter的bootstrap框架，这样的导航很好解决的,网址：http://wrongwaycn.github.com/bootstrap/docs/

    
      
                
关于我们                              
            
标准
            
教程
            
技术文章
            
常见问题
            
布局教程专题布局教程专题布局教程专题布局教程专题布局教程专题
            
CSS菜单
            
浏览器兼容
            
滚动条相关
            
圆角矩形专题
            
CSS特效欣赏专题
          
                  
        
公司荣誉
                
关于我们关于我们                              
            
标准
            
教程
            
技术文章
            
常见问题
            
布局教程专题
            
CSS菜单
            
浏览器兼容
            
滚动条相关
            
圆角矩形专题
            
CSS特效欣赏专题
          
                  
        
人才招聘
        
联系我们
      
    
      

#topnavall, #topnav, #topnav ul, #topnav ul li, #topnav ul li a { overflow:visible; }#topnavall { float:left; width:900px; padding-top:200px; }#topnav { width:900px; height:20px; background:#f7f7f7; }#topnav ul ul { visibility:hidden; height:auto; position:absolute; background:#FFF; padding:0; margin:0; filter:alpha(opacity=90); -moz-opacity:0.9;opacity:0.9; }#topnav ul ul { width:120px; left:0; top:20px; line-height:normal; }#topnav li { position:relative; z-index:500; float:left; display:block; height:20px; line-height:20px; padding:0 10px; }#topnav table { _margin-top:-5px; }#topnav ul li a { _overflow:hidden; display:inline-block; height:20px; line-height:20px; }#topnav ul li a:hover { border-bottom: solid 0px #000; overflow:visible; }#topnav li:hover ul, #topnav a:hover ul { visibility:visible; line-height:normal; }#topnav ul li ul li { width:auto; float:none; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }#topnav ul li ul li a { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #fafafa; border-bottom-color:#eee; border-top-color:#fafafa; background:#f3f3f3; }#topnav ul li ul li a:hover { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #F90; border-bottom-color:#eee; border-top-color:#fafafa; background:#eee; }

一个例子 你自己看下 浏览器兼容也做好了。如果你要横向排列只要 更改这里 #topnav ul li ul li { width:auto; float:left; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }

要实现相对定位有一个条件，就是他的前一个元素不能是默认的定位，也就是说把他的父元素改成不是默认的定位属性就可以实现相对定位

li 本身 float：left

li 里面弄个 div 实现 position：relative


也就是 li 完全只承担了 float：left的功能