好久不弄css导航条,这里再布一下

<ul class="horizental"> <li>4<ul> <li>2</li> <li>5<ul> <li>6</li> <li>7</li> </ul></li> <li>2</li> <li>2</li> </ul></li> <li><span>3</span></li> <li>1</li> <li>1</li> </ul>	.horizental li{ margin:0 2px; list-style-type:none; } *{ } ul li{ padding:0 0; margin:0 0; } .horizental li{ float:left; display:block; width: 50px; } .horizental li>ul{ display:none; background-color:green; } .horizental ul li{ border: 1px solid red; } .horizental li:hover>ul{ display:block; }
	这个行为主要还是 li>ul 每一层下的ul都是hidden的,而hover下,只显示当前层下第一级ul,这样就是效果了. 根直属第一层是float:left; 达到水平的效果.