small change request in Drop Down Tabs (5 styles)

[madhavaram123]

Hi All,

I am try to use the Drop Down Tabs (5 styles) example 2.

Bu using the above example i am able to creae the menu. But I would like to modify that css as such that it should appear like in this site.

www.ge.com

Could anyone give any source or an example so that i cna incorporate and it is very urgent.

Thanks in advance

[Lpe04]

Looks like javascript

[Nile]

Make this your CSS:


.bluetabs
{
border:none;
}

.bluetabs ul
{
margin-left:0;
margin-top:1px;
margin-bottom:0;
font:bold 12px arial;
list-style-type:none;
text-align:left;
border-top:1px dashed #999;
border-bottom:1px dashed #999;
padding:3px 0;
}

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

.bluetabs li a
{
text-decoration:none;
margin-right:3px;
border:none;
color:#333;
background:#FFF;
padding:3px 8px;
}

.bluetabs li a:visited
{
color:#333;
}

.bluetabs li.selected a
{
text-decoration:none;
color:#3B73B9;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
padding:3px 7px 2px;
}

.bluetabs li.selected a:hover
{
text-decoration:none;
color:#3B73B9;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
z-index:101;
position:relative;
padding:3px 7px 2px;
}

.dropmenudiv_b
{
position:absolute;
top:0;
border:1px solid #ccc;
border-top:none;
font:normal 12px Verdana;
z-index:100;
background-color:#FFF;
width:200px;
visibility:hidden;
}

.dropmenudiv_b a
{
width:auto;
display:block;
text-indent:5px;
border:none;
border-bottom-width:1px;
text-decoration:none;
color:#000;
padding:2px 0;
}

* html .dropmenudiv_b a
{
width:100%;
}

.dropmenudiv_b a:hover
{
background-color:#edf3f3;
}

.bluetabs li a:hover,.bluetabs li.selected
{
color:#3B73B9;
}

[madhavaram123]

Thanks a lot wiht the css.

But I see a top border coming to the submenu in the site whihc i have mentioned. But with this css it does not come up.

Could you please check it. I have attached both the jpeg files.

I am attaching the css and the html file whihc I have used.

Thanks in advance.

[Nile]

Hmm, I don't know. You can change your css to this:


.bluetabs
{
border:none;
}

.bluetabs ul
{
margin-left:0;
margin-top:1px;
margin-bottom:0;
font:bold 12px arial;
list-style-type:none;
text-align:left;
border-top:1px dashed #999;
border-bottom:1px dashed #999;
padding:3px 0;
}

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

.bluetabs li a
{
text-decoration:none;
margin-right:3px;
border:none;
color:#333;
background:#FFF;
padding:3px 8px;
}

.bluetabs li a:visited
{
color:#333;
}

.bluetabs li.selected a
{
text-decoration:none;
color:#3B73B9;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
padding:3px 7px;
}

.bluetabs li.selected a:hover
{
text-decoration:none;
color:#3B73B9;
border-top:1px solid #CCC;
border-left:1px solid #CCC;
border-right:1px solid #CCC;
z-index:101;
position:relative;
padding:3px 7px 2px;
}

.dropmenudiv_b
{
position:absolute;
top:0;
border:1px solid #ccc;
font:normal 12px Verdana;
z-index:100;
background-color:#FFF;
width:200px;
visibility:hidden;
}

.dropmenudiv_b a
{
width:auto;
display:block;
text-indent:5px;
border:none;
border-bottom-width:1px;
text-decoration:none;
color:#3B73B9;
font-size:11px;
padding:2px 0;
}

* html .dropmenudiv_b a
{
width:100%;
}

.dropmenudiv_b a:hover
{
text-decoration:underline;
}

.bluetabs li a:hover,.bluetabs li.selected
{
color:#3B73B9;
}


(I also worked a little on the sub menu links.)