console
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="viewDiv">
<ul class="nav">
<li>
<a href="" target="_blank">
基本工具<span class="triangle">▼</span></a>
<ul>
<li><a href="#" target="_blank">
飞行模式 <span class="triangle">▶</span>
</a>
<ul>
<li><a href="">线路飞行</a></li>
</ul>
</li>
<li><a href="">
2D/3D转换 <span class="triangle"></span></a>
</li>
</ul>
</li>
<li><a href="">编辑工具<span class="triangle">▼</span></a>
<ul>
<li><a href="">
点 <span class="triangle"></span></a>
</li>
<li><a href="">
线 <span class="triangle"></span></a>
</li>
<li><a href="">
面 <span class="triangle"></span></a>
</li>
</ul>
</li>
<li><a href="">定量分析<span class="triangle">▼</span></a>
<ul>
<li><a href="">面积量算</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
ul{
list-style-type:none;
}
.triangle{
font-size: 1em;
color: black;
}
a{
text-decoration:none;
text-align: left;
font-weight: bold;
}
ul.nav{
float: left;
margin-left: 10%;
margin-top:10px;
border-radius: 4px;
position: fixed;
}
ul.nav li{
float: left;
width: 9em;
background-color:white;
}
ul.nav a{
display: block;
color: black;
line-height: 1.5em;
padding: 5px;
}
ul.nav a:hover,
ul.nav a:focus{
color: black;
background-color: #D8D8D8;
opacity: 0.5;
}
ul.nav li:first-child a{
border-left: 0;
border-bottom: 0;
}
ul.nav li:last-child a{
border-right: 0;
border-bottom: 0;
}
ul.nav li ul{
width: 10em;
position: absolute;
left: -1000em;
}
ul.nav li:hover ul{
width: 10em;
left:auto;
}
ul.nav li ul a{
border-top: 1px solid white;
border-bottom: 1px solid white;
border-left: 0;
border-right: 0;
}
ul.nav li:hover ul li ul{
width: 10em;
position: absolute;
left: -1000em;
}
ul.nav li:hover ul li:hover ul{
left: auto;
margin-left: 9.1em;
margin-top: -2.1em;
}
ul.nav li:hover ul li:hover ul.nav1{
left: auto;
margin-left: -9.1em;
margin-top: -2.1em;
}