## 案例：水平方向的下拉式導航欄
~~~
<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;
}
~~~
