如何創建一個垂直導航菜單？

Here is a menu using HTML and CSS. 菜單項水平放置，子菜單使用垂直佈局。主菜單項目應該如何更改爲垂直佈局？如何創建一個垂直導航菜單？

<ul> 
    <li> 
    <a>item1</a> 
    <ul> 
     <li><a>subitem1</a></li> 
     <li><a>subitem1</a></li> 
     <li><a>subitem1</a></li> 
    </ul> 
    </li> 
</ul>

來源

2013-10-19 TDJSS

哦對不起，請檢查此頁http://jsfiddle.net/DqvxR/190/ – TDJSS

這不太適合問答格式。反正訪問這個鏈接並複製http://www.cssdrive.com/index.php/menudesigns/category/C19/你想要的菜單 – ankit

你可以從谷歌下載預開發的菜單，並研究它們使你自己。或者使用它們。其中一個是：http://cssmenumaker.com/ –

你必須做一些小的改變，它將作爲垂直工作。而當你尋找更多風格來添加它時，你可以輕鬆完成。

檢查這個小提琴CLICK HERE

#menu 
{ 
    width: 120px;/*change width*/ 
} 
#menu li 
{ 

    display: block; /*keep it block*/ 
    } 
#menu ul 
{ 

    top: 0; /*change this */ 
    left: 100%; /*change this */ 
} 
#menu ul li:first-child > a:after 
{ 
    content: ''; 
    position: absolute; 
    left:-13px; /* change this*/ 
    top:7px; /* change this*/ 
    width: 0; 
    height: 0; 
    border: 5px solid transparent; /* change this*/ 
    /*border-right: 5px solid transparent;*/ /*don't need this*/ 
    border-right: 8px solid #444; /* change this*/ 
} 

#menu ul li:first-child a:hover:after 
{ 
    border-right-color: #04acec; /* change this*/ 
}

我在評論中寫道改變什麼具體的實現你想要什麼。您可以操作更多

來源

2013-10-19 05:40:48

如何創建一個垂直導航菜單？

回答

相關問題