console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海贼</title>
</head>
<body>
<div class="box">
<div class="nav">
<div class="logo">
<img src="https://www.haizeix.com/files/system/2017/06-25/151022e72ce7760444.png">
</div>
<ul class="nav-list">
<li class="nav-hover">
<a href="http://haizeix.com">潘多拉魔盒 <b class="caret"></b></a>
<ul class="menu">
<li><a href="https://nanti.jisuanke.com/" target="_blank">计蒜客（在线交互式编码）</a></li>
<li><a href="https://www.nowcoder.com/" target="_blank">牛客网（面试真题测评）</a></li>
<li><a href="https://projecteuler.net" target="_blank">ProjectEuler（英文原站）</a></li>
<li><a href="http://pe-cn.github.io/" target="_blank">ProjectEuler（中英对照）</a></li>
<li><a href="https://leetcode-cn.com/" target="_blank">Leetcode（在线刷面试算法）</a></li>
<li><a href="http://en.cppreference.com/w/" target="_blank">C/CPP 参考手册（在线文档+运行环境）</a></li>
<li><a href="https://oschina.gitee.io/learn-git-branching/" target="_blank">Git 操作在线学习</a></li>
</ul>
</li>
<li class="nav-hover">
<a href="https://www.jisuanke.com/plan?object=%E5%85%B6%E4%BB%96&subobject=%E6%B5%B7%E8%B4%BC%E5%AE%9D%E8%97%8F" target="_blank">计蒜客（海贼宝藏） <b class="caret"></b></a>
<ul class="menu">
<li><a href="https://www.jisuanke.com/course/786" target="_blank">C语言程序设计</a></li>
<li><a href="https://www.jisuanke.com/course/787" target="_blank">C++程序设计</a></li>
<li><a href="https://www.jisuanke.com/course/788" target="_blank">Python程序设计</a></li>
<li><a href="https://www.jisuanke.com/course/789" target="_blank">工程实践基础</a></li>
<li><a href="https://www.jisuanke.com/course/790" target="_blank">面向对象编程（轮子哥）</a></li>
<li><a href="https://www.jisuanke.com/course/791" target="_blank">操作系统入门与系统编程</a></li>
<li><a href="https://www.jisuanke.com/course/792" target="_blank">数据结构</a></li>
<li><a href="https://www.jisuanke.com/course/799" target="_blank">求职算法辅导</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
vertical-align: top;
}
body {
background-color: yellow;
}
li {
list-style-type: none;
}
a {
color: black;
text-decoration: none;
}
.logo > img {
width: 200px;
float: left;
margin-right: 20px;
}
.nav > ul {
width: 100%;
height: 100px;
background-color: black;
}
.nav-list > li {
width: 200px;
margin-left: 10px;
display: inline-block;
font-size: 20px;
height: 100px;
line-height: 100px;
overflow: hidden;
}
.nav-list > li:hover {
overflow: visible;
}
.nav-hover > a {
color: white;
}
.caret {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid white;
border-bottom: 10px solid transparent;
position: absolute;
top: 45px;
}
.nav-hover ul {
width: 400px;
padding-left: 20px;
float: left;
font-size: 20px;
background-color: #fff;
position: relative;
}
.menu li:hover {
background-color: #A6FFA6;
}