0

menus.html

<html>
<head>
<title>CSS  Flyout  menus</title>
<meta  http-equiv="content-type"
content="text/html;  charset=iso-8859-1"  />
<link  rel="stylesheet"  type="text/css"  href="menus.css"  />
</head>
 
<body>

<ul  id="nav">
<li><a  href="#">Starters</a>
<ul>
<li><a  href="">Fish</a></li>
<li><a  href="">Fruit</a></li>
<li><a  href="">Soups</a></li>
</ul>
</li>
<li><a  href="#">Main  courses</a>
<ul>
<li><a  href="">Meat</a></li>
<li><a  href="">Fish</a></li>
<li><a  href="">Vegetarian</a></li>
</ul>
</li>
<li><a  href="#">Desserts</a>
<ul>
<li><a  href="">Fruit</a></li>
<li><a  href="">Puddings</a></li>
<li><a  href="">Ice  Creams</a></li>
</ul>
</li>
</ul>

</body>


</html>

menus.css

#nav,  #nav  ul  { padding:  0; margin:  0;
list-style:  none;
 
File:  menus.css
 
}
#nav  li  {
float:  left; position:  relative; width:  10em;
border:  1px  solid  #B0C4DE; background-color:  #E7EDF5; color:  #2D486C;
font:  80%  Verdana,  Geneva,  Arial,  Helvetica,  sans-serif;
margin-right:  1em;
}
#nav  a:link,  #nav  a:visited  {
display:  block;
text-decoration:  none;
 



padding-left:  1em;
color:  #2D486C;
}
#nav  ul  {
display:  none; position:  absolute; top:  1.3em;
left:  0;
padding-top:  0.5em;
}
#nav  ul  li  {
float:  none;
border:  0  none  transparent;
border-bottom:  1px  solid  #E7EDF5;
background-color:  #F1F5F9;
font-size:  100%;
margin:  0;
margin-bottom:  0.5em;
padding:  0;
}
#nav  li  >  ul  { top:  auto; left:  auto;
}
#nav  li:hover  ul  {
display:  block;
}
2
Contributors
1
Reply
2
Views
9 Years
Discussion Span
Last Post by autocrat
0

Where is the JavaScript for IE6?

No offence, but almost every writeup I've seen for CSS based behavioural menus clearly mke mention that it will not work in IE.

Try looking up Sucker Fish, Son of Sucker Fish, Super Sucker Fish etc.

Those provide you with a simple setup and the required JS.

Alternatively, you could look at the hover.htc JS fix if you prefer.

I personally recommend the SuperFish and JQuery approach, as it is much more accessible.


Additionally, you may want to avoid using "display: none;" as it means that it may not be visible to some screen readers etc. instead, positioning out of "page View" is the preferred method... so you would use position: absolute; left: -9999px; etc.

Most of the online demo examples (such as sucker fish) also mention this.

So I cannot recommend strongly enough that you go and take a look at A List Apart.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.