www.webdeveloper.com
Results 1 to 2 of 2

Thread: Drop Down Menu (Chrome Issues)

  1. #1
    Join Date
    Nov 2013
    Posts
    10

    Drop Down Menu (Chrome Issues)

    Hello everyone,

    hopefully someone is able to help as I have spent the last 4 days trying to get this drop down to work in chrome, simply when i hover over a title, instead of the rollover menu displaying underneath the menu button it covers it completely, but in Internet Explorer when you hover over the menu bar the drop down displays underneath the menu.

    Also if you have a easier way that would be great too, but I do need to have these drop downs in a Table as I need the whole thing to be 960 width.

    CSS CODE

    HTML Code:
    	<style type="text/css">
    	body {
    	background: #ebebeb;
    	margin-top: 0px;
    }
    .banner{
    	font-family:Verdana, Geneva, sans-serif;
    }
    .cborder{
    	border-color:#999;
    	border-style:solid;
    	border-width: 1px;
    }
    .ddtext{
    	cursor:pointer;
    	text-decoration:none;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#e4e4e4;
    	font-size:17px;	
    	font-weight:bold;
    }
    .ddtext:hover{
    	font-family:Arial, Helvetica, sans-serif;
    	color:#0061aa;
    	font-size:17px;	
    	font-weight:bold;
    }
    .ddcolortabs a td:hover{
    background: #e4e4e4;
    background-image:url(template/line.gif)
    }
    .glowingtabs .selected a, .selected a table{ /*currently selected tab*/
    background-image:url(template/line.gif)
    }
    .glowingtabs .selected a, .selected a span{ /*currently selected tab*/
    	font-family:Arial, Helvetica, sans-serif;
    	color:#0061aa;
    	font-size:17px;	
    	font-weight:bold;
    }
    .dropmenudiv_d{
    position:absolute;
    top: 0;
    border: 1px solid #0061aa; /*THEME CHANGE HERE*/
    border-width: 0 1px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:14px;
    font-weight:bold;
    line-height:30px;
    z-index:100;
    background: #e4e4e4;
    width: 200px;
    visibility: hidden;
    }
    .dropmenudiv_d a{
    width: auto;
    display: block;
    text-indent: 5px;
    border: 0 solid #0061aa; /*THEME CHANGE HERE*/
    border-bottom-width: 1px;
    padding: 2px 0;
    text-decoration: none;
    color:#0061aa;
    }
    
    * html .dropmenudiv_d a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv_d a:hover{ /*THEME CHANGE HERE*/
    background: #0061aa;
    color: #e4e4e4;
    }
    </style>
    HTML CODE

    HTML Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="dropdowntabs.js"></script>
    <body>
    <table width="964" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" valign="top"><table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td align="right">&nbsp;</td>
          </tr>
        </table>
          <table width="964" border="0" align="center" cellpadding="0" cellspacing="0">
          <tr>
            <td colspan="3" align="center" valign="top" bgcolor="#0061aa" height="2"></td>
            </tr>
          <tr>
            <td align="center" valign="top" bgcolor="#0061aa" width="2"></td>
            <td width="960" align="center" valign="top">&nbsp;</td>
            <td align="center" valign="top" bgcolor="#0061aa" width ="2"></td>
          </tr>
          </table>
    <div id="glowmenu" class="ddcolortabs"><table width="964" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="1" bgcolor="#0061aa" height="2"></td>
              <td width="1" rowspan="3" bgcolor="#0061aa" height="30"></td>
    <td width="85" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext"><span><table width="85" height="30" cellspacing="0" cellpadding="0" class="border00">
      <tr>
        <td align="center">HOME</td>
      </tr>
    </table></span></a></td>
    <td width="82" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext" rel="dropmenu1_d"><span><table width="82" height="30" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">NEWS</td>
      </tr>
    </table></span></a></td>
    <td width="101" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext" rel="dropmenu2_d"><span><table width="101" height="30" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">TIPPING</td>
      </tr>
    </table></span></a></td>
    <td width="78" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext" rel="dropmenu3_d"><span><table width="78" height="30" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">CLUB</td>
      </tr>
    </table></span></a></td>
    <td width="108" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext" rel="dropmenu4_d"><span><table width="108" height="30" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">GALLERY</td>
      </tr>
    </table></span></a></td>
    <td width="80" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext"><span><table width="80" height="30" cellspacing="0" cellpadding="0" class="border00">
      <tr>
        <td align="center">SHOP</td>
      </tr>
    </table></span></a></td>
    <td width="78" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext" rel="dropmenu5_d"><span><table width="78" height="30" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">FANS</td>
      </tr>
    </table></span></a></td>
    <td width="122" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext" rel="dropmenu6_d"><span><table width="122" height="30" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center">SPONSORS</td>
      </tr>
    </table></span></a></td>
    <td width="115" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext"><span><table width="115" height="30" cellspacing="0" cellpadding="0" class="border00">
      <tr>
        <td align="center">REGISTER</td>
      </tr>
    </table></span></a></td>
    <td width="111" height="30" rowspan="3" align="center" valign="middle" bgcolor="#0061aa"><a class="ddtext"><span><table width="111" height="30" cellspacing="0" cellpadding="0" class="border00">
      <tr>
        <td align="center">CONTACT</td>
      </tr>
    </table></span></a></td>
              <td width="1" rowspan="3" bgcolor="#0061aa" height="30"></td>
              <td width="1" height="2" bgcolor="#0061aa"></td>
            </tr>
            <tr>
              <td width="1" height="26"></td>
              <td width="1" height="26"></td>
            </tr>
            <tr>
              <td width="1" height="2" bgcolor="#0061aa"></td>
              <td width="1" bgcolor="#0061aa" height="2"></td>
            </tr>
          </table></div>
    <!--News drop down menu -->                                                   
    <div id="dropmenu1_d" class="dropmenudiv_d" style="width: 200px;">
    <a href="news/">Latest</a>
    <a href="news/">Carnival Info</a>
    <a href="news/">Competition</a>
    <a href="news/">Archived</a>
    </div>
    <!--Tipping drop down menu -->                                                   
    <div id="dropmenu2_d" class="dropmenudiv_d" style="width: 200px;">
    <a href="tipping/">Register</a>
    <a href="tipping/">Ladder</a>
    <a href="tipping/">Prizes</a>
    <a href="tipping/">Terms & Conditions</a>
    </div>
    <!--Club drop down menu -->                                                   
    <div id="dropmenu3_d" class="dropmenudiv_d" style="width: 200px;">
    <a href="club/">Events</a>
    <a href="club/">Honour Board</a>
    <a href="club/">Legends</a>
    <a href="club/">Team Of The Decade</a>
    <a href="club/">Past Players</a>
    <a href="club/">Championship Results</a>
    <a href="club/">Committee Members</a>
    <a href="club/">Football Staff</a>
    <a href="club/">Membership</a>
    </div>
    <!--Gallery drop down menu -->                                                   
    <div id="dropmenu4_d" class="dropmenudiv_d" style="width: 200px;">
    <a href="gallery/">Carnival</a>
    <a href="gallery/">Training Camp</a>
    <a href="gallery/">Events</a>
    </div>
    <!--Fans drop down menu -->                                                   
    <div id="dropmenu5_d" class="dropmenudiv_d" style="width: 200px;">
    <a href="fans/">Facebook</a>
    <a href="fans/">Twitter</a>
    <a href="fans/">Wallpapers</a>
    <a href="fans/">Newsletters</a>
    <a href="fans/">Sponsor Offers</a>
    </div>
    <!--Sponsors drop down menu -->                                                   
    <div id="dropmenu6_d" class="dropmenudiv_d" style="width: 200px;">
    <a href="sponsors/">Current Sponsors</a>
    <a href="sponsors/">Sponsor Packages</a>
    </div>
    <script type="text/javascript">
    tabdropdown.init("glowmenu", "auto")
    </script>
          <table width="964" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td bgcolor="#0061aa" width="2"></td>
              <td width="960" align="center" valign="top" background="template/bg.jpg"><br /></td>
              <td bgcolor="#0061aa" width="2"></td>
            </tr>
            <tr>
              <td colspan="3" height="2" bgcolor="#0061aa"></td>
            </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>

  2. #2
    Join Date
    Nov 2013
    Location
    new york
    Posts
    68
    First error in your problem what i have found is 'you have written code in table'. Writing html code in tables is a old version. And chrome is a latest browser it is supporting html5 and css3 standards also. So better to write your code in divs.
    Next thing is you should be clear with position absolute.
    Try these things, i hope it will fix your bugs.

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