二级菜单导航如何从竖排改为横排

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级导航竖排练习应用css</title>
<style type="text/css">
body{
font:"宋体" ;
}
ul{
width:150px;
margin:0;
padding:0;
list-style-type:none;
border-bottom:1px solid #cccccc;
}
#love li{
position:relative;
}
#love li ul{
display:none;
position:absolute;
left:149px;
top:0;
}
ul li a{
display:block;
height:100%;
padding:5px;
text-decoration:none;
color:#777777;
border:1px solid #cccccc;
border-bottom:0 none;
background:#FFFFFF;
}
#love li:hover ul,#love li.over ul{
display:block;}
</style>
</head>
<body>
<ul id="love">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">团队主创</a></li>
<li><a href="#">团队成员</a></li>
</ul>
</li>
</ul>
</body>
</html>
求高手指点代码如何改

举报该问题

推荐答案推荐于2016-01-16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>二级导航竖排练习应用css</title>
<style type="text/css">
body{
font:"宋体" ;
}
ul{
/*我改的*/
width:350px;
margin:0 auto;
padding:0;
list-style-type:none;
/*我注释的*/
/*border-bottom:1px solid #cccccc;*/
}
#love li{
position:relative;
/*我加的*/
float: left;
}
#love li ul{
display:none;
position:absolute;
/*我改的*/
left:0px;
top:70;
}
ul li a{
display:block;
height:100%;
padding:5px;
text-decoration:none;
color:#777777;
border:1px solid #cccccc;
/*我注释的*/
/*border-bottom:0 none;*/
background:#FFFFFF;
}
#love li:hover ul,#love li.over ul{
display:block;}
</style>
</head>
<body>
<ul id="love">
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a>
<ul>
<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>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">团队主创</a></li>
<li><a href="#">团队成员</a></li>
</ul>
</li>
</ul>
</body>
</html>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://55.wendadaohang.com/zd/IcGc4cRFFIGQF8FcLLG.html

其他回答

第1个回答 2014-02-01

用float浮动的做浮动就可以啦，如果只要一级菜单横向就给id=love的ul的子级加个class设置做浮动，如果一级二级都要横向的话就直接给id=love的子级设置浮动就可以了

相似回答

大家正在搜