Horizontal Menu

How To Create a Drop Down Menu

How to create a drop down menu. Are you looking for a nice drop down menu that is easy to put on your site, then try the drop down menu below. The drop down menu code has a Java Script Code, CSS Code and a HTML Code. The Java Script is for the drop down part of the menu you don't need to edit it, it must be included in the drop down menu code for the drop down part of the horizontal menu to work. See the Java Script below. Do not copy the below codes, its just to show you, the complete code is in the grey box below.

The CSS Code is for the horizontal menu, at the top of the CSS Code is a code to move the menu on your website, to adjust the horizontal menu position, up, down, right and left use this code to correct the position of your horizontal menu on your page.

Drop Down Menu Code

div#menu-position-{
left:20;
position:absolute;
top:0px; Adjust your horizontal menu position from the top of the page here
width:950px;
margin-left: 7px; Adjust your horizontal menu left or right here
}

Horizontal Drop Down Menu Code

Below the horizontal menu position in the CSS code, is the horizontal menu CSS to change the menu text size and back ground colours etc. Then you get the HTML horizontal menu Code here you will replace the horizontal menu title and links to your sites horizontal menu title and links. Once you have edited the menu for your site copy the edited horzontal menu from your site and paste onto the next page you create. Or place the drop down menu code ito a php file and load that file to each page of your site. Below is what the horizontal menu will look like on your website. Hover over the main horizontal menu and a drop down menu will appear.

DEMO: Horizontal Drop Down Menu

Horizontal Drop Down Menu Code

#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: 120px;
background: #333399;
color: #ffffff;
text-align: center;
text-decoration: none}
#mikemenu li a:hover
{ background: #4B91AA;
color: #ffffff}
#mikemenu div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #4B91AA;
border: 1px solid #ffffff}
#mikemenu div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: 118px;
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.2createawebsites.com/" onmouseover="mopen('m1')" onmouseout="mclosetime()">CREATE A WEBSITE</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
</div>
</li>

<li><a href="http://www.2createawebsites.com/" onmouseover="mopen('m2')" onmouseout="mclosetime()">CREATE A WEBSITE</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.2createawebsites.com/how-2-create-a-website-drop-down-menu.php" >Horizontal Menu</a>
<a href="http://www.2createawebsites.com/how-2-create-a-website-drop-down-menu.php" >Horizontal Menu</a>
</div>
</li>  
  
<li><a href="http://www.2createawebsites.com/" onmouseover="mopen('m3')" onmouseout="mclosetime()">CREATE A WEBSITE</a>
<div id="m3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.2createawebsites.com/">To Create a Website</a>
<a href="http://www.2createawebsites.com/">To Create a Website</a>
</div>
</li>

<li><a href="http://www.2createawebsites.com/" onmouseover="mopen('m4')" onmouseout="mclosetime()">CREATE A WEBSITE</a>
<div id="m4"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="http://www.2createawebsites.com/how-2-create-a-website-drop-down-menu.php" >Horizontal Menu</a>
<a href="http://www.2createawebsites.com/how-2-create-a-website-drop-down-menu.php" >Horizontal Menu</a>
</div>
</li>    
</ul>
</div>

STOP! READ THIS! Want to make a website and don't know where to start click here