Drop Down Tabs Menu

[Ryan Fitton]

1) Script Title: Drop Down Tabs Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem:
I have just installed this script on mt website and it works great except from when i hover over an menu it doesnt show up correct, like this: here (http://ryanfitton.890m.com/dd/website_hover_1.PNG).

Here is also an online version: here (http://ryanfitton.890m.com/dd/index.htm).

The css code for the drop down tabs is here:

.bluetabs{
border-bottom: 1px solid;
}

.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px arial;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.bluetabs li{
display: inline;
margin: 0;
}

.bluetabs li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}

.bluetabs li a:visited{
color: #2d2b2b;
}

.bluetabs li a:hover{
text-decoration: none;
color: #2d2b2b;
}

.bluetabs li.selected{
}

.bluetabs li.selected a{ /*selected main tab style */
background-image: url(bluetabactive.gif); /*THEME CHANGE HERE*/
border-bottom-color: white;
}

.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_b{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #dbdada;
}

My css code is here:

body {
margin-bottom: 16px;
font-family: normal;
font-size: 16px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
font-family: Arial;
background-image: url("../images/backgrounds/blue.gif");



/*----------------------------------------------------------------
Main border arond the body of the website
----------------------------------------------------------------*/
}
div.website_border {
border:1px solid #000000;
background-color: #FFFFFF;
width: 700px;
left: 50%;
margin-left: -350px;
position: absolute;



/*----------------------------------------------------------------
Navigation menu for the website and underneath bar
----------------------------------------------------------------*/
}
div.navigation_menu {
text-align: center;
font-family: Arial;
font-size: 16px;
font-weight: normal;
color: #000000;
text-decoration: none;
width: 700px;

}
div.navigation_menu a:visited {
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: normal;
text-decoration: none;
text-decoration: none;

}
div.navigation_menu a:link {
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: normal;
text-decoration: none;
text-decoration: none;

}
div.navigation_menu a:hover {
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;

}
div.navigation_menu_underneath {
text-align: center;
font-family: Arial;
font-size: 16px;
font-weight: normal;
color: #000000;
text-decoration: none;
width: 700px;
height: 20px;



/*----------------------------------------------------------------
Main websitelogo header
----------------------------------------------------------------*/
}
div.main_logo {
text-align: left;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
width: 700px;
height: 150px;



/*----------------------------------------------------------------
Spacer
----------------------------------------------------------------*/
}
div.spacer {
text-align:center;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
height: auto;
width: 700px;



/*----------------------------------------------------------------
Main text formatting for website
----------------------------------------------------------------*/
}
div.title {
text-align:left;
font-family: Arial;
font-size: 16px;
color: #000000;
font-weight: bold;
text-decoration: underline;
width: 670px;
margin-left: 15px;
margin-right: 15px;

}
div.sub_heading {
text-align:left;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: underline;
width: 670px;
margin-left: 15px;
margin-right: 15px;

}
div.text {
text-align:left;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
width: 670px;
margin-left: 15px;
margin-right: 15px;



/*----------------------------------------------------------------
Photo .div for the photo album
----------------------------------------------------------------*/
}
div.photo_album {
text-align:center;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
width: 670px;
margin-left: 15px;
margin-right: 15px;



/*----------------------------------------------------------------
Eportfolio settings
----------------------------------------------------------------*/
}
div.photo_eportfolio {
text-align:center;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
width: 170px;
height: 244px;

}
div.text_eportfolio {
height: 170px;
text-align:left;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
width: 670px;
margin-left: 15px;
margin-right: 15px;



/*----------------------------------------------------------------
Copyright formatting and settings
----------------------------------------------------------------*/
}
div.copyright {
text-align: center;
font-family: Arial;
font-size: 14px;
color: #000000;
text-decoration: none;
background-image: url("../images/copyright_bottom.jpg");
height: 20px;
width: 700px;

}
div.copyright a:link {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-decoration: none;
}
div.copyright a:visited {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-decoration: none;

}
div.copyright a:hover {
color: #000000;
font-family: Arial;
font-size: 14px;
font-weight: normal;
text-decoration: none;
text-decoration: none;



/*----------------------------------------------------------------
Settings for bottom images
----------------------------------------------------------------*/
}
div.info_bottom {
text-align: center;
font-family: Arial;
font-size: 16px;
color: #000000;
text-decoration: none;
height: 30px;
width: 100%



/*----------------------------------------------------------------
Hyperlink settings
----------------------------------------------------------------*/
}
a:link {
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: normal;
text-decoration: none;
text-decoration: underline;

}
a:visited {
color: #000000;
font-family: Arial;
font-size: 16px;
font-weight: normal;
text-decoration: none;
text-decoration: underline;

}
a:hover {
color: #3399FF;
font-family: Arial;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: none;
text-decoration: underline;
}

[ddadmin]

Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves is outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<!--1st drop down menu --> <!--Who Am I Drop Down Menu -->
<div id="dropmenu1_b" class="dropmenudiv_b">
<a href="about_me.htm">Who Am I?</a>
</div>


<!--2nd drop down menu --> <!-- Other Stuff Drop Down Menu -->
<div id="dropmenu2_b" class="dropmenudiv_b" style="width: 150px;">
<a href="links.htm">Links</a>
<a href="photo_gallery.htm">Photo Gallery</a>
<a href="nitro_car.htm">My Nitro Car</a>

<a href="memory_convertor.htm">Memory Convertor</a>
<a href="the_end_of_the_internet/index.htm" target="_blank">The End Of The Internet</a>
<a href="eportfolio/eportfolio_home.htm">Eportfolio</a>
</div>


<!--3rd drop down menu --> <!-- Contact Me Drop Down Menu -->
<div id="dropmenu3_b" class="dropmenudiv_b" style="width: 150px;">
<a href="contact_me.htm">Contact Me</a>
<a href="mailto:ryan.fitton@hotmail.co.uk?Subject=E-Mail from website">E-Mail</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu")
</script>

</body>