CSS Menu Horizontal - .menuparent:hover styling problem
Posted: Thu May 21, 2009 2:57 pm
Hi,
I am struggling with CSS menu styling, and searched the forum but no luck on this particular issue.
Here is the code:
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
color: #FFF;
}
#primary-nav li a {
border-right: 1px solid #b2df01;
border-top: 0;
border-left: 0;
border-bottom: 0;
}
#primary-nav li li a {
border-bottom: 1px solid #C0C0C0;
border-right: 0;
border-top: 0;
border-left: 0;
background: #FFF;
color: #75BF02;
font-weight:normal;
}
#primary-nav a:hover,
#primary-nav li .menuparent:hover {
color: #75BF02;
background: #FFF;
}
#primary-nav li li a:hover,
#primary-nav li li .menuparent:hover {
color: #FFF;
background: #82BA06;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li .menuactive {
color: #E0E0E0;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #FFF;
color: #75BF02;
}
You can see the problem in attached images. The problem is menuparent text color when hovered on its child, see picture 2.
I want it to be green as in the pic 1 i.e. no changes.
I am developing this site locally (latest CMSMS version), testing with Firefox 3.
Now I've installed the site on a test sever so you can see this menu and problem in action:
http://darconny.msmqtools.com/anta_cms/
Thanks a lot
Darko
I am struggling with CSS menu styling, and searched the forum but no luck on this particular issue.
Here is the code:
/* Styling the basic apperance of the menu elements */
#primary-nav a {
display: block;
margin: 0px;
padding: 5px 10px;
text-decoration: none;
font-weight: bold;
color: #FFF;
}
#primary-nav li a {
border-right: 1px solid #b2df01;
border-top: 0;
border-left: 0;
border-bottom: 0;
}
#primary-nav li li a {
border-bottom: 1px solid #C0C0C0;
border-right: 0;
border-top: 0;
border-left: 0;
background: #FFF;
color: #75BF02;
font-weight:normal;
}
#primary-nav a:hover,
#primary-nav li .menuparent:hover {
color: #75BF02;
background: #FFF;
}
#primary-nav li li a:hover,
#primary-nav li li .menuparent:hover {
color: #FFF;
background: #82BA06;
}
/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li .menuactive {
color: #E0E0E0;
}
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
background-image: url(images/cms/arrow.gif);
background-position: center right;
background-repeat: no-repeat;
}
/* Styling the apperance of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
background-color: #FFF;
color: #75BF02;
}
You can see the problem in attached images. The problem is menuparent text color when hovered on its child, see picture 2.
I want it to be green as in the pic 1 i.e. no changes.
I am developing this site locally (latest CMSMS version), testing with Firefox 3.
Now I've installed the site on a test sever so you can see this menu and problem in action:
http://darconny.msmqtools.com/anta_cms/
Thanks a lot
Darko