Tạo Drop Menu đơn giản có thanh tìm kiếm

#topmenu{background:#545454; color:#fff;width:850px;margin:auto;padding:5px;height:20px;z-index:30;}
#topmenu1{width:650px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px;    text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu {    list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center;    position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto;    position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px;    }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px;    line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0;    float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}

• width:850px là chiều rộng của menu thường ứng với chiều rộng của blogspot.
• width:200px là chiều rộng của ô tìm kiếm
• width:650px là chiều rộng phần chứa các Sub menu thường bằng width:850px -width:200px

<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML92' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Tìm kiếm bài viết ...&quot;;}' onfocus='if (this.value == &quot;Tìm kiếm bài viết ...&quot;) {this.value = &quot;&quot;}' tabindex='7' type='text' value='Tìm kiếm bài viết ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='http://tanchau123.blogspot.com/'/>
</form></div>
<div style='clear:both'/>
</div>

• Bạn có thể thay chữ Tìm kiếm bài viết ... bằng chữ bạn muốn. Lưu ý thay cả 3 chữ thì khi click chuột vào mới có hiệu ứng rolover.
• Thay địa chỉ (URL) blog http://tanchau123.blogspot.com/ thành địa chỉ (URL) blog của bạn.

<ul class="menu">
<li class="drop0"><a href="http://tanchau123.blogspot.com/">Home</a></li>
<li class="drop0"><a href="http://tanchau123.blogspot.com/2012/02/trao-oi-lien-ket-blog-web.html">Liên Kết</a></li>
<li class="drop0"><a href="http://tanchau123.blogspot.com/p/thu-thuat-blog.html">Thủ Thuật Blog</a></li>

<li><a href="#" class="drop">Drop menu 1</a>
<div class="drop1">
<ul>
<li><a href="#">Drop menu 1.1</a></li>
<li><a href="#">Drop menu 1.2</a></li>
<li><a href="#">Drop menu 1.3</a></li>
<li><a href="#">Drop menu 1.4</a></li>
</ul>
</div></li>

<li><a href="#" class="drop">Drop menu 2</a>
<div class="drop2">

<div class="col">
<h3>Drop menu 2.1.1</h3>
<ul>
<li><a href="#">Drop menu 2.1.2</a></li>
<li><a href="#">Drop menu 2.1.3</a></li>
<li><a href="#">Drop menu 2.1.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.2.1</h3>
<ul>
<li><a href="#">Drop menu 2.2.2</a></li>
<li><a href="#">Drop menu 2.2.3</a></li>
<li><a href="#">Drop menu 2.2.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.3.1</h3>
<ul>
<li><a href="#">Drop menu 2.3.2</a></li>
<li><a href="#">Drop menu 2.3.3</a></li>
<li><a href="#">Drop menu 2.3.4</a></li>
</ul>
</div>

<div class="col">
<h3>Drop menu 2.4.1</h3>
<ul>
<li><a href="#">Drop menu 2.4.2</a></li>
<li><a href="#">Drop menu 2.4.3</a></li>
<li><a href="#">Drop menu 2.4.4</a></li>
</ul>

</div></div></li></ul>

• Thay dấu # là liên kết tới bài viết, nhãn hoặc trang của bạn.
• Thay các phần màu xanh là các nhãn, bài viết trên menu chính.
• Thay phần màu cam là các tiêu đề trong phần Sub menu xổ xuống.
• Bạn có thể thêm các Sub menu drop bằng cách thêm các phần màu xanh da trời và xanh lá cây vào ngay trước thẻ </ul>