First check this menu test page (in firefox)
http://www.nichewatch.com/menus/code.php

Now when i hover over "Stat" submenu is displayed.

1) I want there should be only outer border for submenu and there should be complete white background of submenu without separating orange color between submenu items.

2) When i hover over "Stat" and move mouse to submenu items; background color of "Stat" goes back to orange but i want to keep it white same as when mouse hovers it.

Thanks for your time and help

Now when i hover over "Stat" submenu is displayed.

There isn't in Internet Explorer.
IE doesn't support hover on arbitary elements, only on anchors <a>

1) just specify which edges the border should be on. border-color: top right bottom left is the order.

2) use javascript to set the background colour of the parent element.

chris i made clear that please test in firefox only
I will later make it compatible with IE.

Why would you want to go back and rework something for such a simple fix at this point ??

simply make the <a>s into block elements ( display:block; ) and apply the hover to that

Right, but there is a way to make hover's work on none-link elements.

csshover. htc.. a bit of script -- very easy to use

http://www.xs4all.nl/~peterned/csshover.html

Your all-around border is coming from here:

#menu a, #menu h2 {
font: bold 13px Verdana, Arial, Helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #FD7D41;
margin: 0;
padding: 2px 3px;
}

Your orange background on the submenu is coming from this section:

div#menu ul ul ul li a:hover
{
color: #fff;
background: #FD7D41;

}

IF you want a white background on the submenu, you are going to have to choose a different color for the text or you'll have white on white.

If you change those 2 sections to this - you might have what you want - white bg and a solild right border only.

div#menu ul ul li:hover ul a
{
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #FD7D41;
background: #fff;
/*border-width: 1px;
border-color: #FD7D41;*/

}

div#menu ul ul ul li a:hover
{
color: #fd7d41;
/*background: #FD7D41;*/
border-right: 1px solid #fd7d41;
}

But your border attribute around the ul instead of the li for the sub-menu and you should lose the seperating lines.

ul#submenu {
border: 1px solid orange;
}

li#submenu {
border: 0;
}

I believe I may have misinterpretted your question though...

Thanks LadynREd and Colyer.

BUT it doesn't work at all.

For more details

I want menu should look like this

when mouse should be over "STAT".

I want sub-menu should look like this


when mouse should be over sub-menu item(in example "Previous Tournament").


Now i think it would be very easy for you to help me

Thank You.

Do you want help, or do you want us to do it FOR you. I showed you where your major complaints were in your code, you should be able to solve this yourself knowing where you need to change.

IF you want it white on orange on hover, then you need to code the hover state that way.
If you want just an outline on the entire sub-menu area, then you need to add the border: 1px solid orange; where you want it.

I think I understand that you are trying to keep the menu highlighted even when your are Over the Sub Menu? for this you will need to use Jaavscript and hiddent text Fields as FLAGS. when you do your first OnMouseOver you will also need to change the value of yone of your flags, and set that If the value of that flag == '1' then Return False on the OnMouseOut and when you are ready to set your button to its original state you will have to set the value of the same flag to '0' or whatever you call your variables.

OnmouseOver:if (document.FORMNAME.FLAG1.value == '0'){ChangeBackgroundClassOrFunction();}

OnMouseOut:if (document.FORMNAME.FLAG1.value == '1'){BackChangeBackgroundClassOrFunction();}

+ Reset the value to original state.

I hope I make myself clear is a bit complicated if you dont understand Flags. Hope you do!

Good luck

for this you will need to use Jaavscript and hiddent text Fields as FLAGS.

No, you don't. There are ways to achieve this in CSS w/o the use of scripts.

I would love to see it.

http://alistapart.com/articles/hybrid

No javascript. Straigh CSS.

Another example: http://www.cssplay.co.uk/menus/drop_down.html

Thanks Waffles.. ya beat me to it

Not bad!
Even thogh your first example uses a JS fix and also, the second example wont ever run as smoth as the first example without JS.

Its OK to use Javascript.... A blend of good CSS with some javascript creates Dynamic HTML..

Familiar with the term DHTML ?

If you're going to use scripting it needs to be unobtrustive and accessible. If someone has JS turned off or are using assistive technology, then your page needs to display and work properly w/o JS.

CSS and Javascript does not = DHMTL
DHMTL is HTML + Javascript - hence the "HTML" designation

I wonder how many people cannot actually run javascript. Thats is the one user IM not concerned about when implementing a cross-platform site, I care about must browsers, and versions and OS's but If they dont have JS turned on thats too much to code to. Thats my point of view.

Then you are completely alienating and ignoring anyone who uses assistive technology to surf the web. People with screen readers can't use javascript. If crucial features on a site ONLY work with JS (or Flash), then you're making it impossible for a certain sector of the web-surfing public to use the site. Accessibility is a big issue, lawsuits are flying, and we ALL need to stop pretending that anyone with a disability is a non-person and should not use the web or should just put up with a pathetic lack of support for them on the web.

Bottom line, if you're going to use JS, then make sure the site works WITHOUT it too.

...and ignoring anyone who uses assistive technology to surf the web

It depends on your targeted audience.

...lawsuits are flying

What are you talking about??

I agree with cross-platform scripting. But there are certain things that wont work without javascript at all. and I dont think Google gmail has an alternate version without javascript.

Why are you so Hurt by javascript? why do you dislike it so bad? Remember! I agree with cross-platform websites....

I will change my signature to I love javascript...

of course Gmail has a non JS version, just click the Basic HTML link below the messages.

You should try it for yourself, put yourself in the position of a disability aid user and disable javascript in your browser and then try surfing some sites.
If you want results from Search Engines, then some of the important visitors are js disabled, SE crawlers and indexers.
If your content relies on JS to make it available, it isn't going to be indexed.

You are right Gmail has a non JS version, thats awsome. Still, I love javascript.