3 replies [Last post]
wevar
Offline
newbie
Last seen: 6 years 25 weeks ago
Joined: 2008-01-31
Posts: 2
Points: 0

Hello,

I found a great flyout menu on this website.

http://www.cssplay.co.uk/menus/slide_fly.html

It works fine on Firefox and Explorer. However when I try to adapt it to my website it stops to work on Firefox though it continues to work on Internet Explorer. The horitzontal menus don't drop any longer under Firefox.

I'm stuck for the moment. Any help would be welcome.

CSS Code:

#fly_menu {
list-style-type:none;
padding:0;
margin:0;
width:150px;
z-index:100;
float:left;
height:360px;
background:#000;

}
#fly_menu ul {
list-style-type:none;
padding:0;
margin:0;

}
#fly_menu li {
float:left;
background:#fff url(slide/slide_0.gif) no-repeat;

}

#fly_menu li.sub {
background:#fff url(slide/slide_0.gif) no-repeat;

}

#fly_menu li, #fly_menu li a {
display:block;
color:#fff;
font-family:arial, sans-serif;
font-size:11px;
line-height:30px;
width:150px;
text-decoration:none;
cursor:pointer;
font-weight:bold;
text-align:center;

}

#fly_menu table {
border-collapse:collapse;
padding:0;
margin:0 -1px -1px;

}

#fly_menu ul,
#fly_menu :hover ul ul,
#fly_menu :hover ul :hover ul ul {position:absolute;
left:-9999px;
width:150px;
}

#fly_menu :hover {
color:#ff0;
background:#fff url(slide/slide_1.gif) no-repeat;
z-index:500;
white-space:nowrap;

}

#fly_menu :hover > a {
color:#ff0;
background:#fff url(slide/slide_1.gif) no-repeat;
z-index:500;
white-space:nowrap;

}

#fly_menu :hover ul {
position:static;
height:180px;
margin-top:-1px;
background:#383838;

}
#fly_menu :hover ul :hover ul,
#fly_menu :hover ul :hover ul :hover ul {
display:block;
position:absolute;
left:130px;
top:0;
height:auto;
z-index:500;
border:1px solid #fff;

}

#fly_menu :hover ul li, #fly_menu :hover ul li a {
background:#383838;
text-align:left;
text-indent:10px;

}
#fly_menu :hover ul li.fly a {
background: #383838 url(slide/arrow.gif) no-repeat 120px center;

}
#fly_menu :hover ul :hover {
background:#255fa3;
position:relative;
z-index:100;

}
#fly_menu a:hover ul li.fly a:hover {
background:#255fa3 url(slide/arrow.gif) no-repeat 120px center;
color:#ff0;

}
#fly_menu :hover ul li.fly:hover > a {
background:#255fa3 url(slide/arrow.gif) no-repeat 120px center;
color:#ff0;

}

#fly_menu :hover ul :hover ul li,
#fly_menu :hover ul :hover ul li a {
background:#666;

}
#fly_menu :hover ul :hover ul :hover ul li {
background:#666;
z-index:500;

}

#fly_menu :hover ul :hover ul li.fly a {
background: #626262 url(slide/arrow.gif) no-repeat 120px center;

}
#fly_menu :hover ul :hover ul :hover {
z-index:500;
background:#0d72c0;
color:#ff0;

}
#fly_menu a:hover ul a:hover ul li.fly a:hover {
background:#0d72c0 url(slide/arrow.gif) no-repeat 120px center;
color:#ff0;

}
#fly_menu :hover ul :hover ul li.fly:hover > a {
background:#0d72c0 url(slide/arrow.gif) no-repeat 120px center;
color:#ff0;

}

#fly_menu :hover ul :hover ul :hover ul li,
#fly_menu :hover ul :hover ul :hover ul li a {
background:#888;

}

#fly_menu :hover ul :hover ul :hover ul :hover {
background:#5184b8;
color:#ff0;

}
#fly_menu :hover ul :hover ul :hover ul :hover a {
color:#ff0;

}

.fly_menu_text {
float:left;
width:500px;
font: 11px verdana, arial, sans-serif;
border:1px solid #000;
height:358px;

}
.fly_menu_text img {
display:block;

}
.fly_menu_text p {
margin:0;
padding:5px 10px;
line-height:15px;

}

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 3 years 18 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

(No subject)

wevar
Offline
newbie
Last seen: 6 years 25 weeks ago
Joined: 2008-01-31
Posts: 2
Points: 0

Sorry: HTML

thepineapplehead
thepineapplehead's picture
Offline
Guru
Milton Keynes
Last seen: 29 weeks 4 days ago
Milton Keynes
Joined: 2004-06-30
Posts: 9668
Points: 801

DTD?

Verschwindende wrote:
  • CSS doesn't make pies