Help in connecting the main and sub menu on rollover
Hello,
Can anyone help me in connecting the main menu and sub menu on rollover of the main menu. I want the border to appear from the end of main menu to the sub menu.
Below is the css code
[code]
.bluetabs{
}
.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 #000;
color: #2d2b2b;
background: white url(media/bluetab.gif) top left repeat-x; /*THEME CHANGE HERE*/
}
.bluetabs li a:visited{
color: #2d2b2b;
}
.bluetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}
.bluetabs li.selected{
}
.bluetabs li.selected a{ /*selected main tab style */
background-image: url(media/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: 1;
border: 1px solid black; /*THEME CHANGE HERE*/
border-width: 1 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 #000;
border-bottom-width: 1px;
padding: 2px 0;
}
* html .dropmenudiv_b a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv_b a:hover{ /*THEME CHANGE HERE*/
background-color: #fff;
}
.menudropdown {
BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 8px; PADDING-LEFT: 8px; VISIBILITY: hidden; PADDING-BOTTOM: 8px;
BORDER-LEFT: #ccc 1px solid; WIDTH: 300px; PADDING-TOP: 8px; BORDER-BOTTOM: #ccc 1px solid; POSITION: absolute; BACKGROUND-COLOR: #fff
}
[code]
below is my html code
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Tabs</TITLE>
<script type="text/javascript" src="dropdowntabs.js"> </script>
<link rel="stylesheet" type="text/css" href="bluetabs.css" />
</HEAD>
<BODY>
<div id="bluemenu" class="bluetabs">
<ul>
<li><a href="" rel="dropmenu1_b">Home</a></li>
<li><a href="" rel="dropmenu2_b">Products</a></li>
<li><a href="" rel="dropmenu3_b">Gallery</a></li>
<li><a href="" rel="dropmenu4_b">Services</a></li>
<li><a href="" rel="dropmenu5_b">Contact us</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1_b" class="menudropdown">
<a href="javascript:void(0)">Sub Home for Menu</a>
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_b" class="menudropdown">
<TABLE width="100%">
<TBODY>
<TR>
<TD><a href="javascript:void(0)">About us</a></TD>
<TD><a href="javascript:void(0)">Mission</a></TD>
<TD><a href="javascript:void(0)">History</a></TD>
</TR>
<TR>
<TD><a href="javascript:void(0)">Careers</a></TD>
<TD><a href="javascript:void(0)">Team</a></TD>
<TD><a href="javascript:void(0)">Join us</a></TD>
</TR>
</TBODY>
</TABLE>
</div>
<!--3rd drop down menu -->
<div id="dropmenu3_b" class="menudropdown">
<TABLE width="100%">
<TR>
<TD><a href="javascript:void(0)">Sub Gallery for Menu</a></TD>
</TR>
</TABLE>
</div>
<!--4th drop down menu -->
<div id="dropmenu4_b" class="menudropdown">
<a href="javascript:void(0)">Sub Services for Menu</a>
</div>
<!--4th drop down menu -->
<div id="dropmenu5_b" class="menudropdown">
<a href="javascript:void(0)">Sub Contacts for Menu</a>
</div>
<script type="text/javascript">
tabdropdown.init("bluemenu")
</script>
</BODY>
</HTML>
[code]
I have attached the javascript file to this post.
Thanks in advance.
CSS Codes
Reply With Quote
Bookmarks