How do you remove the right arrow from a horizontal menu. I just want the menu item and when I hover then other selections shown below, but I do not want the rightarrow.png to show up.
Hi George, look in the file called MenuExample.css. You'll find a copy in the two theme folders that come with the kit. The first theme folder is App_Themes\Basic. The other folder is App_Themes\Enhanced. In MenuExample.css locate this rule:
/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item. One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
.PrettyMenu
ul.AspNet-Menu
li a,
.PrettyMenu
ul.AspNet-Menu
li span
{
color: black;
padding: 4px
2px 4px
8px;
border:1px
solid #648ABD;
border-bottom:
0;
background:
transparent url(arrowRight.gif)
right center
no-repeat;
}
Change the "background" property so it's value is just the word transparent.
Do the same thing for one other rule further down in the file:
/* While you hover over a list item (li) you are also hovering over a link or span because */
/* the link or span covers the interior of the li. So you can set some hover-related styles */
/* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
.PrettyMenu
ul.AspNet-Menu
li a:hover,
.PrettyMenu
ul.AspNet-Menu
li span.Asp-Menu-Hover
{
color: White;
background:
transparent url(activeArrowRight.gif)
right center
no-repeat;
ggrous
Member
5 Points
1 Post
Remove right arrow on horizontal menu
Jun 28, 2006 04:04 AM|LINK
Greetings:
How do you remove the right arrow from a horizontal menu. I just want the menu item and when I hover then other selections shown below, but I do not want the rightarrow.png to show up.
Thanks in advance.
George.
Russ Helfand
Contributor
3304 Points
744 Posts
Re: Remove right arrow on horizontal menu
Jun 28, 2006 05:11 PM|LINK
Hi George, look in the file called MenuExample.css. You'll find a copy in the two theme folders that come with the kit. The first theme folder is App_Themes\Basic. The other folder is App_Themes\Enhanced. In MenuExample.css locate this rule:
/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item. One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
.PrettyMenu
ul.AspNet-Menu li a,.PrettyMenu
ul.AspNet-Menu li span{
color: black; padding: 4px 2px 4px 8px; border:1px solid #648ABD; border-bottom: 0; background: transparent url(arrowRight.gif) right center no-repeat;}
Change the "background" property so it's value is just the word transparent.
Do the same thing for one other rule further down in the file:
/* While you hover over a list item (li) you are also hovering over a link or span because */
/* the link or span covers the interior of the li. So you can set some hover-related styles */
/* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
.PrettyMenu
ul.AspNet-Menu li a:hover,.PrettyMenu
ul.AspNet-Menu li span.Asp-Menu-Hover{
color: White; background: transparent url(activeArrowRight.gif) right center no-repeat;}
Groovybits.com