## 案例：水平方向的下拉式导航栏
~~~
<style>
*{
margin: 0;padding: 0;
}
li{list-style: none;}
.row:after{
content: "";
display: table;
clear: both;
}
</style>
<ul class="nav row">
<li><a href="javascript: ;">新闻</a></li>
<li><a href="javascript: ;">hao123</a></li>
<li><a href="javascript: ;">地图</a></li>
<li><a href="javascript: ;">视频</a></li>
<li><a href="javascript: ;">贴吧</a></li>
<li><a href="javascript: ;">学术</a></li>
<li><a href="javascript: ;">登录</a></li>
<li class="drop">
<a href="javascript: ;">设置</a>
<ul class="drop_down">
<em></em>
<i></i>
<li><a href="javascript: ;">搜索设置</a></li>
<li><a href="javascript: ;">高级搜索</a></li>
<li><a href="javascript: ;">关闭预测</a></li>
<li><a href="javascript: ;">隐私设置</a></li>
</ul>
</li>
</ul>
~~~
> 注意图中的向上三角，它的实现方式可参照下例：
~~~
<style>
.box{
width: 0px;
height: 0px;
border-left: 100px solid red;
border-top: 100px solid green;
border-right: 100px solid yellow;
border-bottom: 100px solid gray;
}
</style>
<div class="box"></div>
~~~
效果如下：
#### 解决方案：使用了float布局，position定位，代码如下：
~~~
/*css样式如下：*/
li{list-style: none;}
.nav>li{/*使li标签分开排列在同一行*/
padding: 0 16px;
line-height: 50px;
float: left;
}
.drop_down>li>a{
text-decoration: none;
}
.drop{
position: relative;
}
.drop_down{/*绝对定位使得其位于“设置”的正下方*/
width: 96px;
position: absolute;
top: 52px;
left: -17px;
box-sizing: border-box;
border: 1px solid #d1d1d1;
box-shadow: 1 1 5 #d1d1d1;
display: none;
}
.drop_down>li{
font-size: 13px;
padding: 0 20px;
line-height: 42px;
}
.drop:hover .drop_down{
display: block;
}
.drop_down>li:hover{
background: #338fff;
}
.drop_down>em{/*伪元素，用来设置向上的三角*/
content: "";
display: block;
border: 8px solid transparent;
border-bottom-color: #d1d1d1;
position: absolute;
top: -17px;
left: 40px;
}
.drop_down>i{/*伪元素，用来装饰向上的三角*/
content: "";
display: block;
border: 8px solid transparent;
border-bottom-color: #ffffff;
position: absolute;
top: -16px;
left: 40px;
}
~~~
