Geek Pedia

Menu
Search

Horizontal Drop-Down Menu using CSS

CSS Tutorials
Nathan

Horizontal Drop-Down Menu using CSS

Learn how to create a drop-down horizontal CSS menu, completely JavaScript-free. The menu is valid XHTML and CSS and uses unordered lists for the menu items.

➨ See this code in action

The advantage of creating menus with CSS is the fact that it’s not a scripting language and, unlike JavaScript, it can not be turned off leaving your menu inaccessible.

First let’s see the HTML. We’ll use a DIV and some ULs to create our menu since this is not only the most appropriate method but it’s also optimizes it for search engines.

<body>
<div class="menu">
   <ul class="menu">
      <li><a class="menu"href="1.html">A</a>
         <ul>
            <li><a class="menu"href="1.html">1</a>
               <ul>
                  <li><a class="menu" href="1.html">1 A</a></li>
                  <li><a class="menu" href="1.html">1 B</a></li>
                  <li><a class="menu" href="1.html">1 C</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">2</a>
               <ul>
                  <li><a class="menu" href="1.html">2 A</a></li>
                  <li><a class="menu" href="1.html">2 B</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">3</a>
               <ul>
                  <li><a class="menu" href="1.html">3 A</a></li>
                  <li><a class="menu" href="1.html">3 B</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
   <ul class="menu">
      <li><a class="menu"href="1.html">B</a>
         <ul>
            <li><a class="menu"href="1.html">1</a>
               <ul>
                  <li><a class="menu" href="1.html">1 A</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">2</a>
               <ul>
                  <li><a class="menu" href="1.html">2 A</a></li>
                  <li><a class="menu" href="1.html">2 B</a></li>
                  <li><a class="menu" href="1.html">2 C</a></li>
                  <li><a class="menu" href="1.html">2 D</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">3</a>
               <ul>
                  <li><a class="menu" href="1.html">3 A</a></li>
                  <li><a class="menu" href="1.html">3 B</a></li>
               </ul>
            </li>
         </ul>
     </li>
   </ul>
   <ul class="menu">
      <li> <a class="menu"href="1.html">C</a>
         <ul>
            <li><a class="menu"href="1.html">1</a>
               <ul>
                  <li><a class="menu" href="1.html">1 A</a></li>
                  <li><a class="menu" href="1.html">1 B</a></li>
               </ul>
            </li>
            <li><a class="menu"href="1.html">2</a>
               <ul>
                  <li><a class="menu" href="1.html">2 A</a></li>
                  <li><a class="menu" href="1.html">2 B</a></li>
                  <li><a class="menu" href="1.html">2 C</a></li>
               </ul>
            </li>
         </ul>
      </li>
   </ul>
</div>
<p style="margin:0px; padding:0px;font-size:60px; color:#CCCCCC; text-indent:15px; text-decoration:underline; font-style:italic">SOME SAMPLE TEXT</p>
</body>
</html>

The next step is to write the CSS. To make this work in Internet Explorer and Firefox we’ll need 2 separate CSS files, one for each browser. Let’s start with the file for Internet Explorer.
As you can see from the HTML, we’re using the “menu” class.

First let’s format the containing DIV. We’ll set its width, height, position and background color.

div.menu
{
width:100%;
position:relative;
background-color:#6699CC;
height:20px;
}

The next step is to format the unordered lists. These lists are the top level of the menu, they will be visible all the time.

ul.menu
{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#FF00FF;
float:left;
}

We’ve removed the default padding and margins of the UL and made it float left. This way all of the ULs will fit next to eachother. Up next are the second level ULs.

ul.menu ul
{
position:relative;
list-style-type:none;
margin:0px;
display:none;
background-color:#00CCFF;
}

The lists are now hidden and positioned under the first level UL. Now it’s time for the third level ULs.

ul.menu ul ul
{
position:absolute;
display:none;
margin-top:0px;
margin-left:0px;
}

These ULs are also hidden, and they position is set to absolute to make them appear on top of other elements. We will make the ULs become visible and invisible with “:hover”.

ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}

This makes the second level ULs become visible when the mouse is over the first level UL, the third level ULs will remain hidded until the mouse is over the second level UL. Finally, we format the links.

a.menu
{
background-color:#6699CC;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
margin-bottom:-1px
}
a.menu:hover
{
background-color:#006699;
color:#66FFFF;
}

The CSS file for IE is done. The file for FF is almost the same except the second and third level ULs.

ul.menu ul
{
position:absolute;
list-style-type:none;
margin:0px;
display:none;
margin-left:-40px;
z-index:1;
}

We’ve set the position of the second level ULs to absolute, because otherwise it won’t apear on top of other elements (like it does in IE). Also, the ULs have z-index:1 to appear on top if the third level ULs. The left margin is set to -40px to position it under the first level UL.

ul.menu ul ul
{
position:absolute;
display:none;
margin-top:-20px;
margin-left:121px;
z-index:-1;
}

The third level ULs have z-index:-1 to appear under the second level ULs, and have negative margins in order for them to be aligned corectlly with the rest of the level.
In the html file we set the Non-IE file as default stylesheet and use a conditional comment to make the IE file load if the page is viewed with that browser.

<link rel="stylesheet" href="NonIEcssMenu.css" />
<!--[if IE]>
<link rel="stylesheet" href="IEcssMenu.css" />
<![endif]-->

Here is the entire code for the CSS drop-down menu:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="NonIEcssMenu.css" />
<!--[if IE]>
<link rel="stylesheet" href="IEcssMenu.css" />
<![endif]-->
<title>CSS Menu</title>
</head>
<body>
<div class="menu">
<ul class="menu">
   <li><a class="menu"href="1.html">A</a>
      <ul>
         <li><a class="menu"href="1.html">1</a>
            <ul>
               <li><a class="menu" href="1.html">1 A</a></li>
               <li><a class="menu" href="1.html">1 B</a></li>
               <li><a class="menu" href="1.html">1 C</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">2</a>
            <ul>
               <li><a class="menu" href="1.html">2 A</a></li>
               <li><a class="menu" href="1.html">2 B</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">3</a>
            <ul>
               <li><a class="menu" href="1.html">3 A</a></li>
               <li><a class="menu" href="1.html">3 B</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li><a class="menu"href="1.html">B</a>
      <ul>
         <li><a class="menu"href="1.html">1</a>
            <ul>
               <li><a class="menu" href="1.html">1 A</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">2</a>
            <ul>
               <li><a class="menu" href="1.html">2 A</a></li>
               <li><a class="menu" href="1.html">2 B</a></li>
               <li><a class="menu" href="1.html">2 C</a></li>
               <li><a class="menu" href="1.html">2 D</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">3</a>
            <ul>
               <li><a class="menu" href="1.html">3 A</a></li>
               <li><a class="menu" href="1.html">3 B</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
<ul class="menu">
   <li> <a class="menu"href="1.html">C</a>
      <ul>
         <li><a class="menu"href="1.html">1</a>
            <ul>
               <li><a class="menu" href="1.html">1 A</a></li>
               <li><a class="menu" href="1.html">1 B</a></li>
            </ul>
         </li>
         <li><a class="menu"href="1.html">2</a>
            <ul>
               <li><a class="menu" href="1.html">2 A</a></li>
               <li><a class="menu" href="1.html">2 B</a></li>
               <li><a class="menu" href="1.html">2 C</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>
<p style="margin:0px; padding:0px;font-size:60px; color:#CCCCCC; text-indent:15px; text-decoration:underline; font-style:italic">SOME SAMPLE TEXT</p>
</body>
</html>

/* NonIEcssMenu.css */

div.menu{
width:100%;
position:relative;
background-color:#6699CC;
height:20px;
}
ul.menu{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#FF00FF;
float:left;
}
ul.menu ul{
position:absolute;
list-style-type:none;
margin:0px;
display:none;
margin-left:-40px;
z-index:1;
}
ul.menu ul ul{
position:absolute;
display:none;
margin-top:-20px;
margin-left:121px;
z-index:-1;
}
ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}
a.menu
{
background-color:#6699CC;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
}
a.menu:hover
{
background-color:#006699;
color:#66FFFF;
}

/* IEcssMenu.css */

div.menu
{
width:100%;
position:relative;
background-color:#6699CC;
height:20px;
}
ul.menu
{
position:relative;
padding:0px;
margin:0px;
list-style-type:none;
color:#FF00FF;
float:left;
}
ul.menu ul
{
position:relative;
list-style-type:none;
margin:0px;
display:none;
background-color:#00CCFF;
}
ul.menu ul ul
{
position:absolute;
display:none;
margin-top:0px;
margin-left:0px;
}
ul.menu:hover ul
{
display:block;
}
ul.menu:hover ul ul
{
display:none;
}
ul.menu ul li:hover ul
{
display:block;
}
a.menu
{
background-color:#6699CC;
display:block;
width:150px;
padding-left:10px;
text-decoration:none;
color:#FFFFFF;
font-family:arial;
font-size:16px;
border-bottom: solid 1px black;
border-right: solid 1px #000099;
margin-bottom:-1px
}
a.menu:hover
{
background-color:#006699;
color:#66FFFF;
}
Nathan Pakovskie is an esteemed senior developer and educator in the tech community, best known for his contributions to Geekpedia.com. With a passion for coding and a knack for simplifying complex tech concepts, Nathan has authored several popular tutorials on C# programming, ranging from basic operations to advanced coding techniques. His articles, often characterized by clarity and precision, serve as invaluable resources for both novice and experienced programmers. Beyond his technical expertise, Nathan is an advocate for continuous learning and enjoys exploring emerging technologies in AI and software development. When he’s not coding or writing, Nathan engages in mentoring upcoming developers, emphasizing the importance of both technical skills and creative problem-solving in the ever-evolving world of technology. Specialties: C# Programming, Technical Writing, Software Development, AI Technologies, Educational Outreach

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Back To Top