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.)