how to create a horizontal menu with drop tab menu

how to create a horizontal menu with CSS


Horizontal menu has a sub menu or child (children) that make up the menu tabs at the bottom of the horizontal one thing Good menu is only alone Without Using CSS Java script plug in. I use this menu in my theme web templates ....... The menu is very light loading time and not make your website slow Well If you are interested in Horizontal Menu ynag One is you follow the following steps:

1. Log In to your blog's Edit HTML _

2. Check Expand Widget Templates and First Backup your template

3. Find CODE ]]></ b: skin>



Now enter the CSS code!

Under the code you put in this box Before Or Above code ]]></ b: skin>

       #menu {
width: 960px;
height: 40px;
clear: both;
}

ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;  
}

ul#nav li {
display: inline;
}

ul#nav li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;     
}

/* ACTIVE*/
ul#nav .current a, ul#nav li:hover > a  {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #bb0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px; 
}

/* DAFTAR Submenu tersembunyi secara default */
ul#nav  ul {
display: none;
}

/* KETIKA TINGKAT PERTAMA ITEM MENU melayang di, ATAS MENU ANAK MUNCUL */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 920px;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #aa0000 url(../img/menu-child.png) repeat-x;  
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #aa0000 url(../img/menu-child.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}

Note: If You Do not Want to Wear With radius change 0px 10px

-moz-border-radius-topright: 10px;

  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topleft: 10px;

  -webkit-border-top-left-radius: 10px;

Stage Your Next Stay enter its Html Code

<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1 Submenu item 1</a></li>
<li><a href="#">Menu 1 Submenu item 2</a></li>
<li><a href="#">Menu 1 Submenu item 3</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 Submenu item 1</a></li>
<li><a href="#">Menu 2 Submenu item 2</a></li>
<li><a href="#">Menu 2 Submenu item 3</a></li>
</ul>
</li>

<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 Submenu item 1</a></li>
<li><a href="#">Menu 3 Submenu item 2</a></li>
<li><a href="#">Menu 3 Submenu item 3</a></li>
</ul>
</li> 
</ul>

</div>

Note:

<ul id="nav">

<li><a href="#">Menu 1</a>

 <ul>

 <li><a href="#">Menu 1 Submenu item 1</a></li>

 <li><a href="#">Menu 1 Submenu item 2</a></li>

 <li><a href="#">Menu 1 Submenu item 3</a></li>

 </ul>

</li>

"You See The # Replace with your URL and the" Menu 1 "Name Your Menu" Menu 1 Submenu item 1 "is for sub menu you



To Install the HTML code I believe you are already proficient and Depends On How Saved Through Where can add html / java script Or Direct Search Code <div id='content-wrapper'> put on it or Find code headers and Copy''Below'''