Html & CSS3 Code for Horizontal Dropdown menus

Horizontal menus using css

• This tutorial demonstrates how to create vertical and horizontal menus.
• Horizontal Menus are an excellent way to create a menu of categories linking to the web pages of your interest. 
• Many web designers place a horizontal menu under the page design's header section to link to other pages for navigating from one page to another.

For this we need to make use css code

#catagorie {
  margin: 0px;
  padding: 0px;
  line-height: 0px;
  font-size: 0px;
  display: inline-block;
}


#catagorie li a {
  line-height: 19px;
  font-size: 16px;
  font-family: Arial,sans-serif;
  text-decoration: none;
  color: #FFFFFF;
  font-style: normal;
  font-weight: bold;
  padding: 9px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

#catagorie li div.mbtn {
  height: 37px;
  width: 122px;
  line-height: 0;
  background-color: #3B3B3B;
  border-style: solid;
  border-color: #505050;
  border-width: 1px 0 0 1px;
  border-radius: 2px;
  padding: 0;
  box-shadow: none;
  text-align: center;
}

#catagorie li:hover div.mbtn a, #catagorie li.expanded a.mt, #catagorie li.active a.mt,
#catagorie li.itemhot a.mt, #catagorie li a:hover {
  color: #FFFFFF;
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}


#catagorie li.expanded div.mbtn, #catagorie li.active div.mbtn, #catagorie li.itemhot div.mbtn, #catagorie li:hover div.mbtn {
  background-color: #4498C7;
  box-shadow: none;
  border-color: #5DB1E0;
}

#catagorie {
  padding: 0;
  border-style: solid;
  border-color: #000000;
  border-width: 1px;
  border-radius: 3px;
  background-color: #252525;
  box-shadow: 0 0 10px -1px #333333;
  border-collapse: separate;
}

#catagorie li.first_button div.mbtn {
  border-radius: 2px 0 0 2px;
}

#catagorie ul li a {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11px;
  line-height: 14px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
}

#catagorie ul li:hover > a {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#catagorie ul li.subexpanded a.subexpanded, #catagorie ul li.subitemhot a.subitemhot, #catagorie ul li a:hover {
  color: #FFFFFF;
  font-family: Arial,sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#catagorie ul li:hover, #catagorie ul li.subexpanded, #catagorie ul li.subitemhot {
  border-color: #5DB1E0;
  background-color: #4598C6;
  box-shadow: none;
}

#catagorie ul {
  margin: 0;
  border-style: solid;
  border-color: transparent;
  border-width: 0;
  padding: 0 1px 1px 0;
  background: #262626;
  font-size: 0;
  border-radius: 0;
}

#catagorie ul li a {
  padding: 7px 15px 7px 13px;
  text-align: left;
}

#catagorie ul li.separator {
  padding: 7px;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}

#catagorie ul li.separator div {
  border-top: 1px solid #000000;
  font-size: 0px;
}

#catagorie ul li {
  border-style: solid;
  border-color: #4C4C4C;
  border-width: 1px 0 0 1px;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  float: none;
  margin: 0 0 1px 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  background-color: #3C3C3C;
}

#catagorie ul li.last_item {
  margin-bottom: 0;
}


#catagorie .litab {
  margin: 0px 1px 0px 0px;
}

#catagorie a img {
  border: none;
}

#catagorie li {
  list-style: none;
  float: left;
}

#catagorie.css_menu li {
  position: relative;
}

#catagorie.css_menu ul li:hover > ul {
  opacity: 1;
}

#catagorie.css_menu li:hover > ul {
  top: 100%;
  left: 0;
  right: auto;
  opacity: 1;
}

#catagorie.css_menu ul li:hover > ul {
  top: -0px;
  left: 100%;
  right: auto;
}

#catagorie.css_menu ul {
  transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  transition-property:opacity;
  -webkit-transition-property:opacity;
  -moz-transition-property:opacity;
  -ms-transition-property:opacity;
  opacity: 0;
}

#catagorie ul {
  position: absolute;
  top:-99999px;
  z-index: 4000;
}

#catagorie ul ul {
  position: absolute;
  z-index: 5000;
}

#catagorie .submenu_arrow {
  margin-left: 8px;
}

#catagorie ul li a.with_arrow { 
  background-repeat: no-repeat; 
  background-position: right center; 
  padding-right: 19px; 
} 


the above code can be written in an external .css file or inside your html code
if you are using it as external css file then link it 

<link rel="stylesheet" href="mycssfile.css" type="text/css" />

or if you want to write all the code in same html  file then paste the css code in

<style type="text/css">
---------code-----------
</style>
in your <head>tag or <body>tag

create a list tag as follows in :


<ul id="catagorie" class="cssmenu" style="width: 810px; height: 38px;">
  <li class="topitem litab"><div class="mbtn" style="width: 63px;"><a href="#">Home</a></div></li>
  <li class="topitem litab"><div class="mbtn" style="width: 134px;"><a href="#">Web Designing</a></div></li>
  <li class="topitem litab"><div class="mbtn"><a href="#">Programming</a></div></li>
  <li class="topitem litab"><div class="mbtn" style="width: 95px;"><a href="#">Softwares</a></div></li>
  <li class="topitem litab"><div class="mbtn" style="width: 189px;"><a href="#">Windows Tricks &amp; Tips</a></div></li>
  <li class="topitem litab"><div class="mbtn" style="width: 114px;"><a href="#">Maths Tricks</a></div></li>
  <li class="topitem"><div class="mbtn" style="width: 80px;"><a href="#">Other</a></div></li>
</ul>

replace the # sign with your page link