您的位置：首页 > Web前端 > HTML

使用ul实现下拉列表

2016-12-26 18:03 176 查看

使用ul实现下拉列表

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>使用ul实现下拉列表</title>

<style>

*{margin:0px; padding:0px;}//清除默认
ul{
width:520px; //设置ul宽
height:30px; //设置ul高
list-style:none;//去除ul前面的点
}
ul li{
width:64px;
height:30px;
border:1px solid #000; //设置边框
float:left; //设置浮动
line-height:30px; //设置文本垂直居中

text-align:center;//设置文本水平居中

}
ul li ul{
width:65px;
height:95px;
background:#F00;
display:none;//将二级菜单初始隐藏
}
ul li:hover ul{
display:block;//使用hover，当鼠标移动到对应的一级菜单上是显示二级菜单
}

</style>

</head>

<body>
<ul>

<li>浮动1

<ul>

<li>二级1</li>

<li>二级2</li>

<li>二级3</li>

</ul>

</li>

<li>浮动2

<ul>

<li>二级1</li>

<li>二级2</li>

<li>二级3</li>

</ul>

</li>

<li>浮动3</li>

<li>浮动4</li>

<li>浮动5</li>

</ul>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 下拉列表 HTML ul

相关文章推荐

新的分享

章节导航