Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Menu Issues

  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Menu Issues

    I am trying to implement a CSS dropdown menu into my site. I have it put in and positioned properly but when I hover over the links the menu doesn't drop. I have checked z-index's but other than that I am lost. I zipped up all the site files and hosted them on my dropbox since the file was too big.

    http://dl.dropbox.com/u/6788275/Site%20Files.zip

    Thank you for the help!
    Last edited by fairplay89; 05-31-2011 at 06:52 PM. Reason: Added .zip archive

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Not desperate to unzip an unknown file. Can you give a link to your page, or just post your html and css here?

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, wasn't trying to be shady or anything. But I'll just attach the files here then.

    Site Code:
    Code:
    <html>
    <head>
    <title>College Covers</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    
    <!-- Start WOWSlider.com HEAD section -->
    	<link rel="stylesheet" type="text/css" href="engine1/style.css" media="screen" />
    	<style type="text/css">a#vlb{display:none}</style>
        <style media="all" type="text/css">@import "menu/menu_style.css";</style>
    <script type="text/javascript" src="engine1/jquery.js"></script>
    	<script src="../SpryAssets/SpryValidationPassword.js" type="text/javascript"></script>
    <!-- End WOWSlider.com HEAD section -->
        <link href="../SpryAssets/SpryValidationPassword.css" rel="stylesheet" type="text/css">
    <tr>
          <td colspan="2"><img src="images/index_01.jpg" alt="" width="566" height="113" border="0" align="texttop" usemap="#Map">
            <div class="login">
              <p>Username: 
                <input type="text" name="user" id="user">
              </p>
    <p>Password: <span id="sprypassword1">
      <input type="password" name="pass" id="pass">
      <span class="passwordRequiredMsg">A value is required.</span></span></p>
    <p><img src="images/Login.jpg" width="60" height="15"></p>
            </div>
            <ul class="menu">
              <li class="top"><a href="www.collegecovers.com" target="_self" class="top_link"><span>Home</span></a>
    </li>
    <li class="top"><a href="www.collegecovers.com/schools.html" target="_self" class="top_link"><span>Shop By School</span></a>
    <ul class="sub">
    <li><a href="www.collegecovers.com/alabama.html" target="_self">Alabama</a></li>
    <li><a href="www.collegecovers.com/arkansas.html" target="_self">Arkansas</a></li>
    <li><a href="www.collegecovers.com/auburn.html" target="_self">Auburn</a></li>
    <li><a href="www.collegecovers.com/clemson.html" target="_self">Clemson</a></li>
    <li><a href="www.collegecovers.com/duke.html" target="_self">Duke</a></li>
    <li><a href="www.collegecovers.com/florida.html" target="_self">Florida</a></li>
    <li><a href="www.collegecovers.com/floridastate.html" target="_self">Florida State</a></li>
    <li><a href="www.collegecovers.com/georgia.html" target="_self">Georgia</a></li>
    <li><a href="www.collegecovers.com/gonzaga.html" target="_self">Gonzaga</a></li>
    <li><a href="www.collegecovers.com/georgetown.html" target="_self">Georgetown</a></li>
    <li><a href="www.collegecovers.com/iowa.html" target="_self">Iowa</a></li>
    <li><a href="www.collegecovers.com/iowastate.html" target="_self">Iowa State</a></li>
    <li><a href="www.collegecovers.com/kansas.html" target="_self">Kansas</a></li>
    <li><a href="www.collegecovers.com/kansasstate.html" target="_self">Kansas State</a></li>
    <li><a href="www.collegecovers.com/kentucky.html" target="_self">Kentucky</a></li>
    <li><a href="www.collegecovers.com/louisianastate.html" target="_self">Louisiana State</a></li>
    <li><a href="www.collegecovers.com/michigan.html" target="_self">Michigan</a></li>
    <li><a href="www.collegecovers.com/michiganstate.html" target="_self">Michigan State</a></li>
    <li><a href="www.collegecovers.com/northcarolina.html" target="_self">North Carolina</a></li>
    <li><a href="www.collegecovers.com/northcarolinastate.html" target="_self">North Carolina State</a></li>
    <li><a href="www.collegecovers.com/nebraska.html" target="_self">Nebraska</a></li>
    <li><a href="www.collegecovers.com/ohiostate.html" target="_self">Ohio State</a></li>
    <li><a href="www.collegecovers.com/oklahoma.html" target="_self">Oklahoma</a></li>
    <li><a href="www.collegecovers.com/oklahomastate.html" target="_self">Oklahoma State</a></li>
    <li><a href="www.collegecovers.com/oregon.html" target="_self">Oregon</a></li>
    <li><a href="www.collegecovers.com/oregonstate.html" target="_self">Oregon State</a></li>
    <li><a href="www.collegecovers.com/penn.html" target="_self">Penn State</a></li>
    <li><a href="www.collegecovers.com/southcarolina.html" target="_self">Oregon</a></li>
    <li><a href="www.collegecovers.com/texas.html" target="_self">Texas</a></li>
    <li><a href="www.collegecovers.com/texasam.html" target="_self">Texas A&M</a></li>
    <li><a href="www.collegecovers.com/texastech.html" target="_self">Texas Tech</a></li>
    <li><a href="www.collegecovers.com/vanderbilt.html" target="_self">Vanderbilt</a></li>
    <li><a href="www.collegecovers.com/wakeforest.html" target="_self">Wake Forest</a></li>
    <li><a href="www.collegecovers.com/westvirginia.html" target="_self">West Virginia</a></li>
    </ul>
    </li>
    <li class="top"><a href="www.collegecovers.com/category.html" target="_self" class="top_link"><span>Shop By Category</span></a>
    <ul class="sub">
    <li><a href="www.collegecovers.com/bib.html" target="_self">Bed in a Bag</a></li>
    <li><a href="www.collegecovers.com/comforter.html" target="_self">Comforters</a></li>
    <li><a href="www.collegecovers.com/sheets.html" target="_self">Sheets</a></li>
    <li><a href="www.collegecovers.com/futon.html" target="_self">Futon Covers</a></li>
    <li><a href="www.collegecovers.com/crib.html" target="_self">Crib Covers </a></li>
    <li><a href="www.collegecovers.com/etc.html" target="_self">Accessories</a></li>
    </ul>
    </li>
    <li class="top"><a href="www.collegecovers.com/register.html" target="_self" class="top_link"><span>Register</span></a>
    </li>
    <li class="top"><a href="www.collegecovers.com/contactus.html" target="_self" class="top_link"><span>Contact Us</span></a>
    </li>
    </ul>
      <div id="schools"><img src="../schools.jpg" width="180" height="1426" border="0" usemap="#Map3">
        <map name="Map3">
          <area shape="rect" coords="-6,-4,144,35" target="schools/alabama.html">
          <area shape="rect" coords="-2,113,115,148" href="#" target="schools/clemson.html">
          <area shape="rect" coords="-2,150,121,189" href="#" target="schools/duke.html">
          <area shape="rect" coords="-7,191,99,223" href="#" target="schools/florida.html">
          <area shape="rect" coords="-10,229,148,263" href="#" target="schools/floridastate.html">
          <area shape="rect" coords="-3,271,107,304" href="#" target="schools/georgia.html">
          <area shape="rect" coords="-4,310,138,349" href="#" target="schools/georgetown.html">
          <area shape="rect" coords="-8,351,109,385" href="#" target="schools/georgetown.html">
          <area shape="rect" coords="-10,387,115,424" href="#" target="schools/iowa.html">
          <area shape="rect" coords="-10,426,121,466" href="#" target="schools/iowastate.html">
          <area shape="rect" coords="-10,507,143,544" href="#" target="schools/kansasstate.html">
          <area shape="rect" coords="-6,551,124,590" href="#" target="schools/kentucky.html">
          <area shape="rect" coords="-10,594,98,631" href="#" target="schools/lsu.html">
          <area shape="rect" coords="-10,633,126,671" href="#" target="schools/michigan.html">
          <area shape="rect" coords="1,676,152,713" href="#" target="schools/michiganstate.html">
          <area shape="rect" coords="-2,719,122,758" href="#" target="schools/nebraska.html">
          <area shape="rect" coords="-10,760,153,797" href="#" target="schools/northcarolina.html">
          <area shape="rect" coords="-5,802,179,837" href="#" target="schools/northcarolinastate.html">
          <area shape="rect" coords="-10,841,124,877" href="#" target="schools/ohiostate.html">
          <area shape="rect" coords="-10,881,126,921" href="#" target="schools/oklahoma.html">
          <area shape="rect" coords="-10,922,165,962" href="#" target="schools/oklahomastate.html">
          <area shape="rect" coords="-6,961,109,1004" href="#" target="schools/oregon.html">
          <area shape="rect" coords="-10,1004,149,1042" href="#" target="schools/oregonstate.html">
          <area shape="rect" coords="-10,1044,146,1080" href="#" target="schools/pennstate.html">
          <area shape="rect" coords="-10,1081,154,1122" href="#" target="schools/southcarolina.html">
          <area shape="rect" coords="-5,1124,126,1166" href="#" target="schools/tennessee.html">
          <area shape="rect" coords="-10,1169,133,1208" href="#" target="schools/texas.html">
          <area shape="rect" coords="0,1210,123,1251" href="#" target="schools/texasam.html">
          <area shape="rect" coords="-1,1253,125,1293" href="#" target="schools/texastech.html">
          <area shape="rect" coords="-10,1299,134,1338" href="#" target="schools/vanderbilt.html">
          <area shape="rect" coords="-10,1342,147,1381" href="#" target="schools/wakeforest.html">
          <area shape="rect" coords="-2,1386,143,1430" href="#" target="schools/westvirginia.html">
    <area shape="rect" coords="-9,467,109,499" href="#" target="schools/kansas.html">
    <area shape="rect" coords="-10,37,122,73" href="#" target="schools/arkansas.html">
          <area shape="rect" coords="-7,74,101,111" href="#" target="schools/auburn.html">
        </map>
      </div></td>
          <td>
    <p>&nbsp;</p></td>
    </tr>
        <tr>
          <td><div id="menu"></div></td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr>
          <!-- Start WOWSlider.com BODY section id=wowslider-container1 -->
          <div id="wowslider-container1">
            <div class="ws_images"> <a href="advert1.html"><img src="data1/images/ad1.jpg" alt="Ad Image 1" title="LSU Tigers" id="wows0"/></a> <a href="advert2"><img src="data1/images/ad2.jpg" alt="Ad Image 2" name="wows1" id="wows1" title="Florida State Seminoles"/></a> <a href="advert3"><img src="data1/images/ad3.jpg" alt="Ad Image 3" title="Nebraska Huskers" id="wows2"/></a> </div>
            <div class="ws_bullets">
              <div> <a href="#wows0" title="LSU Tigers"><img src="data1/tooltips/ad1.jpg" alt="ad1"/></a> <a href="#wows1" title="Florida State Seminoles"><img src="data1/tooltips/ad2.jpg" alt="ad2"/></a> <a href="#wows2" title="Nebraska Huskers"><img src="data1/tooltips/ad3.jpg" alt="ad3"/></a> </div>
            </div>
            <div id="wowslider-frame"></div>
            <div id="wowslider-shadow"></div>
          </div>
        
    <tr><script type="text/javascript" src="engine1/script.js"></script>
          <map name="Map">
            <area shape="rect" coords="13,-11,276,76" href="index.html" alt="home">
      </map>
            <img src="../nav.jpg" name="nav" width="471" height="286" hspace="" border="0" usemap="#navMap" id="nav">
      <map name="navMap">
          <area shape="rect" coords="-10,-3,123,137" href="www.collegecovers.com/bib.html">
          <area shape="rect" coords="159,-8,296,132" href="www.collegecovers.com/comforters.html">
          <area shape="rect" coords="336,-11,476,136" href="www.collegecovers.com/sheets.html">
          <area shape="rect" coords="4,155,135,315" href="www.collegecovers.com/futon.html">
          <area shape="rect" coords="164,158,304,308" href="www.collegecovers.com/crib.html">
          <area shape="rect" coords="335,162,498,321" href="www.collegecovers.com/etc.html">
    </map>
        <div class="bottom_menu"><img src="images/index_07.jpg" width="790" height="26" vspace="10" border="0" usemap="#Map2">
          <map name="Map2">
            <area shape="rect" coords="4,3,49,23" href="www.collegecovers.com">
            <area shape="rect" coords="75,1,177,29" href="www.collegecovers.com/schools.html">
            <area shape="rect" coords="194,1,304,25" href="www.collegecovers.com/category.html">
            <area shape="rect" coords="322,0,375,26" href="www.collegecovers.com/register.html">
            <area shape="rect" coords="398,2,470,25" href="www.collegecovers.com/contactus.html">
          </map>
        </div>
    <script type="text/javascript">
    var sprypassword1 = new Spry.Widget.ValidationPassword("sprypassword1");
    </script>
    </body>
    </html>
    style.css:
    Code:
    /* bottom center */
    #wowslider-container1  .ws_bullets {
        top: 5px;
        right: 10px;
    	z-index:89;
    }
    #wowslider-container1 .ws_bullets .ws_bulframe {
    	top: 20px;
    	z-index:89;
    }
    #wowslider-container1 .ws_bullets .ws_bulframe {
    	top: 20px;
    	z-index:89;
    }
    #wowslider-container1 {
    	/*	overflow: hidden; */
    	zoom: 1;
    	position: absolute;
    	width:490px;
    	height:370px;
    	margin:0 auto 37px auto;
    	z-index:89;
    	background-image: url(./bg.png);
    	top: 176px;
    	left: 214px;
    }
    #wowslider-container1 .ws_frame{
    	display:block;
    	position: absolute;
    	left:5px;
    	top:5px;
    	width:464px;
    	height:344px;
    	border:solid 8px black;
    	opacity:0.3;
    	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    	z-index:89;
    }
    #wowslider-container1 .ws_shadow{
    	width:100%;
    	background: url(./shadow.png) left 100%;
    	height:93px;
    	position: absolute;
    	left:0;
    	bottom:-37px;
    	z-index:-1;
    }
    #wowslider-container1 .ws_images{
    	position: absolute;
    	left:5px;
    	top:5px;
    	width:480px;
    	height:360px;
    	overflow:hidden;
    }
    #wowslider-container1 .ws_images a{
    	color:transparent;
    }
    
    #wowslider-container1 .ws_images img{
    	top:0;
    	left:0;
    	border:none 0;
    }
    #wowslider-container1 a{ 
    	text-decoration: none; 
    	outline: none; 
    	border: none; 
    }
    
    #wowslider-container1  .ws_bullets { 
    	font-size: 0px; 
    	padding: 10px; 
    	float: left;
    	position:absolute;
    	z-index:60;
    }
    #wowslider-container1  .ws_bullets div{
    	position:relative;
    	float:left;
    }
    #wowslider-container1 .ws_bullets a { 
    	margin: 0;
    	width:16px;
    	height:15px;
    	background: url(./bullet.png) left top;
    	float: left; 
    	text-indent: -1000px; 
    	position:relative;
    }
    #wowslider-container1 .ws_bullets a:hover{ 
    	background-position: -16px 0;
    }
    #wowslider-container1 .ws_bullets a.ws_selbull{
    	background-position: right top;
    }
    #wowslider-container1 .ws_bullets a.ws_overbull{
    	background-position: 50% top;
    }
    #wowslider-container1 .ws_bullets a:hover{
    	background-position: 50% top;
    }
    #wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
    	position:absolute;
    	display:block;
    	top:50%;
    	margin-top:-28px;
    	z-index:50;
    	height: 56px;
    	width: 29px;
    	background-image: url(./arrows.png);
    }
    #wowslider-container1 a.ws_next{
    	background-position: 100% 0; 
    	right:-24px;
    }
    #wowslider-container1 a.ws_prev {
    	left:-24px;
    	background-position: 0 0; 
    }
    #wowslider-container1 .ws-title{
    	position: absolute;
    	bottom:18px;
    	left: 18px;
    	margin-right:23px;
    	z-index: 40;
    	padding:5px;
    	color: #FFF;
    	background:#000;
        font-family: Tahoma,Arial,Helvetica;
    	font-size: 14px;
    	opacity:0.6;
    	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);	
    }
    #wowslider-container1 .ws-title div{
    	padding-top:5px;
    	font-size: 12px;
    }#wowslider-container1 .ws_bullets  a img{
    	text-indent:0;
    	display:block;
    	top:15px;
    	left:-60px;
    	visibility:hidden;
    	position:absolute;
        -moz-box-shadow: 0 0 5px #999999;
        box-shadow: 0 0 5px #999999;
        border: 5px solid #FFFFFF;
    }
    #wowslider-container1 .ws_bullets a:hover img{
    	visibility:visible;
    }
    
    #wowslider-container1 .ws_bulframe div div{
    	height:90px;
    	overflow:visible;
    	position:relative;
    }
    #wowslider-container1 .ws_bulframe div {
    	left:0;
    	overflow:hidden;
    	position:relative;
    	width:120px;
    }
    #wowslider-container1  .ws_bullets .ws_bulframe{
    	display:none;
    	overflow:visible;
    	position:absolute;
    	cursor:pointer;
        -moz-box-shadow: 0 0 5px #999999;
        box-shadow: 0 0 5px #999999;
        border: 5px solid #FFFFFF;
    }
    #wowslider-container1 .ws_bulframe span{
    	display:block;
    	position:absolute;
    	top:-11px;
    	margin-left:-5px;
    	left:60px;
    	background:url(./triangle.png);
    	width:15px;
    	height:6px;
    }
    #username {
    	position: fixed;
    	left: 643px;
    	top: 8px;
    	width: 118px;
    }
    #password {
    	position: absolute;
    	left: 643px;
    	top: 45px;
    	width: 118px;
    }
    #login {
    	position: absolute;
    }
    #login {
    	position: absolute;
    }
    #login {
    	position: absolute;
    	left: 500px;
    	top: 100px;
    }
    #password {
    	position: absolute;
    }
    #navimages {
    	position: relative;
    	right: 20px;
    }
    navimg {
    	position: absolute;
    	left: 20px;
    }
    #nav {
    	position: absolute;
    	top: 574px;
    	left: 213px;
    }
    #bottom_nav {
    	top: 900px;
    }
    .bottom_menu {
    	top: 1654px;
    	position: absolute;
    }
    .login {
    	z-index: 70;
    	position: absolute;
    	top: 0px;
    	right: 500px;
    }
    menu_style.css:
    Code:
    .bg {background: url(images/button4.gif);}
    .menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(images/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }
    .menu li.top {
    	display:block;
    	float:left;
    	position:relative;
    	z-index: 1000;
    }
    .menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
    .menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}
    .menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(images/down.gif) no-repeat right top;}
    .menu li a.top_link:hover {color:#000; background: url(images/button4.gif) no-repeat;}
    .menu li a.top_link:hover span {background:url(images/button4.gif) no-repeat right top;}
    .menu li a.top_link:hover span.down {background:url(images/button4a.gif) no-repeat right top;}
    
    .menu li:hover > a.top_link {color:#000; background: url(images/button4.gif) no-repeat;}
    .menu li:hover > a.top_link span {background:url(images/button4.gif) no-repeat right top;}
    .menu li:hover > a.top_link span.down {background:url(images/button4a.gif) no-repeat right top;}
    
    .menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
    
    .menu a:hover {visibility:visible;}
    .menu li:hover {position:relative; z-index:1000;}
    
    .menu ul, 
    .menu :hover ul ul, 
    .menu :hover ul :hover ul ul,
    .menu :hover ul :hover ul :hover ul ul,
    .menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
    
    .menu :hover ul.sub {
    	left:2px;
    	top:40px;
    	right:2px;
    	background: #fff;
    	padding:3px 0;
    	border:1px solid #999999;
    	white-space:nowrap;
    	width:200px;
    	height:auto;
    	z-index: 1000;
    }
    .menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}
    .menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}
    .menu :hover ul.sub li a.fly {background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
    .menu :hover ul.sub li a:hover {background:#999999; color:#fff;}
    .menu :hover ul.sub li a.fly:hover {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
    .menu :hover ul li:hover > a.fly {background:#999999 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
    
    .menu :hover ul :hover ul,
    .menu :hover ul :hover ul :hover ul,
    .menu :hover ul :hover ul :hover ul :hover ul,
    .menu :hover ul :hover ul :hover ul :hover ul :hover ul
    {left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:1000; height:auto;}
    My problem is that when I hover over the menu at the top nothing ever drops down. I have tried everything that I can think of so I am desperate for help.

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump. Pleeeeeeez help.

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Your HTML has many errors - check them here.

    For example, you don't have (or haven't shown) a DOCTYPE declaration. You don't have an opening body tag; you're using table-rows (tr) but they're not contained within a table.

    You need to fix these errors before the page is likely to work as you expect.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

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