[CSS]橫向TreeMenu與置放於下方技巧(Tree Menu and placed in the lateral tips below)

問題

---

詳細教學參考[教學] 如何用純 CSS 製作無限階層的下拉選單？（支援主流瀏覽器）
文中所提及的TreeMenu為放置於頂端的,因此若放於下端的話,子選單無法呈現




解決方法

---

/* 特定在第一層 > 第二層之後下拉部分之樣式 */
body, ul.navigation, ul.navigation li, ul.navigation ul, a
{
 margin: 0;
 padding: 0;
 font-size: 13px;
 text-decoration: none;
}

ul.navigation, ul.navigation li
{
 list-style: none;
}

ul.navigation li
{
 position: relative;
 float: left;
}
/* 選單 li 裡面連結之樣式 */
ul.navigation li a
{
 display: block;
 padding: 12px 20px;
 background: #888;
 color: #FFF;
}
/* 特定在第一層，以左邊灰線分隔 */
ul.navigation > li > a
{
 border-bottom: 1px solid #CCC;
 border-left: 1px solid #CCC;
}

ul.navigation > li > a:hover
{
 color: #666;
 background: #DDD;
}

/* 特定在第一層 > 第二層之後下拉部分之樣式 */
ul.navigation li ul
{
 display: none;
 float: left;
 /*position: absolute;*/
 position:absolute;
 bottom:39px;
 left: 0;
 margin: 0;
}
/* 當第一層選單被觸發時，指定第二層顯示 */
ul.navigation li:hover > ul
{
 display: block;
}
/* 特定在第二層或之後下拉部分 li 之樣式 */
ul.navigation ul li
{
 border-bottom: 1px solid #DDD;
}
/* 特定在第二層或之後下拉部分 li （最後一項不要底線）之樣式 */
ul.navigation ul li:last-child
{
 border-bottom: none;
}

/* 第二層或之後 選單 li 之樣式 */
ul.navigation ul a
{
 width: 120px;
 padding: 10px 12px;
 color: #666;
 background: #EEE;
}

ul.navigation ul a:hover
{
 background: #CCC;
}
/* 第三層之後，上一層的選單觸發則顯示出來（皆為橫向拓展） */
/*ul.navigation ul li:hover > ul
{
 display: block;
 position: absolute;
 bottom:72px;

 top: 0;
 left: 100%;
}*/

/* 箭頭向下 */
.arrow-bottom
{
 display: inline-block;
 margin-left: 5px;
 /*border-top: 4px solid #FFF;*/
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
 border-bottom: 4px solid #FFF;
 width: 1px;
 height: 1px;
}
/* 箭頭向右 */
.arrow-right
{
 display: inline-block;
 margin-left: 12px;
 border-top: 3px solid transparent;
 border-bottom: 3px solid transparent;
 border-left: 3px solid #666;
 width: 1px;
 height: 1px;
}