www.webdeveloper.com
Results 1 to 3 of 3

Thread: Drop down menu has scroll bars on rollover

Hybrid View

  1. #1
    Join Date
    Apr 2008
    Posts
    42

    Drop down menu has scroll bars on rollover

    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

  2. #2
    Join Date
    Apr 2008
    Posts
    42
    Hi again all,

    Do you think this is even a CSS question or should I post in the PHP forum? It rare not to have had a response, which implies I've posted in the wrong place....

    Cheers,

    Andy

  3. #3
    Join Date
    Apr 2008
    Posts
    42
    I managed to fix this by giving the wrapped a:

    overflow:hidden;

    It seems to have worked...

    Cheers,

    andy

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles