CSS 的下拉菜单，及对CSS的总结
<html>
<head>
<link rel="stylesheet" href="http://www.php.cn/static/layui/css/layui.css">
<style>
* {
margin: 0;
padding: 0;
}
a:link{
text-decoration: none;
}
.header-index {
min-width: 1200px;
background-color: #000;
border: none;
box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
}
.layui-header {
z-index: 1000;
height: 60px;
}
.layui-header {
position: relative;
}
.php-logo {
height: 60px;
}
.php-logo a {
display: block;
height: 60px;
width: 140px;
background: url(http://www.php.cn/static/images/logo.png) no-repeat center center;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background-size: 100%;
}
.header .layui-nav {
position: absolute;
left: 160px;
top: 0;
padding: 0;
background: none;
}
.layui-nav {
position: relative;
padding: 0 20px;
background-color: #393D49;
color: #fff;
border-radius: 2px;
font-size: 0;
box-sizing: border-box;
}
.header .layui-nav .layui-nav-item {
margin: 0 10px;
}
.header .php-user li {
float: left;
line-height: 60px;
width: 60px;
}
.header .php-user li span{
color: rgba(255,255,255,.7);
text-align: center;
display: block;
font-weight: bold;
}
.php-user {
position: absolute;
right: 0;
top: 0;
}
.layui-nav-bar{left: 262px; top: 55px; width: 0px; opacity: 0;}
.dropmenu:hover .layui-nav-child{display:block}
</style>
</head>
<div class="layui-header header header-index">
<div class="layui-col-md3 php-logo">
<a href="javascript:;" target="_self" class="hide-text"></a>
</div>
<ul class="layui-nav php-nav">
<li class="layui-nav-item layui-header-this">
<a href="javascript:;">首页</a>
</li><li class="layui-nav-item ">
<a href="javascript:;" >视频教程</a>
</li>
<li class="layui-nav-item ">
<a href="javascript:;">社区问答</a>
</li>
<li class="layui-nav-item dropmenu">
<a href="javascript:;">编程词典<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child layui-anim layui-anim-upbit">
<dd><a href="javascript:;">php词典</a></dd>
<dd class="layui-show-xs"><a href="javascript:;">技术文章<span class="layui-badge-dot"></span></a></dd>
<dd><a href="javascript:;">jquery词典</a></dd>
<dd><a href="javascript:;">PHP教程</a></dd>
<dd><a href="javascript:;">html词典</a></dd>
<dd><a href="javascript:;">小程序开发</a></dd>
<dd><a href="javascript:;">javascript词典</a></dd>
<dd><a href="javascript:;">HTML教程</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">手册下载</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">工具下载</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">类库下载</a>
</li>
<li class="layui-nav-item">
<a href="javascript:;">特色课程<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item ">
<a href="javascript:;" >菜鸟学堂</a>
</li>
<span class="layui-nav-bar"></span></ul>
<ul class="php-user">
<li><a href="javascript:;"><span id="login">登录</span></a></li>
<li class="php-reg"><a href="javascript:;"><span id="reg">注册</span></a></li>
</ul>
</div>
</html>
总结：html+css 较为简单易学，但是如何把网站做的好看又不会有太多的代码冗余，还是需要不断的参考案例和练习编写。查看php.cn的源代码，发现她用的是layui的框架，非常的简洁，外观也非常的清新。这是个牛逼的网站（扯远了）。
HTML是网站的底层框架，犹如地基，而CSS样式决定了网站的外观。对于css的几个重要点我觉得有如下几个：
盒子模型。有外边距magin,内边距padding,以及border边框，几乎每个元素都可以看作是一个盒子。
float浮动。很多时间都会用到浮动，比如菜单栏，或者把几个块级元素并列排。但是它是脱离文档流的，所以需要用clear来清除浮动影响
position定位。相对定位是对于元素本身，绝对定位是对于父元素。