Horizontal menu 2

HTML code

 <div id="menu4">

     <ul>

         <li><a href="#">home</a></li>

            <li><a href="#">dress</a></li>

            <li><a href="#">shoes</a></li>

            <li><a href="#">about us</a></li>

            <li><a href="#">contact us</a></li>

            <li><a href="#">our gallery</a></li>

         <ul>

    </div>

CSS code

#cmenu{

 float:left;

 margin-left:350px;

 width:600px;

 height:40px;

 background-color:#666666;

 border-radius:30px;

}

#menu4{

 margin:0px;

 padding:0px;

 position:relative;

 height:50px;

 text-align:left;

 list-style-type:none;

}

#menu4 li{

 display:inline;

 padding:10px 20px 10px 20px;

 position:relative;

 left:-20px;

 border-right:1px #999999 solid;

 position:relative;

 top:-5px;

}

#menu4 li a{

 color:#FFFFFF;

 text-decoration:none;

}

#menu4 li a:hover{

 text-decoration:underline;

}

Result

Tab Menu2

Html code

<ul id="tabnav">
  <li class="tab1"><a href="#">home</a></li>
  <li class="tab2"><a href="#">product</a></li>
  <li class="tab3"><a href="#">gallery</a></li>
  <li class="tab4"><a href="#">contact</a></li>
</ul>

<div id="box"></div>

CSS code

ul#tabnav {
text-align: left; 
margin: 1em 0 1em 0; 
font: bold 11px verdana, arial, sans-serif; 
border-bottom: 1px solid #6c6;
list-style-type: none;
padding: 3px 10px 3px 10px; 
}

ul#tabnav li {
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { 
border-bottom: 1px solid #fff; 
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
background-color: #fff; 
color: #000; 
position: relative;
top: 1px;
padding-top: 4px;
}

ul#tabnav li a {
padding: 3px 4px; 
border: 1px solid #6c6; 
color: #666;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover {
background: #fff;
}

#box{
width:auto;
height:500px;
border:1px #6c6 solid;
border-top:none;
color:#000000;
position:relative;
top:-10px;

}

Result

website : http://www.cssportal.com/horizontal-menus/unraveled.php

Tab menu 1

HTML code

 <div id="navbar">
  
  <div id="holder"> 

  <ul> 
   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contact</a></li>
  </ul> 

  </div>

  <div id="box">
  This is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menu
  </div>


 </div>

CSS code

#navbar {
  width:660px;
 } 

 #navbar #holder {
  /*horizontal line*/
  height:44px;/*tinggi line*/
  border-bottom:1px solid #000;/*line*/
  width:652px;/*panjang line*/
  padding-left:25px; 
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a { 
  text-decoration:none;
  float:left;
  margin-right:5px;
  line-height:23px;
  font-family:"Arial Black", Gadget, sans-serif;
  color:#000;
  border:1px solid #000;
  border-bottom:none;
  padding:10px 20px 10px 20px;
  width:75px;
  text-align:center;
  display:block;
  background:#333333;
  border-radius:10px 10px 0px 0px;
 } 

 #navbar #holder ul li a:hover {
  background:#666666;
  color:#FFF;
  text-shadow:1px 1px 1px #000;
 }

 /*-------------------------------*/
  #holder ul li a#onlink {
  background:#999999;
  color:#000;
  border-bottom:1px solid #999999; 
 } 

 #holder ul li a#onlink:hover {
  background:#FFF;
  color:#333333;
  text-shadow:1px 1px 1px #000; 
 }

 #box{
  width:655px;
height:400px;
border:1px solid #000;
  border-top:none;
padding:10px;
background:#999999;


 }

Result

Horizontal menu 1

HTML code

<div id="cmenu">
<div id="menu4">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a></li>
         <ul>
    </div>

 </div> 

CSS code

#cmenu{
float:left;
width:100%;
height:50px;
background-color:#666666;
}

#menu4{
margin:0px;
padding:0px;
position:relative;
height:50px;
text-align:left;
list-style-type:none;
}

#menu4 li{
display:inline;
padding:10px 20px 10px 20px;
position:relative;
left:-20px;
border-right:1px #999999 solid;
}

#menu4 li a{
color:#FFFFFF;
text-decoration:none;
}
#menu4 li a:hover{
text-decoration:underline;

}

Result

Vertical menu drop down right

HTML code

<div id="menu5">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a>
                <ul>
                    <li><a href="#">contact us</a></li>
                    <li><a href="#">our social media</a></li>
                    <li><a href="#">our company</a></li>
                </ul>
            </li>
<ul>

 </div> 

CSS code

#menu5{
margin:0px;
padding:0px;


}
#menu5 ul{
float:right;
}

#menu5 li{
display:block;
list-style:none;
background:#404040;
border:#00CC00;
width:150px;
padding-top:10px;
padding-bottom:10px;
padding-left:30px;

}

#menu5 ul li:hover{
background:#7A7A7A;
}

#menu5 a{
text-decoration:none;
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

}

#menu5 ul ul{
display:none;
}
#menu5 ul li:hover ul{
display:block;
position:relative;
top:-34px;
left:-180px;

}
#menu5 ul ul li{
display:block;

}

Result

Vertical Menu Right

HTML code

<div id="s"></div>
<div id="menu4">
    <ul>
        <li><a href="#">home</a></li>
            <li><a href="#">dress</a></li>
            <li><a href="#">shoes</a></li>
            <li><a href="#">about us</a></li>
<ul>

 </div>

CSS code

#s{
float:left
width:800px;
height:400px;
}
#menu4{
float:right;
width:100px;
height:400px;
margin-top:50px;
margin:0px;
  padding:0px;
}
#menu4 ul{
list-style:none;
}

#menu4 ul li{
float:right;
margin-top:15px;
background-color:#333333;
width:160px;
padding-top:10px;
padding-bottom:10px;
border-radius:20px 0px 0px 20px;
padding-right:20px;
box-shadow:-3px 2px 10px black;
-webkit-transition:padding-right 0.6s;
-moz-transition:padding-right 0.6s;
}

#menu4 ul li:hover{
padding-right:50px;
background-color:#666666;
}

#menu4 a{
float:right;
color:#FFFFFF;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;

}


Result