请大家帮我看一下我这段代码中的ul和a为什么不能显示在同一行中。_html/css_WEB-ITnose

我现在用ul做了一个横向菜单，想把它放在“home”连接的右边，但我发现它运行时ul菜单始终会换行，是不是css出了问题，请大家给我指教一下，谢谢。建议用firefox浏览器运行。










Home

|

• menu1
  
  
  
  • test1
  
  
  • test2
  
  
  • test3
  
  
  • test4
  
  
  
  


• menu2
  
  
  
  • test5
  
  
  • test6
  
  
  
  

回复讨论(解决方案)

在线等，请大家帮忙。

ul是块级元素，当然会换行，你可以强制它inline，其它自己调吧。
ul { display:inline}

把css的最后一行改成li:hover ul,.over ul { display:inline;}也不行，没办法只能用类似下面的坐标定位来调整了：
ul{
position:absolute;
top: 10px;
margin-left:100px;
}

            
            Home            |       
    
menu1        
            
test1
            
test2
            
test3
            
test4
        
    
    
menu2        
            
test5
            
test6
        
    

这是在你写的基础上改的。

oNA_na:你的代码可以把位置调整，但也带来了新的问题，在后面的代码在鼠标移到菜单上去就会向右浮动。代码如下：

• menu1
  
  
  
  • test1
  
  
  • test2
  
  
  • test3
  
  
  • test4
  
  
  
  


• menu2
  
  
  
  • test5
  
  
  • test6
  
  
  
  

test data 3 test data 3 test data 3test data 3 test data 3 test data 3test data 3 test data 3 test data 3

这个定位问题很棘手也很急，我实在想不出来好的办法了，请大家帮忙。

我重新修改了一下css代码，定位正常了，但鼠标移到菜单上后面的元素就会往后移。

															
							Home						    |			   		
		
			
menu1				
					
test1
					
test2
					
test3
					
test4
				
			
			
menu2 				
					
test5
					
test6
   				
			
	 		
					
					test data 1	test data 1	test data 1	test data 1	test data 1	test data 1			
			test data 2				
		test data 3	test data 3	test data 3test data 3	test data 3	test data 3test data 3	test data 3	test data 3	

通过relative定位应该可以达到要求吧。

在上面代码的基础上，我改了一下。

lichuny257,你的代码可用，可以用纯css实现此效果吗？