Ảnh minh họa

Demo
DEMO
☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào thiết kế
3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
4- Thêm đoạn code sau vào trước thẻ ]]></b:skin>
ul.topnav { list-style: none; padding: 0 20px; margin: 0; width: 100%; float: left; background: #222; font-size: 1.2em; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqVYHEz7y0OgbK-oPFUnQGndc3BCGMprkrVP6tlbWJIevIDGfkYqj8VpwxIGvEMi5pUvQGLBOzaxrxC__1LZV-ZPCzCT2LPPGIihQYbB6v6EBGmo20kZJn3pmnJvt_2hZRwiYB5dI95MeD/s35/topnav_bg.gif) repeat-x; z-index:100} ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; z-index:100} ul.topnav li a{ padding: 10px 5px; color: #F5FFFA; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAp_XIe9uNgho3DoI2j4UkSYJHx3xT5sWvg9EjrLUk_a988VVoVMaClOgC8kGt9cSueIaBxuhPbKDi3PXCUcJfOpgzJHNhT974whl03XYnL6H_aTlfqvfghD32UhdD77aeHoJV4i8EnZQg/s46/topnav_hover.gif) no-repeat center top; z-index:100} ul.topnav li span { width: 17px; height: 35px; float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiViJA9DIRXbephB-mFTUcEJ9DoxIknbmL_ovbzUXkT9z740fQE96Y3ocM8_YSYrxQmV2USYdtDUzVOTGvSmSP6_DCpGDyE7IPHPbKzF-cz2MyDABQasPn7Q8qE3VlxLUd_Ief9cqeL0gPI/s70/subnav_btn.gif) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} ul.topnav li ul.subnav { list-style: none; position: absolute; left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfVUzGqblC9f9gAJ2KI4Zv1lyL9mtiT2sF6AWwzXh2J5emd7I_xZW7-hcXf8Fq_zGv4BSQmWsBswLjsYVHeDFMp4QwHpcBlDK6Jz-bOrJWZziDSQIci-gqPZ76phyphenhyphenVCbJP7Wsh2Au5A4v/s9/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdfVUzGqblC9f9gAJ2KI4Zv1lyL9mtiT2sF6AWwzXh2J5emd7I_xZW7-hcXf8Fq_zGv4BSQmWsBswLjsYVHeDFMp4QwHpcBlDK6Jz-bOrJWZziDSQIci-gqPZ76phyphenhyphenVCbJP7Wsh2Au5A4v/s9/dropdown_linkbg.gif) no-repeat 10px center; } #header img { margin: 20px 0 10px; }5- Thêm đoạn mã sau vào trước thẻ </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script>6- Lưu lại
7- Thêm đoạn code bên dưới vào trước thẻ </header> .
<ul class='topnav'> <li><a href='/'>Home</a></li> <li> <a href='#'>Menu 1</a> <ul class='subnav'> <li><a href='#'>Menu con 1.1</a></li> <li><a href='#'>Menu con 1.2</a></li> <li><a href='#'>Menu con 1.3</a></li> <li><a href='#'>Menu con 1.4</a></li> <li><a href='#'>Menu con 1.5</a></li> </ul> </li> <li> <a href='#'>Menu 2</a> <ul class='subnav'> <li><a href='#'>Menu con 2.1</a></li> <li><a href='#'>Menu con 2.2</a></li> <li><a href='#'>Menu con 2.3</a></li> <li><a href='#'>Menu con 2.4</a></li> <li><a href='#'>Menu con 2.5</a></li> <li><a href='#'>Menu con 2.6</a></li> </ul> </li> <li><a href='#'>Menu 3</a></li> <li><a href='#'>Menu 4</a></li> <li><a href='#'>Menu 5</a></li> <li><a href='#'>Menu 6</a></li> </ul>
- Trong đó:Chúc thành công!
8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện íchHTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vào.
- Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
- Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
- Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
- Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.