主要用到的知识ul和li标签
ul li 是一个组合：是无序列表标签，在实际中用的非常多，
与之对应的是有序列表：ol li
li是不能单独使用，必须在于ul之中的
ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#nav {
600px;
height: 40px;
margin: 0 auto;
}
#nav ul {
list-style: none;
}
#nav ul li {
float: left;
line-height: 40px;
text-align: center;
position: relative;
}
#nav ul li a {
text-decoration: none;
color: #000;
display: block;
padding: 0px 10px;
}
#nav ul li a:hover {
color: #FFF;
background: #333
}
#nav ul li ul {
position: absolute;
display: none;
}
#nav ul li ul li {
float: none;
line-height: 30px;
text-align: left;
}
#nav ul li ul li a {
100%;
}
#nav ul li ul li a:hover {
background-color: #06f;
}
#nav ul li:hover ul {
display: block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">Oracle</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">mongodb</a></li>
<li><a href="#">redis</a></li>
</ul>
</li>
<li><a href="#">个人中心</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>