PDA

View Full Version : Drop Down Tabs (5 styles) Help w/submenu



valivaara
06-09-2009, 07:05 PM
1) Script Title: Drop Down Tabs (5 styles)

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

3) Describe problem: The submenu links are always visible and are in a row instead of 'dropping down' like they should. My code is below. Please help.

/*HTML*/


<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Location</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">Site Plan</a></li>
<li><a href="http://www.dynamicdrive.com/resources/">Area Attractions</a></li>
<li><a href="http://tools.dynamicdrive.com">Real Estate</a></li>
<li><a href="http://www.dynamicdrive.com/resources/">Community</a></li>
<li><a href="http://tools.dynamicdrive.com">Home</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

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



/* CSS Document */

.bluetabs{
display: inline;
}

.bluetabs ul{
list-style: none;
padding: 0em;
margin: 0;
width: 50em;
display: inline;
}

.bluetabs li{
float: right;
margin: 0 0.15em;
display: inline;
}

.bluetabs li a{
height: 2em;
line-height: 2em;
float: right;
width: 8.9em;
border: 0.1em solid #dcdce9;
display: inline;
color: #512600;
font-family: arial;
font-weight: bold;
font-size: 13px;
text-decoration: none;
text-shadow: #ffffff 2px -2px 2px;
text-align: center;
margin: 0em;
}

.bluetabs li a:hover{
color: #9d4b02;
}

.bluetabs li.selected{
color: #9d4b02;
}

.bluetabs li.selected a{ /*selected main tab style */
}

.bluetabs li.selected a:hover{ /*selected main tab style */
}

/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */


/* ######### 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 Verdana;
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: #edf3f3;
}

ddadmin
06-10-2009, 03:13 AM
It's hard to tell just based on the code you've posted. Please post a link to the page on your site that contains the problematic script so we can check it out.