* {
margin: 0;
padding: 0;
}
.menu {
width: 1050px;
height: 60px;
border: 1px saddlebrown solid;
margin: auto;
background-color: #1B2534;
}
.menu li {
height: 50px;
width: 170px;
/* border: 1px salmon solid; */
float: left;
font-size: 20px;
cursor: pointer;
background-color: #1B2534;
text-align: center;
line-height: 60px;
}
.menu li:hover {
background-color: black;
/* background-color: green; */
}
.menu li a {
color: white;
text-decoration: none;
}
.menu ol > li {
background-color: #142c51;
}
.menu > li > ol {
display: none;
}
.menu > li:hover ol{
display: block;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em,
h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul, ol {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
/*q:before, q:after {
content: ”;
}*/
a, ins {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<title>下拉菜单</title>
</head>
<body>
<ul class="menu">
<li>
<a href="#">百度游戏|乐玩</a>
</li>
<li>
<a href="#">首页</a>
<ol>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</a></li>
</ol>
</li>
<li><a href="#">商城</a>
<ol>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</a></li>
</ol>
</li>
<li><a href="#">页游</a>
<ol>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</a></li>
</ol>
</li>
<li><a href="#">排行榜</a>
<ol>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</a></li>
</ol>
</li>
<li><a href="#">繁星计划</a>
<ol>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
<li><a href="#">子菜单4</a></li>
</ol>
</li>
</ul>
</body>
</html>
