Arrow issue with jQuery Multi Level CSS Menu #2

[Artimesia]

Menu found at DD: http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/


I am using this menu and overall it is great....as you might guess, I have an issue (I see others do as well).

The arrow in the sub-menu sometimes appears overly large when viewing in IE. It is when the site is first opened and only on the first menu item in the list. Opening another menu item or opening the first menu again then seems to resolve the issue.

I can't see a difference between the first and any of the other menus. I even tried switching their order and the first one always has this issue where it didn't in another placement. So not my coding.

Any ideas....I'll take anything....getting panic stricken as the site is to go live on Monday.


Thank you for any help and direction:
C.D.





.jqueryslidemenu{
font: bold 11px Verdana;
background: #d4be89 url(images/gold_background2.jpg);
width: 100%;
border-bottom: 1px solid #804000;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #d4be89 url(images/gold_background2.jpg); /*background of tabs (default state)*/
color: white;
padding-top: 10px;
padding-right: 8px;
padding-bottom: 5px;
padding-left: 9px;
border-right: 1px solid #778;
border-bottom: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ffffff;
}

.jqueryslidemenu ul li a:hover{
background: #c6982a; /*tab link background during hover state*/
color: #ffffff;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 12px Verdana;
width: 200px; /*width of sub menus*/
padding-top: 11px;
padding-right: 3px;
padding-left: 6px;
padding-bottom: 9px;
margin: 0;
background: #ab8e41;
border-top-width: 0;
border-bottom: 1px solid #D6C68D;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #b89d57;
color: #ffffff;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 13px;
right: 4px;
padding-left: 5px;
}

.rightarrowclass{
position: absolute;
top: 9px;
right: 4px;
}

[ddadmin]

Please format any code in your post using the CODE tag. This makes it a lot easier to read it.

You can try explicitly defining dimensions for the arrow images in the CSS:


.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
width: 30px;
height: 30px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
width: 30px;
height: 30px;
}

[Artimesia]

I apologize, I didn't realize about the 'code tag'.

You are brilliant....a genius....a true mentor....in other words, it worked. It was so simple all along. Arghhh.

Thank you so very much for your help.

C.D.