before實例 (以下拉選單為例)

不知道大家記不記得之前有寫過的，純CSS下拉選單、以及純CSS三角形，這次要結合這兩種方法，還有:before偽元素的效果，做一個範例，如下圖：

以前下拉選單想要有三角形的效果，需要額外再設定一個div，還要切圖，相當麻煩，現在只要設定:before就可以輕輕鬆鬆把三角形放在想要的地方囉!

HTML：
＜body＞
＜div id="menuBox"＞
＜div id="menu"＞
＜!----------------------------第一層----------------------------＞
＜ul class="nav"＞＜li＞＜a href="#"＞最新訊息＜/a＞＜/li＞＜/ul＞

＜!----------------------------第一層----------------------------＞
＜ul class="nav"＞
＜li＞＜a href="#"＞關於公司＜/a＞
＜!--第二層////三角形放置的地方////--＞
＜ul＞
＜li＞＜a href="#"＞公司介紹＜/a＞＜/li＞
＜li＞＜a href="#"＞公司理念＜/a＞ ＜/li＞
＜li＞＜a href="#"＞公業活動＜/a＞＜/li＞
＜li＞＜a href="#"＞來台介紹＜/a＞＜/li＞
＜/ul＞
＜/li＞
＜/ul＞

＜!----------------------------第一層----------------------------＞
＜ul class="nav"＞＜li＞＜a href="#"＞公司架構＜/a＞ ＜/li＞＜/ul＞

＜!----------------------------第一層----------------------------＞
＜ul class="nav"＞＜li＞＜a href="#"＞css語法＜/a＞＜/li＞＜/ul＞

＜/div＞
＜!--END--menu--＞
＜/div＞
＜!--END--menuBox--＞
＜/body＞

CSS設定：
* {
margin:0;
padding:0;
}

#menuBox {
background-color:#B09784;
background-repeat:repeat-x;
height:40px;
}

#menu {
width:800px;
height:40px;
margin:0 auto;
}

/*--第一層--*/
ul.nav {
list-style:none;
}

ul.nav li {
height:40px;
float:left;
margin:0 15px;
line-height:40px;
}

ul.nav li a {
font-size:15px;
color:#ffffff;
text-decoration:none;
}

ul.nav li a:hover {
color:#5e4326;
}


/*--第一層觸發時,第二層狀態--*/
ul.nav li ul {
position:absolute;
visibility:hidden;
list-style:none;
}

ul.nav li:hover ul {
visibility:visible;
background-color:#77624C;
margin-top:-1px;
}

/*--第二層--*/
ul.nav li ul li {
clear:both;
height:32px;
line-height:32px;
margin:0;
}

ul.nav li ul li:hover {
background-color:#e0d0b8;
}

/*--第二層文字連結--*/
ul.nav li ul li a {
display:block;
min-width:130px;
height:32px;
padding:0 18px;

font-size:15px;
color:#ffffff;
text-decoration:none;
}

ul.nav li ul li a:hover {
color:#5e4326;
background-color:#e0d0b8;
}

/*--●●●重點在這裡●●●下拉三角形設定--*/
ul.nav li ul:before {
content:"";

/*三角形定位*/
position:absolute;
top:-10px;
left:20px;
bottom:auto;

/*三角形樣式*/
border:10px solid transparent;
border-top:0;
border-bottom-color:#77624C;
}
:before表示在第二層的ul前面，再插入一個元素，然後再去設定三角形的樣式、定位，就可以不用額外給三角形一個div，輕輕鬆鬆的完成囉～不僅是使用在下拉選單上面，一些不是很主要，裝飾為主的元素，都可以用這樣的方法來製作，就可以省下很多時間喔～


如果需要下拉選單和三角形的範例，可以找之前的文章：
2014-07-08（超實用純CSS無限階層下拉選單）
2014-09-15（不需圖片，純css也能做出三角形ICON）