Drop down menu has scroll bars on rollover

**barbeluk1** · 09-27-2012 05:56 AM

Hi,

I have a horizontal menu that has drop down menus. I'm using an 'include' to insert it into my pages.

When you rollover the menu when in the page, scroll bars appear around the menu wrapper and you can't see the drop down menus. If I give the wrapper a height, you do get to see the drop downs without the scrollbars but there's a huge gap between the menu and the content.

Here's a link to a test page:

http://www.barbel.co.uk/testindex.php

and the code from the top of that page:

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>Barbel Fishing World, barbel fishing, barbel angler - the barbel anglers online shop and forums</title>
<meta name="keywords" content="barbel fishing, barbel angling, fishing, barbel rod, bfw, angling, barbus, barbel dvds, barbel books, tackle">
<meta name="description" content="Barbel Fishing, barbel fishing, barbel fishing. The original barbel website, with forums, river reports, tackle reviews, articles and online shop. The only place to be when you're not fishing." />

<meta name="google-site-verification" content="3Vglcrf0qih4drAGPqmExJmKAeJUJ_XCLG-f-P_Bns0" />
<style type="text/css">
<!--
a.photolink {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}
a.photolink:hover {
 color: #FFFFFF; 
 text-decoration: underline;
}
a.shopmenulinks {	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
	color: #FFFFFF;
	text-decoration: none;
}
a.shopmenulinks:hover {
 color: #FFFFFF; 
 text-decoration: underline;
}
.photocaption {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
}
body {
	background-color: #000000;
}
.style3 {
	color: #FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: x-small;
}
.tablebackground {
	background-image:url('site/newhome/tiles/backfade.jpg');
	background-repeat:repeat-x;
}
.style8 {font-size: 14px; font-style: normal; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif;}
a:link {
	color: #FF9900;
}
a:visited {
	color: #FF9900;
}
a:hover {
	color: #FF9900;
}
a:active {
	color: #FF9900;
}
-->
</style>
</head>

<body>

<p>
  <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:13px;
	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:5;
	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 {
  top: 30px;
}
/*-webkit-transform: translate(0,261px);
-moz-transform: translate(0,261px);
-o-transform: translate(0,261px);
transform: translate(0,261px);*/


.menuwrap {
	width:888px;
	margin:auto;
	overflow:auto;
}

.bfwlogo {
float:left;
margin-left:0px;
margin-bottom:0px;
}



body {
	background-color: #000000;
}
</style>


</head>



<div class="menuwrap">

<div class="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="http://www.barbel.co.uk">Home</a></li>
	<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/">Forums</a>
	<div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/barbel-talk/">Barbel Talk</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/barbel-basics-juniors-forum/">Beginners Talk</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/other-species-fishing/">Other Species Talk</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/social-board/">Social Talk</a></li>
		</ul>
	</div>
	<li><a href="#url">Rivers</a>
	  <div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/river-reports-2012-13/">Reports</a></li>
			<li><a href="http://www.barbel.co.uk/site/articles/riverrecords.php">River Records</a></li>
			<li><a href="http://www.barbel.co.uk/riversfr.htm">River Directory</a></li>
			<li><a href="http://www.barbel.co.uk/tablefr.htm">BFW League</a></li>
		</ul>
		
	</div>
	</li>
	<li><a href="http://www.barbel.co.uk/galfr.htm">Gallery</a>
	  <div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/gallery/index.php?c=CATCHES&r=All">Catches</a></li>
			<li><a href="http://www.barbel.co.uk/site/gallery/index.php?c=SCENES&r=All">River Scenes</a></li>
		</ul>
		
	</div>
	</li>
	<li><a href="#url">Directory</a>
	<div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/rivers/accommodation.php">Barbel Accommodation</a></li>
			<li><a href="http://www.barbel.co.uk/site/rivers/guides.php">Barbel Guides</a></li>
			<li><a href="http://www.barbel.co.uk/site/rivers/tackleshops.php">Barbel Tackle Shops</a></li>
			<li><a href="http://www.barbel.co.uk/site/rivers/fisheries.php">Barbel Fisheries</a></li>
		</ul>
	</div>
	</li>
	<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/reviews/">Reviews</a>
	<div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/rods-under-%A350/">Rods Under £50</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/rods-under-%A3100/">Rods Under £100</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/rods-over-%A3100/">Rods Over £100</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/reels/">Reels</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/bait-artificial-baits/">Bait &amp; artificial baits</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/terminal-tackle-pva-line/">Terminal tackle, PVA &amp; Line</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/accessories/">Accessories</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/luggage-chairs-shelters/">Luggage, chairs &amp; shelters</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/books-dvds/">Books &amp; DVDs</a></li>

		</ul>
	</div>
	</li>
	<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/articles/">Articles</a>
	  <div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/technical-factual-articles/">Technical and Factual</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/tales-stories/">Tales and Stories</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/bfw-fish-reports/">BFW Fish-in Reports</a></li>
		</ul>
	</div>
	</li>
	<li><a href="http://www.barbel.co.uk/site/video/video.php">Video<b></b></a></li>
	<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/classified/">Classified</a>
	<div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/fishing-related-classified/">Fishing Classified</a></li>
			<li><a href="http://www.barbel.co.uk/site/vbulletin/forum/miscellaneous-classified/">Non-fishing Classified</a></li>
		</ul>
	</div>
	</li>
	<li><a href="http://www.barbel.co.uk/site/rodpages/rodmenu.php">BFW Rods<b></b></a></li>
	<li><a href="http://www.barbel.co.uk/site/shopv2/index.php">Shop</a></li>
	
	<li><a href="#">About BFW</a>
	<div>
		<ul>
			<li><a href="http://www.barbel.co.uk/site/aboutbfw.htm">About Us</a></li>
			<li><a href="http://www.barbel.co.uk/site/meettheteam.php">Meet the Team</a></li>
			<li><a href="http://www.barbel.co.uk/site/links.htm">Links</a></li>
			<li><a href="http://www.barbel.co.uk/site/shopv2/contactus.php">Contact Us</a></li>
		</ul>
	</div>
	<li class="pad"><b></b></li>
</ul>

</div>

</div>


  
  
</p>
<table width="995" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr class="tablebackground">
    <td><table width="100%" border="0" cellpadding="0" cellspacing="1" bordercolor="#000000" bgcolor="#663300">
      <tr>
        <td bordercolor="#663300" bgcolor="#000000"><div align="center"><img src="site/newhome/tiles/title.jpg" alt="Welcome to Barbel Fishing World" width="993" height="44" /></div></td>
      </tr>
      <tr>
        <td bordercolor="#663300" bgcolor="#000000">
<div align="center">

Many thanks in advance.

Andy

Thread: Drop down menu has scroll bars on rollover

Thread Tools

Display

Threaded View

Drop down menu has scroll bars on rollover

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions