FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


CSS verticle menus





TurtleShell
So, I used the information from this list apart article to make some verticle drop down menus. I'm pretty happy with the results except in IE, where the rollover menu is unstable. You have to roll over the first menu item just right or the other menu items that appeared during the rollover disappear again too quickly. I followed the CSS and JS and everything else almost to a tea. I'm noticing this same problem in the example that the programmer who wrote the article gives. Sooo frustrating!

I've been looking for a decent verticle/horizontal drop down menu option for years, and this is the closest I've come to anything working, but I can't seem to fix this one little bug. Can anyone help me? Or, do you have any better suggestions for a roll over menu?

Here's a link to the website I'm working on: http://www.turtleshell.frih.net/index.html. Works fine in firefox, Safari, not so much in IE.

This is the CSS:

Code:

div.menu {
   color: #fdbe00;
   text-align: left;
   float: left;
   font-weight: bold;
   }
   
#nav {
   list-style-type: none;
   margin: 0px;
   padding: 0px;
   width: 150px;
   border-bottom: 1px solid #ccc;

}

#nav li {
   
   position: relative;
      width: 150px;
}

#nav li a {
   display: block;
   padding: 5px;
   border: 1px solid white;
   border-bottom: 0px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */




#nav li:hover ul, #nav li.over ul {
   display: block;
   width: 150px;
   padding-left: 0px;
   margin-left: 0px;
   border-bottom: 1px solid white;
}





#nav li ul {
   position: absolute;
   left: 149px;
   top: 0;
   display: none;
   list-style-type: none;
}

#nav li ul li {
      background-color: #0d1549;
   }


#nav li.top {
   margin-top: 25px;
}

GB
One thing I do when dealing with IE is to use conditional comments to send a different set of instructions to IE. Could you do that to make a IE only version?
TurtleShell
sure, but what to say? I'm not sure why IE is unstable.
sonam
I am just comming from hospital and I cannot seat long time and try it but I think you must deffine width, height and display block for a tag otherwise IE will put hover efect only on text not on the box. I cannot see now how your JS is working but change this:
Code:
* html ul li a { height: 1%; }

in:
Code:
* html ul li a { height: 15px; width: 120px; display:block;}
* html ul li a:hover { height: 15px; width: 120px; display:block;} 


Also, maybe you will find interesting this drop down menu:
http://htmldog.com/articles/suckerfish/dropdowns/

On the end of page is link for vertical menu. Wink

Sonam
TurtleShell
Actually, your idea didn't completely work, but it set me on the right path. After considerable tweaking, this is the code I wrote for IE:

Code:

/* Fix IE. Hide from IE Mac \*/
* html ul li {
   float: left;
   }
* html ul li a {
   height: 15px;
   width: 150px;
   display: block;
   background-color: #0d1549;
   }
* html ul li a:hover {
   height: 15px;
   width: 150px;
   display: block;
   background-color: #0d1549;
   } 
* html ul li ul li {
   height: 15px;
   width: 150px;
   display: block;
   position: relative;
   right: 0px;
   background-color: #0d1549;
   }
* html ul li ul li a {
   float: left;
   height: 15px;
   width: 150px;
   display: block;
   position: relative;
   right: 0px;
   background-color: #0d1549;
   }


Thanks for the ideas! This is great!
sonam
Great if you find solution. Like I wrote I haven't power for creating test page to see what happend. I am just wrote what is first comming in my mind. Good luck with your site.

Sonam
tamilparks
its great very nice tips congrulation
nobodybaert
works very well ! Tnx!
Related topics
CSS tooltips (sort of)
HTML/CSS menu replacement
how to make hover drop menus without flash?
14 vertical menus created with CSS
Design Tips
Changing internal data with scripting.
Javascript expandable menus ... + , -
Drop down Menu
CSS help needed with list style menubar
Web Design XHTML/CSS
Where do you stand on using Javascript in websites?
Menu + drop down
Advanced CSS rollovers
Drop down Menu
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.