PUBLISHED: NOVEMBER 29, 2013 – ARTICLE: HOW TO CREATE A PURE CSS DROPDOWN MENU FOR YOUR WEBSITE

How to create a pure CSS drop down menu. Are you about to create a website? With our help you can create a horizontal drop down menu with CSS for your site. Follow this tutorial to see the step by step process of building your own pure CSS drop down menu. Our horizontal menu will do the trick. All you have to do is copy the drop down menu code to your site and create a design and style using the drop down menu CSS. Try the sample of the horizontal menu below.

DROP DOWN MENU DEMO:

• HOME
• DROP DOWN MENU
  Instant Eyedropper
  Colour Chart
• VERTICAL MENU
  Fading Banner
  Image Slide Show
• FAQ
  Web Hosting
  Comment Box

 
 
The menu has one sub category that appears once the parent link is activated by hovering over it. Move the mouse away and it will disappear. Take a look at the CSS drop down menu demo above to see it in action. The drop down menu background colours, width, text size, text colours and more can all be changed in the CSS part of the code. Full tutorials on how to do this is below. This is a nice clean looking menu that works well.

Copy our CSS drop down code to your site it will work immediately. It will be the same as the demo above. Once you have changed the colours of the menu using the CSS code. Replace our sample menu titles and sub menu titles with your own also change the drop down menu links to the links on your site. All you have to do is replace it with your stuff. The drop down menu needs a Java-Script that is in the code for the sub menus to work. If you know how you can copy the Java-script code and host it on your site or use our drop down menu Java-Script code.

Help with your menu colours

Match colours on your site for your horizontal menu use the instant eyedropper. It can select any colour from your screen and copies the hex colour code to the clip board for you to paste in your menu CSS code.

Or use our hex colour code chart to select web safe colours for your menu colours.

Copy the menu code below

<script type="text/javascript" src="http://www.linkbuildingservices4sites.com/resources/mikemenuhover.js"></script>
<style type="text/css">
div#menu-position{
left:20;position:
absolute;
top:0px;
width:950px;
margin-left:7px;
}

#mikemenu
{ margin: 0;
padding: 0;
z-index: 30}
#mikemenu li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 12px Arial}
#mikemenu li a
{ display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 170px;
background: #333399;
color: #ffffff;
text-align: center;
text-decoration: none}
#mikemenu li a:hover
{ background: #4B91AA}
#mikemenu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #333399;
border: 1px solid #ffffff}
#mikemenu div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 168px;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #333399;
color: #FFFFFF;
font: 12px Arial}
#mikemenu div a:hover
{ background: #4B91AA;
color: #FFFFFF}
</style>


<div id="menu-position">
<ul id="mikemenu">
<li><a href="http://www.yourlinkhere.com/" onmouseover="mopen('m1')" onmouseout="mclosetime()">HOME</a>
<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
</div>
</li>
<li><a href="http://www.yourlinkhere.com/" onmouseover="mopen('m2')" onmouseout="mclosetime()">DROPDOWN MENU</a>
<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.yourlinkhere.com/" >Instant Eyedropper</a> 
<a href="http://www.yourlinkhere.com/" >Colour Chart</a>
</div>
</li>  
<li><a href="http://www.yourlinkhere.com/" onmouseover="mopen('m3')" onmouseout="mclosetime()">VERTICAL MENU</a>
<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.yourlinkhere.com/">Fading Banner</a>
<a href="http://www.yourlinkhere.com/">Image Slide Show</a>
</div>
</li>    
<li><a href="http://www.yourlinkhere.com/" onmouseover="mopen('m4')" onmouseout="mclosetime()">FAQ</a>
<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="http://www.yourlinkhere.com/" >Web Hosting</a>
<a href="http://www.yourlinkhere.com/" >Comment Box</a>
</div>
</li>    
</ul>
</div>

How to edit the drop down menu

You may also like this.

Free drop down menu builder
CSS drop down menus