Menu
Hi everyone,
I recently took some sliding drop down menu code from CSSplay and have only just realised that I’ve done something that’s stopping it work in IE. here’s the test page:
[url]http://bybrook.co.uk/test/slideoutmenu2.html
and the code including the CSS:
[CODE]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<style type=”text/css”>
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) stu nicholls – cssplay.co.uk. All rights reserved.
=================================================================== */
.menuHolder {
width:875px;
height:31px;
position:relative;
margin-left:10px;
float:left;
}
.menu, .menu ul {padding:0; margin:0; list-style:none; position:relative; font-family:arial, sans-serif;}
.menu {
width:875px;
height:30px;
overflow:hidden;
position:absolute;
left:0;
top:0;
}
.menu li {float:left; position:relative; z-index:10;}
.menu li a {float:left; display:block; height:31px; padding:0 10px; line-height:30px; position:relative; z-index:20; color:#ddd; text-decoration:none; font-size:12px; background:url(back.png) no-repeat center top;}
.menu li.first a {background:url(back.png) no-repeat left top;}
.menu li.pad {width:90px; height:31px;}
.menu li.pad b {display:block; height:31px; width:90px; background:url(back.png) no-repeat right top;}
.menu ul {width:180px; height:auto; position:absolute; top:-230px;
transition: 0.8s ease-in-out;
-o-transition: 0.8s ease-in-out;
-moz-transition: 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
z-index:1; padding:10px 0; background:#000;
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.menu ul li {width:180px;}
.menu ul li a {width:160px; height:20px; line-height:20px; background:transparent;}
.menu:hover {height: 260px;}
.menu a:hover {color:#FF9900;}
.menu li:hover > a {color:#FF9900;}
.menu li:hover ul {
-webkit-transform: translate(0,261px);
-moz-transform: translate(0,261px);
-o-transform: translate(0,261px);
transform: translate(0,261px);
}
#menuwrap {
width:885px;
margin:auto;
overflow:auto;
height:420px;
}
#bfwlogo {
float:left;
margin-left:0px;
margin-bottom:0px;
}
body {
background-color: #000000;
}
</style>
</head>
<body>
<div id=”menuwrap”>
<div id=”bfwlogo”>
<img src=”header.jpg” alt=”Barbel Fishing World” width=”875″ height=”137″ />
</div>
<div class=”menuHolder”>
<ul class=”menu”>
<li class=”first”><a href=”#url”>Home</a></li>
<li><a href=”#url”>Forums</a>
<div>
<ul>
<li><a href=”#url”>Barbel Talk</a></li>
<li><a href=”#url”>Beginners Talk</a></li>
<li><a href=”#url”>Other Species Talk</a></li>
<li><a href=”#url”>Social Talk</a></li>
</ul>
</div>
<li><a href=”#url”>Rivers</a>
<div>
<ul>
<li><a href=”#url”>Reports</a></li>
<li><a href=”#url”>River Records</a></li>
<li><a href=”#url”>River Directory</a></li>
<li><a href=”#url”>BFW League</a></li>
</ul>
</div>
</li>
<li><a href=”#url”>Gallery</a>
<div>
<ul>
<li><a href=”#url”>Catches</a></li>
<li><a href=”#url”>River Scenes</a></li>
</ul>
</div>
</li>
<li><a href=”#url”>Directory</a>
<div>
<ul>
<li><a href=”#url”>Barbel Accommodation</a></li>
<li><a href=”#url”>Barbel Guides</a></li>
<li><a href=”#url”>Barbel Tackle Shops</a></li>
<li><a href=”#url”>Barbel Fisheries</a></li>
</ul>
</div>
</li>
<li><a href=”#url”>Reviews</a>
<div>
<ul>
<li><a href=”#url”>Rods Under £50</a></li>
<li><a href=”#url”>Rods Under £100</a></li>
<li><a href=”#url”>Rods Over £100</a></li>
<li><a href=”#url”>Reels</a></li>
<li><a href=”#url”>Bait & artificial baits</a></li>
<li><a href=”#url”>Terminal tackle, PVA & Line</a></li>
<li><a href=”#url”>Accessories</a></li>
<li><a href=”#url”>Luggage, chairs & shelters</a></li>
<li><a href=”#url”>Books & DVDs</a></li>
</ul>
</div>
</li>
<li><a href=”#url”>Articles</a>
<div>
<ul>
<li><a href=”#url”>Technical and Factual</a></li>
<li><a href=”#url”>Tales and Stories</a></li>
<li><a href=”#url”>BFW Fish-in Reports</a></li>
</ul>
</div>
</li>
<li><a href=”#url”>Video<b></b></a></li>
<li><a href=”#url”>Classified</a>
<div>
<ul>
<li><a href=”#url”>Fishing Classified</a></li>
<li><a href=”#url”>Non-fishing Classified</a></li>
</ul>
</div>
</li>
<li><a href=”#url”>BFW Rods<b></b></a></li>
<li><a href=”#url”>Shop</a></li>
<li><a href=”#url”>Contact Us<b></b></a></li>
<li class=”pad”><b></b></li>
</ul>
</div>
</div>
</body>
</html>
Can anyone help please? I’m not a CSS expert so may well have approached the whole thing wrong!
Regards,
Andy