Menu ngang xổ dọc xuống nhiều cấp

Đây là menu ngang xổ dọc nhiều cấp có thể thay đổi màu nền tùy thích sử dụng CSS kết hợp Javascript.Hình thức cũng đẹp rất thuận tiện cho blog có nhiều nhãn nhất là blog sử dụng nhãn mẹ nhãn con nhãn cháu vvv

Xem demo

DEMO

Làm thế nào để thêm menu này vào blogger

1- Đăng nhập blog
2- Vào thiết kế
3- Vào bố cục
4- Chọn thêm 1 tiện ích HTML/Javascrip và dán đoạn code sau vào và lưu lại.Còn bố trí tiện ích này ở đâu là tùy theo yêu cầu của blog.

<script src='http://blogdautocrazy.googlecode.com/files/dd-level-menu.js'

type='text/javascript'></script>

<style type="text/css">

.ddsubmenustyle, .ddsubmenustyle div {

/*topmost and sub DIVs, respectively*/

font: normal 13px Verdana;

margin: 0;

padding: 0;

position: absolute;

left: 0;

top: 0;

list-style-type: none;

background: white;

border: 1px solid black;

border-bottom-width: 0;

visibility: hidden;

z-index: 100;

}



.ddsubmenustyle ul {

margin: 0;

padding: 0;

position: absolute;

left: 0;

top: 0;

list-style-type: none;

border: 0px none;

}



.ddsubmenustyle li a {

display: block;

width: 170px;

/*width of menu (not including side paddings)*/

color: black;

background-color: lightyellow;

text-decoration: none;

padding: 4px 5px;

border-bottom: 1px solid black;

margin-top:-1px

}



* html .ddsubmenustyle li {

/*IE6 CSS hack*/

display: inline-block;

width: 170px;

/*width of menu (include side paddings of LI A*/

}



.ddsubmenustyle li a:hover {

background-color: black;

color: white;

}



.downarrowpointer {

/*CSS for "down" arrow image added to top menu items*/

padding-left: 4px;

border: 0;

}



.rightarrowpointer {

/*CSS for "right" arrow image added to drop down menu items*/

position: absolute;

padding-top: 3px;

left: 100px;

border: 0;

}



.ddiframeshim {

position: absolute;

z-index: 500;

background: transparent;

border-width: 0;

width: 0;

height: 0;

display: block;

}

.mattblackmenu ul {

margin: 0;

padding: 0;

font: bold 12px Verdana;

list-style-type: none;

border-bottom: 1px solid gray;

background: #414141;

overflow: hidden;

width: 100%;

}



.mattblackmenu li {

display: inline;

margin: 0;

}



.mattblackmenu li a {

float: left;

display: block;

text-decoration: none;

margin: -1px;

padding: 6px 8px;

/*padding inside each tab*/

border-right: 1px solid white;

/*right divider between tabs*/

color: white;

background: #414141;/* Màu nền menu */

}



.mattblackmenu li a:visited {

color: white;

}



.mattblackmenu li a:hover {

background: black;

/*background of tabs for hover state */

}



.mattblackmenu a.selected {

background: black;

/*background of tab with "selected" class assigned to its LI */

}

</style>

<div id="ddtopmenubar" class="mattblackmenu">

<ul>

<li>

<a href="#">LINK1</a>

</li>

<li>

<a href="#" rel="ddsubmenu1">LINK2</a>

</li>

<li>

<a href="#" rel="ddsubmenu2">LINK3</a>

</li>

<li>

<a href="#">Link4</a>

</li>

<li>

<a href="#" rel="ddsubmenu3">LINK5</a>

</li>

</ul>

</div>

<script type="text/javascript">

ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")

</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>

<li>

<a href='#'>LINK2 ITEM 1</a>

</li>

<li>

<a href='#'>LINK2 ITEM 2</a>

<ul>

<li>

<a href='#'>LINK2 ITEM 2.1</a>

</li>

<li>

<a href='#'>LINK2 ITEM 2.2</a>

</li>

</ul>

</li>

<li>

<a href='#'>LINK2 ITEM 3</a>

<ul>

<li>

<a href='#'>LINK2 ITEM 3.1</a>

</li>

</ul>

</li>

<li>

<a href='#'>LINK2 ITEM 4</a>

</li>

</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>

<li>

<a href='#'>LINK3 ITEM 1</a>

</li>

<li>

<a href='#'>LINK3 ITEM 2</a>

</li>

<li>

<a href='#'>LINK3 ITEM 3</a>

<ul>

<li>

<a href='#'>LINK3 ITEM 3.1</a>

</li>

<li>

<a href='#'>LINK3 ITEM 3.2</a>

</li>

<li>

<a href='#'>LINK3 ITEM 3.3</a>

</li>

<li>

<a href='#'>LINK3 ITEM 3.4</a>

</li>

</ul>

</li>

<li>

<a href='#'>LINK3 ITEM 4</a>

</li>

<li>

<a href='#'>LINK3 ITEM 5</a>

<ul>

<li>

<a href='#'>LINK3 ITEM 5.1</a>

</li>

<li>

<a href='#'>LINK3 ITEM 5.2</a>

<ul>

<li>

<a href='#'>LINK3 ITEM 5.2 1</a>

</li>

<li>

<a href='#'>LINK3 ITEM 5.2 2</a>

</li>

<li>

<a href='#'>LINK3 ITEM 5.2 3</a>

</li>

</ul>

</li>

</ul>

</li>

<li>

<a href='#'>LINK3 ITEM 6</a>

</li>

</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>

<li>

<a href='#'>LINK5 ITEM 1</a>

</li>

<li>

<a href='#'>LINK5 ITEM 2</a>

</li>

<li>

<a href='#'>LINK5 ITEM 3</a>

</li>

<li>

<a href='#'>LINK5 ITEM 4</a>

</li>

<li>

<a href='#'>LINK5 ITEM 5</a>

</li>

</ul>