CSS drop menu work in FFox not IE

•

What is DaniWeb IT Discussion Community?

You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 423,746 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,390 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our HTML and CSS advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 456 | Replies: 1

•

Join Date: Apr 2008

Posts: 1

Reputation: trangcoi2101 is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

trangcoi2101 trangcoi2101 is offline

Offline

Newbie Poster

CSS drop menu work in FFox not IE

Apr 6th, 2008

menus.html

Help with Code Tags

(Toggle Plain Text)

<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

Help with Code Tags

(Toggle Plain Text)

#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;
}

•

Join Date: Feb 2005

Posts: 427

Reputation: autocrat is on a distinguished road

Rep Power: 4

Solved Threads: 12

autocrat

Offline

Posting Pro in Training

Re: CSS drop menu work in FFox not IE

Apr 6th, 2008

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.

Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)