Dropdown menu với bo tròn góc cho Blogger

Bài viết này mình sẽ giới thiệu một style dropdown menu với hiệu ứng bo tròn góc cho Blogger bằng CSS3. Các bạn có thể xem hình minh họa bên trên. 

Các bạn có thể tạo menu theo 2 cách sau:

Cách 1: Tại trang quản trị blog, các bạn vào Mẫu -> Chỉnh sửa HTML, chèn đoạn code của menu vào vị trí bạn muốn hiển thị (cách này dùng cho những ai có hiểu biết về code và lập trình web).

Cách 2: Vào Bố cục, tạo một tiện ích HTML/JavaScript rồi dán code vào và lưu lại (cách này đơn giản hơn, bất cứ ai cũng có thể làm được dễ dàng).

Dưới đây là code của menu:

<!--Round Corner Dropdown Menu by kjmagic.blogspot.com-->
<style>
 #dtmenu {
 width:800px;
 background:#0874fe;
 border-bottom: 5px solid #1A1A1A;
 border-top: 1px solid #1A1A1A;
 clear: both;
 overflow: hidden;
-moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000;
box-shadow: 2px 3px 5px #000000;
border:none 5px #000000;
-moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px;
-moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px;
-webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px;
-webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px;
border-top-left-radius:16px;
border-top-right-radius:16px;
border-bottom-left-radius:16px;
border-bottom-right-radius:16px;
 }
 #dtmenu ul {
 float: left;
 width: 100%;
 }
 #dtmenu li {
 float: left;
 list-style-type: none;
 }
 #dtmenu li a {
 background:#0874fe;
 color: #fff;
 display: block;
 font-size: 14px;
 padding: 5px 17px 5px 15px;
 position: relative;
 text-decoration: none;
 }
 #dtmenu li a:hover {
 background:#0874fe;
 color: #fff;
 }
 #dtmenu li li a {
 background: none;
 background-color: #c32751;
 border: 1px solid #1A1A1A;
 border-top-width: 0;
 color: #fff;
 font-size: 14px;
 padding: 5px 10px;
 position: relative;
 text-transform: none;
 width: 130px;
 }
 #dtmenu li li a:hover {
 background: none;
 background-color: #111111;
 }
 #dtmenu li ul {
 height: auto;
 left: -9999px;
 margin: 0 0 0 -1px;
 position: absolute;
 width: 160px;
 z-index: 9999;
 }
 #dtmenu li:hover ul {
 left: auto;
 }
</style>
<a style=" font-size:2px; color:#eeeeee; text-decoration:none;" href="http://www.đoàntrịnh.vn">Dropdown Menu by đoàntrịnh.vn</a>
<div id="dtmenu">
<li><a href="#">Home</a></li>
<li><a href="#">Sub Menu 1</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 2</a>
 <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</div>
<!--/Round Corner Dropdown Menu by kjmagic.blogspot.com-->

Nếu có hiểu biết về code, các bạn có thể tùy chỉnh màu sắc cho menu trong phần code CSS.

Chúc các bạn thành công !