DIV CSS 佈局教程網

點擊這裡查看效果
以橫向ddsmoothmenu下來菜單為例，以下是實現代碼：

<link rel="stylesheet" type="text/css" href="http:///keleyi/phtml/menu/6/ddsmoothmenu.css" />
<script type="text/javascript" src="http:///keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http:///keleyi/phtml/menu/6/ddsmoothmenu.js"></script>
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://">Item 1</a></li>
<li><a href="http://">Folder 0</a>
<ul>
<li><a href="http://">Sub Item 1.1</a></li>
<li><a href="http://">Sub Item 1.2</a></li>
<li><a href="http://">Sub Item 1.3</a></li>
<li><a href="http://">Sub Item 1.4</a></li>
<li><a href="http://">Sub Item 1.2</a></li>
<li><a href="http://">Sub Item 1.3</a></li>
<li><a href="http://">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="http://">Folder 1</a>
<ul>
<li><a href="http://">Sub Item 1.1</a></li>
<li><a href="http://">Sub Item 1.2</a></li>
<li><a href="http://">Sub Item 1.3</a></li>
<li><a href="http://">Sub Item 1.4</a></li>
<li><a href="http://">Sub Item 1.2</a></li>
<li><a href="http://">Sub Item 1.3</a></li>
<li><a href="http://">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="http://">Item 3</a></li>
<li><a href="http://">Folder 2</a>
<ul>
<li><a href="http://">Sub Item 2.1</a></li>
<li><a href="http://">Folder 2.1</a>
<ul>
<li><a href="http://">Sub Item 2.1.1</a></li>
<li><a href="http://">Sub Item 2.1.2</a></li>
<li><a href="http://">Folder 3.1.1</a>
<ul>
<li><a href="http://">Sub Item 3.1.1.1</a></li>
<li><a href="http://">Sub Item 3.1.1.2</a></li>
<li><a href="http://">Sub Item 3.1.1.3</a></li>
<li><a href="http://">Sub Item 3.1.1.4</a></li>
<li><a href="http://">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="http://">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http:///menu/javascript/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>
<script type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //橫向設置"h"，豎向為"v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>


豎向的效果圖：