<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.menu {
height: 5%;
width: 100%;
background-color: #0d77b6;
position: absolute;
}
.nav {
height: 90%;
width: 15%;
top: 5%;
left: 0;
bottom: 5%;
background-color: #859AF2;
position: fixed;
}
.content {
width: 85%;
height: 90%;
top: 5%;
left: 15%;
bottom: 5%;
background-color: white;
position: absolute;
overflow: auto;
z-index: 2;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
}
.top {
position: fixed;
top: 0;
left: 0;
}
.menu ul li {
height: 50px;
width: 200px;
}
.main {
margin-top: 2.5%;
}
.micro-menu{
background-color: maroon;
height: 100%;
width: 10%;
float: right;
margin-right:20px;
background-color: red;
cursor: pointer;
}
.micro-menu:HOVER{
background-color: #3385FF;
}
.micro-menu-item{
position: relative;
left: 230px;
bottom: 321px;
background-color: red;
z-index: 101;
}
</style>
</head>
<body>
<div class="menu top">top</div>
<div class="menu bottom">
<div class="micro-menu">
</div>
<div class="micro-menu-item">
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
<li>菜单5</li>
</ul>
</div>
</div>
<div class="main">
<div class="nav">nav</div>
<div class="content">
<p>11111111112</p>
<p>11111111111</p>
<p>11111111111</p>
</div>
</div>
</body>
</html>
