The Bulliner Family

The Bulliner Family

Music By:
Kevin MacLeod

These dropdown menues have bee tested and work in IE7 and Firefox. They do not work in IE6. In IE6 only the first level list items show up, the dropdown part does not work.

For those of you who are trying to figure out css dropdown menues here is about as basic as you can get:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<style type="text/css">
li ul {
 display: none;
}
li:hover ul {
 display: block;
}
li ul li ul {
 display: none !important;
}
li ul li:hover ul {
 display: block !important;
}
</style>
</head>
<body>
<ul id="dropdown">
 <li>
  <a href="1">one</a>
   <ul><li><a href="a">a</a>
    <ul>
     <li><a href="A">A</a></li>
     <li><a href="B">B</a></li>
    </ul>
   </li>
   <li><a href="b">b</a></li>
   <li><a href="c">c</a></li>
   </ul>
 </li>
</ul>
</body>
</html>

Here’s how it looks:

Here it is with a little added detail:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/
xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
  <title>Dropdown</title>
<style type="text/css">
li ul {
 display: none;
}
.dropdown ul:hover {
 display: block;
 position: relative;
}
li:hover ul {
 display: block;
 position: relative;
 left: -1px;
 top: 4px;
}
li ul li ul {
 display: none !important;
}
li ul li:hover ul {
 display: block !important;
 position: relative;
 left: 100%;
 top: -20px;
}
.dropdown, .dropdown ul {
 list-style: none;
 text-indent: 0;
 padding: 0;
 margin: 0;
 text-align: center;
}
.dropdown li {
 border: solid black 1px;
 text-align: center;
 background: red url()
repeat-y scroll top left;
 width: 150px;
 height: 22px;
 line-height: 120%;
}
.dropdown li ul li ,.dropdown li ul li ul li {
 width: 150px;
}
.dropdown > li {
float: left;
margin: 5px 2%;
}
</style>
</head>
<body>
<ul class="dropdown">
 <li>
  <a href="1">one</a>
   <ul>
    <li><a href="a">a</a>
     <ul>
      <li><a href="A">A</a></li>
      <li><a href="B">B</a></li>
     </ul>
    </li>
   <li><a href="b">b</a></li>
   <li><a href="c">c</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

Here’s how it looks:

You may use the code in the yellow boxes or modify it to meet your own needs. Hope it helped!