Hello everyone!
I'm developing a web application (aspx), and I have a radMenu in a master page. I have modified the CSS of the RadMenu, but I have a little detail wich I don't know how to fix.
When I hover on a submenu, the parent back color goes white. I attached a .jpg that will explain better the situation.
What I want is to change the white back color of the image.
thanks
I'm developing a web application (aspx), and I have a radMenu in a master page. I have modified the CSS of the RadMenu, but I have a little detail wich I don't know how to fix.
When I hover on a submenu, the parent back color goes white. I attached a .jpg that will explain better the situation.
What I want is to change the white back color of the image.
thanks
4 Answers, 1 is accepted
0
Hello Jacobo,
Can you please provide either a live url or a very simplified markup of the menu as well as the customs styles that you are using? Thus I will be able to test it locally and help you out in your particular case.
Regards,
Kate
the Telerik team
Can you please provide either a live url or a very simplified markup of the menu as well as the customs styles that you are using? Thus I will be able to test it locally and help you out in your particular case.
Regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Jacobo
Top achievements
Rank 1
answered on 15 Jan 2013, 04:33 AM
/* DEFAULTS
----------------------------------------------------------*/
body
{
/*background: #b6b7bc;*/
background: url('../Imagenes/login_back.jpg') ;
background-repeat: repeat-x;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
top: 0px;
left: 0px;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.page1
{
/*width: 960px;*/
width: 340px;
background: transparent;
/*background-color: #fff;*/
margin: 20px auto 0px auto;
border: 0px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header1
{
margin: 0px auto 0px auto;
padding: 0px;
/*background: #4b6c9e;*/
background: url('../Imagenes/menu.png') ;
width: 953px;
height:114px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.main1
{
padding: 0px 12px;
margin: 10% 10% 10 10;
min-height: 420px;
}
.botonLogin
{
background: url('../Imagenes/login%20boton.png');
border: none;
width: 164px;
height: 37px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
.footer1
{
/*width: 960px;*/
width: 120px;
background: transparent;
/*background-color: #fff;*/
margin: 20px auto 0px auto;
border: 0px solid #496077;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
width: 867px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
background-color:transparent;
}
.CajaLogin
{
/*width: 960px;*/
margin: 20px auto 0px auto;
/**border: 1px solid #496077;*/
position:absolute;
width:314px;
height:322px;
background: url('../Imagenes/cajita%20login.png');
}
.CajaLogin .Campos
{
width: 100%;
position:absolute;
top:75px;
margin-left:10%;
margin-right:10%;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.textEntry2
{
width: 320px;
border: 1px solid #ccc;
opacity:0.6;
/*filter:alpha(opacity=60); /* For IE8 and earlier */
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.clear1
{
clear: both;
}
.title
{
display: block;
position:absolute;
float: left;
text-align: left;
width: auto;
}
.title1
{
display: block;
position:absolute;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 9px;
color: White;
}
.MenuTelerik
{
position:relative;
height:50px;
left:180px;
padding: 20px 0 0 0;
}
.loginDisplay span
{
color: #7cbe31;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
/* Manuales*/
.BotonesMantenimiento
{
position:relative;
width:200px;
left:700px;
}
/*Menu*/
.RadMenu
{
float: right;
border: none !important;
background: none !important;
}
.RadMenu_Default .rmRootGroup
{
background: none !important;
border: none !important;
}
.RadMenu_Default .rmRootGroup .rmText
{
font-size: large !important;
color: White;
}
.RadMenu_Default .rmGroup .rmText
{
font-size: large !important;
color: Black;
}
/*.RadMenu_Default .rmLink:hover,
.RadMenu_Default .rmFocused,
.RadMenu_Default .rmExpanded
{
background-color: #7cbe31;
color: Black;
border-color: #7cbe31;
}*/
.RadMenu_Default .rmRootLink .rmExpanded
{
color: Green;
}
div.RadMenu .rmHorizontal .rmText:hover
{
background-image:none;
background-color:#d2d2d2;
color:green;
}
----------------------------------------------------------*/
body
{
/*background: #b6b7bc;*/
background: url('../Imagenes/login_back.jpg') ;
background-repeat: repeat-x;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
}
a:link, a:visited
{
color: #034af3;
top: 0px;
left: 0px;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 960px;
background-color: #fff;
margin: 20px auto 0px auto;
border: 1px solid #496077;
}
.page1
{
/*width: 960px;*/
width: 340px;
background: transparent;
/*background-color: #fff;*/
margin: 20px auto 0px auto;
border: 0px solid #496077;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
background: #4b6c9e;
width: 100%;
}
.header1
{
margin: 0px auto 0px auto;
padding: 0px;
/*background: #4b6c9e;*/
background: url('../Imagenes/menu.png') ;
width: 953px;
height:114px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #f9f9f9;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 12px 8px 8px 8px;
min-height: 420px;
}
.main1
{
padding: 0px 12px;
margin: 10% 10% 10 10;
min-height: 420px;
}
.botonLogin
{
background: url('../Imagenes/login%20boton.png');
border: none;
width: 164px;
height: 37px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footer
{
color: #4e5766;
padding: 8px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
.footer1
{
/*width: 960px;*/
width: 120px;
background: transparent;
/*background-color: #fff;*/
margin: 20px auto 0px auto;
border: 0px solid #496077;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
}
div.menu
{
padding: 4px 0px 4px 8px;
width: 867px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
/* FORM ELEMENTS
----------------------------------------------------------*/
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
background-color:transparent;
}
.CajaLogin
{
/*width: 960px;*/
margin: 20px auto 0px auto;
/**border: 1px solid #496077;*/
position:absolute;
width:314px;
height:322px;
background: url('../Imagenes/cajita%20login.png');
}
.CajaLogin .Campos
{
width: 100%;
position:absolute;
top:75px;
margin-left:10%;
margin-right:10%;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.textEntry2
{
width: 320px;
border: 1px solid #ccc;
opacity:0.6;
/*filter:alpha(opacity=60); /* For IE8 and earlier */
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
/* MISC
----------------------------------------------------------*/
.clear
{
clear: both;
}
.clear1
{
clear: both;
}
.title
{
display: block;
position:absolute;
float: left;
text-align: left;
width: auto;
}
.title1
{
display: block;
position:absolute;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 9px;
color: White;
}
.MenuTelerik
{
position:relative;
height:50px;
left:180px;
padding: 20px 0 0 0;
}
.loginDisplay span
{
color: #7cbe31;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
/* Manuales*/
.BotonesMantenimiento
{
position:relative;
width:200px;
left:700px;
}
/*Menu*/
.RadMenu
{
float: right;
border: none !important;
background: none !important;
}
.RadMenu_Default .rmRootGroup
{
background: none !important;
border: none !important;
}
.RadMenu_Default .rmRootGroup .rmText
{
font-size: large !important;
color: White;
}
.RadMenu_Default .rmGroup .rmText
{
font-size: large !important;
color: Black;
}
/*.RadMenu_Default .rmLink:hover,
.RadMenu_Default .rmFocused,
.RadMenu_Default .rmExpanded
{
background-color: #7cbe31;
color: Black;
border-color: #7cbe31;
}*/
.RadMenu_Default .rmRootLink .rmExpanded
{
color: Green;
}
div.RadMenu .rmHorizontal .rmText:hover
{
background-image:none;
background-color:#d2d2d2;
color:green;
}
0

Jacobo
Top achievements
Rank 1
answered on 15 Jan 2013, 04:34 AM
Thanks for the support. I've just posted the entire style sheet that Im using.
Thanks!
Thanks!
0
Hi Jacobo,
You can add the following css class selectors and set the desired color. The first one sets background-color to the root menu items while the second one sets background-color to the expanded and selected root menu items:
Kind regards,
Kate
the Telerik team
You can add the following css class selectors and set the desired color. The first one sets background-color to the root menu items while the second one sets background-color to the expanded and selected root menu items:
.RadMenu_Default .rmHorizontal a.rmRootLink {
background-color
:
green
;
}
.rmLink.rmRootLink.rmSelected.rmExpanded,
a.rmLink.rmRootLink.rmExpanded {
background-color
:
red
;
}
Kind regards,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.