2 replies [Last post]
Last seen: 10 years 13 weeks ago
Timezone: GMT+8
Joined: 2009-11-08
Posts: 6
Points: 9


I have just had on e problem solved..only to find another!

When I hover over items on my top menu, the whole block should be highlighted, but only a strip down the middle gets highlighted.
How do I solve this problem?

here is the page I'm testing: http://www.surftweeter.com/test.html

and here is the Css:

again I'm grateful for any help I can get!


/* -- Horizontal Text NavBar -- */
.ExtraNav {
font-family: Arial, 'Lucida Sans Unicode', 'Lucida Grande', Verdana,  sans-serif;
.ExtraNav ul {
list-style-type: none;
padding: 320px 0px 330px 320px;
.ExtraNav ul li {
display: inline;
background-color: #009966;
text-align: center;
padding: 4px 0px 4px 0px;
border: 1px solid #8f8fb3;
margin:0 0 0 0;
.ExtraNav a:link {
color: white;
display: inline;     
padding: 4px 5px 4px 5px;
text-decoration: none;
.ExtraNav a:visited {
color: purple;
padding: 4px 5px 4px 5px;
text-decoration: none;
.ExtraNav a:hover {
color: #006699;
padding: 4px 5px 4px 5px;
background-color: #d3e4fb;
text-decoration: none;
#Header .ExtraNav {
font-size: 100%;
position: relative;
} /*== this pulls the menu to the left, but be careful when I add more toplevel items 'cos I will then need to adjust the % in the item below 
that reads  ul#cssTopMenu { display:block;font-size:0;zoom:1;width:54.5%;height:30px;position:absolute;z-index: 1000;top:320px;right:5px; }in order
to prevent the menu scrunching into a second level! ===*/
#Header .ExtraNav ul { 
#Footer .ExtraNav {
background-color: #abc4e3;
#Footer .ExtraNav ul {
list-style-type: none;
padding: 0px 0px 0px 0px; /* this positions the bottom navbar diectly under the pink content wrapper */
/* ==start of dropdown stuff== */    
ul#cssTopMenu ul{display:none}
ul#cssTopMenu li:hover>*{display:block}
ul#cssTopMenu li:hover{position:relative;}
ul#cssTopMenu ul{
	position: absolute;left:-1px;top:85%;opacity:0.85;-ms-filter:"progidDXImageTransform.Microsoft.Alpha(Opacity85)";}
ul#cssTopMenu ul ul{
	position: absolute;left:85%;top:-2px;opacity:1;}
ul#cssTopMenu, ul#cssTopMenu ul{
ul#cssTopMenu table {border-collapse:collapse}
ul#cssTopMenu {
	display:block;font-size:0;zoom:1;width:54.5%;height:30px;position:absolute;z-index: 1000;top:320px;right:5px; }/*==adjust this whenI add more toplevel items==*/
ul#cssTopMenu ul{
	width:150px;height:30px;padding: 0;}
ul#cssTopMenu li{
ul#cssTopMenu a:active, ul#cssTopMenu a:focus {outline-style:none}
ul#cssTopMenu a{
	display:block;vertical-align:middle;_display:inline-block;_vertical-align:top;background-color:#009966;border-width:1px;border-style:none;border-color:#8f8fb3;text-align:center;text-decoration:none;padding:1px;_padding-left:0;font:normal 12px Arial;color: #FFFFFF;text-decoration:none;cursor:pointer;}
ul#cssTopMenu ul li {float:none;}
ul#cssTopMenu ul a{
ul#cssTopMenu li:hover>a{
	background-color:#d3e4fb;border-color:#8f8fb3;border-style:solid;font:normal 12px Arial;color: #006699;text-decoration:none;}
ul#cssTopMenu li a:hover{
	_position:relative;background-color:#d3e4fb;border-color:#8f8fb3;border-style:solid;font:normal 12px Arial;color: #006699;text-decoration:none;}
ul#cssTopMenu img{
	border: none;vertical-align: middle;margin-right:10px;}
ul#cssTopMenu img.over{display:none}
ul#cssTopMenu li:hover > a img.def  {display:none}
ul#cssTopMenu li:hover > a img.over {display:inline}
ul#cssTopMenu a:hover img.over, ul#cssTopMenu a:hover ul img.def, ul#cssTopMenu a:hover a:hover ul img.def, ul#cssTopMenu a:hover a:hover img.over, ul#cssTopMenu a:hover a:hover a:hover img.over{display:inline}
ul#cssTopMenu a:hover img.def, ul#cssTopMenu a:hover ul img.over, ul#cssTopMenu a:hover a:hover ul img.over, ul#cssTopMenu a:hover a:hover img.def, ul#cssTopMenu a:hover a:hover a:hover img.def{display:none}
ul#cssTopMenu a:hover ul, ul#cssTopMenu a:hover a:hover ul{display:block}
ul#cssTopMenu a:hover ul ul{display:none}
ul#cssTopMenu span{
	display:block;overflow:visible;background-image:url('arrv_blue_2.gif');background-position: right center;background-repeat: no-repeat;padding-right:17px}
ul#cssTopMenu li:hover>a>span{background-image:url('arrv_white_2.gif');}
ul#cssTopMenu a:hover span{_background-image:url(arrv_white_2.gif)}
ul#cssTopMenu ul span, ul#cssTopMenu a:hover table span{background-image:url('arr_blue_2.gif');padding-right:17px}
ul#cssTopMenu ul li:hover > a span{background-image:url('arr_white_2.gif');}
ul#cssTopMenu table a:hover span, ul#cssTopMenu table a:hover a:hover span{background-image:url('arr_white_2.gif')}
ul#cssTopMenu table span, ul#cssTopMenu a:hover table span{background-image:url('arr_blue_2.gif')}
ul#cssTopMenu li a.istylei1{
ul#cssTopMenu li a.istylei2{
ul#cssTopMenu li a.istylei3{
ul#cssTopMenu li a.istylei4{
ul#cssTopMenu li.istylei4:hover>a{
ul#cssTopMenu li a.istylei4:hover{
ul#cssTopMenu li a.istylei5{
ul#cssTopMenu li.istylei5:hover>a{
ul#cssTopMenu li a.istylei5:hover{

Stomme poes
Stomme poes's picture
Last seen: 8 years 16 weeks ago
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378


You seem to have taken your menu out of the code entirely on your test page you link to. Is there another test page somewhere? I only see the flyout Australia menu.

Also, I didn't mention it last time but since it's still there, I should tell you, both your Flyout menu and your RSS section have their own doctype and <html> tags... and you're only supposed to have one set of those things per page. So multiples of them may cause problems in any particular browser. One document, one doctype.

But anyway, I forget what your HTML was for this menu but do you have more than just an anchor in the menu?


When I hover over items on my top menu, the whole block should be highlighted, but only a strip down the middle gets highlighted

Usually when you see something like that, it's one of two things:
Sometimes people have two elements in the clickable area (like the anchor and then a span or something) and they have this other element holding another part of the background image (if doing sliding-doors background images) and so the hover effect needs to hit both those elements. Same goes for if the li is holding one background and the anchor the other. I don't think you have this but it's hard to tell unless I get back over to the other thread where the HTML is, assuming you didn't make changes to the HTML from last time (it's not on your test page).

Other usual problem is when the anchors are really inlines instead of blocks, meaning their widths are only as wide as their text. I see lots of places where you call them display: block, and then a bit of inline-block hack for IE that I can't see why it's needed, so it seems your anchors are really blocks...
so make sure the anchor is as wide as the whole area you want to change colour. You can check this real quick by giving the anchors an ugly border colour like
#topmenu a {
border: 1px solid #f00;
or something. Borders will screw with their widths so they may look shaken up a bit but the point is just to see an outline of them so you know if they really are as wide as you think they are.

I'm no expert, but I fake one on teh Internets

Last seen: 10 years 13 weeks ago
Timezone: GMT+8
Joined: 2009-11-08
Posts: 6
Points: 9

Thank you


I have decided that I will remove the topmenu - not worth the time I'm spending on it - rather make more content, but...I will refer to your notes when I put it back, once my site has more "flesh " to it.
Thanks again for your help.

Also thanks for telling me about the doctype mistake - I have fixed it!