Member Avatar for trangcoi2101

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
  • 81 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by autocrat
Member Avatar for autocrat

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.