stewharding
07-15-2011, 09:31 PM
Hi, I am having trouble with drop down menu's. I cannot get them to drop down. Funny that. I have finally got them to hide away but now cannot get them to drop. PLEASE help.
Code following
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index_4.html</title>
<style type="text/css" >
.bluetabs{
border-bottom: 1px solid gray;
}
.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
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-color:rgb(163,38,56); /*THEME CHANGE HERE*/
}
.bluetabs li a:visited{
color: #2d2b2b;
background-color: #666;
}
.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
background-color: #999
}
.bluetabs li.selected{
}
.bluetabs li.selected a{ /*selected main tab style */
background-image: /WWW/bluetabs.css); /*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 Verdana;
line-height:18px;
z-index:100;
background-color: #990000;
width: 200px;
visibility: hidden;
}
.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #000; /*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: #666;
}
</style>
</head>
<body style="text-align: center">
<div style="width: 960px;
margin: auto;
text-align: left">
<div id="masthead">
<img src="/pictures/Logo Red Cropped.jpg" alt="" align="left" height="122" width="300" hspace="50px"/>
<h1 style="font-family:'Times New Roman', Times, serif" align="right"><font color="#990000">Sanctuary Point and Districts <br />Community Bank</font></h1>
<br />
<h2 align="right"><font color="#990000" face="Times New Roman, Times, serif" >"Good for Business"<br /><br />
"Good for the Community"
</font></h2>
</div>
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="/index_4.html">Home</a></li>
<li><a href="#" rel="dropmenu1_b">Board</a></li>
<li><a href="#" rel="dropmenu2_b">Branch</a></li>
<li><a href="#" rel="dropmenu3_b">Contact Us</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1_b" class="dropmenudiv_b">
<a href="#">#1</a>
<a href="#">#2</a>
<a href="#">#3</a>
<a href="#">#4</a>
</div>
<div id="dropmenu2_b" class="dropmenudiv_b" style="width:150px">
<a href="WWW/@">@1</a>
<a href="WWW/@">@2</a>
<a href="WWW/@">@3</a>
<a href="WWW/@">@4</a>
</div>
<div id="dropmenu3_b" class="dropmenudiv_b" style="width:150px">
<a href="WWW/$">$1</a>
<a href="WWW/$">$2</a>
<a href="WWW/$">$3</a>
<a href="WWW/$">$4</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", "auto")
</script>
</div>
</body>
</html>
</html>
</code>
Cheers
Stew Harding :confused:
Code following
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index_4.html</title>
<style type="text/css" >
.bluetabs{
border-bottom: 1px solid gray;
}
.bluetabs ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
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-color:rgb(163,38,56); /*THEME CHANGE HERE*/
}
.bluetabs li a:visited{
color: #2d2b2b;
background-color: #666;
}
.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
background-color: #999
}
.bluetabs li.selected{
}
.bluetabs li.selected a{ /*selected main tab style */
background-image: /WWW/bluetabs.css); /*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 Verdana;
line-height:18px;
z-index:100;
background-color: #990000;
width: 200px;
visibility: hidden;
}
.dropmenudiv_b a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #000; /*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: #666;
}
</style>
</head>
<body style="text-align: center">
<div style="width: 960px;
margin: auto;
text-align: left">
<div id="masthead">
<img src="/pictures/Logo Red Cropped.jpg" alt="" align="left" height="122" width="300" hspace="50px"/>
<h1 style="font-family:'Times New Roman', Times, serif" align="right"><font color="#990000">Sanctuary Point and Districts <br />Community Bank</font></h1>
<br />
<h2 align="right"><font color="#990000" face="Times New Roman, Times, serif" >"Good for Business"<br /><br />
"Good for the Community"
</font></h2>
</div>
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="/index_4.html">Home</a></li>
<li><a href="#" rel="dropmenu1_b">Board</a></li>
<li><a href="#" rel="dropmenu2_b">Branch</a></li>
<li><a href="#" rel="dropmenu3_b">Contact Us</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1_b" class="dropmenudiv_b">
<a href="#">#1</a>
<a href="#">#2</a>
<a href="#">#3</a>
<a href="#">#4</a>
</div>
<div id="dropmenu2_b" class="dropmenudiv_b" style="width:150px">
<a href="WWW/@">@1</a>
<a href="WWW/@">@2</a>
<a href="WWW/@">@3</a>
<a href="WWW/@">@4</a>
</div>
<div id="dropmenu3_b" class="dropmenudiv_b" style="width:150px">
<a href="WWW/$">$1</a>
<a href="WWW/$">$2</a>
<a href="WWW/$">$3</a>
<a href="WWW/$">$4</a>
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", "auto")
</script>
</div>
</body>
</html>
</html>
</code>
Cheers
Stew Harding :confused: