css浮动，块级元素转换内行元素，定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>颜色选择器</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<style>
#nav{width:450px;background:red;font-weight:900;line-height:30px}
ul li{float:left;width:80px}
.clear{clear:both}
.content{position:relative;left:50px}
.content span{display:block;height:50px;background:lightblue;width:300px}
.item{background:lightgreen;display:inline-block;height:50px;width:100px}
.item:nth-child(2){position:absolute;left:290px}
.se_menu{display:none}
.menu:hover .se_menu{display:block}
</style>
<div id="nav">
<ul>
<li>目录一</li>
<li>目录二</li>
<li>目录三</li>
<li class="menu">目录四
<ul class="se_menu">
<li>二级目录1</li>
<li>二级目录2</li>
</ul>
</li>
</ul>
<div class="clear"></div>
<div class="about"><p>php中文网是一个牛逼的网站</p></div>
</div>
<div class="content">
<div class="item">PHP</div>
<div class="item">JAVA</div>
<div class="item">PYTHON</div>
<span>javascript</span>
<span>bootstrap</span>
<span>jquery</span>
<div>
</body>
</html>