CODEWITHSUNDEEP
cssdrop-down-menu
nickraus
nickraus

Reputation: 41

My drop down menu works fine in jsFiddle but not when I test in Firefox and Safari

I've scoured through previous stack posts and tried every method I could find but alas, nothing has worked.

My drop down menu works fine in jsfiddle:
http://jsfiddle.net/4JFQ8/5/

But when I preview the code with firefox or safari the drop down menu under the "services" link does not line up directly under the "services" link button and the drop down menu disappears when I try to move the mouse down.

BTW thank you to all who respond to these questions. This site has helped me out a bunch in the past, but unfortunately this is my first time posting.

Upvotes: 3

Views: 407

Answers (3)

nickraus
nickraus

Reputation: 41

With the help of @Shivaji
This works in Firefox and Safari.
I changed:

ul.dropdown ul {
width: 200px; visibility: hidden; position: absolute; top:100%; left:0; }



to:

ul.dropdown ul { left: 0; list-style: none outside none; padding: 0; position: absolute; top: 5px; visibility: hidden; width: 200px; }



The "top:5px" made it possible to click the drop down menu.
The "list-style: none outside none; padding: 0; " fixed the alignment issue.
Beware this hasn't been tested in Chrome or IE! Thanks Guys!

Upvotes: 0

Afshin
Afshin

Reputation: 4215

remove 

position:absolute;

in nav style like this maybe helpful

nav{
  margin-top:10px;
  top:0;
  right:0;
  clear:both;
  font-family:"Copperplate Gothic Light";
}

Upvotes: 0

Prabhu
Prabhu

Reputation: 1149

Please try this:

ul.dropdown ul {
left: 0;
list-style: none outside none;
padding: 0;
position: absolute;
top: 100%;
visibility: hidden;
width: 200px;
}

Include padding:0 & list-style:none

Upvotes: 4

Related Questions