Community Forums › Forums › Archived Forums › Design Tips and Tricks › wishing a hover color on top menu titles
Tagged: change color, hover, menu bar
- This topic has 2 replies, 2 voices, and was last updated 10 years, 3 months ago by yoowho.
-
AuthorPosts
-
August 8, 2014 at 7:25 am #117747yoowhoMember
hi ....
i am new to the forum and definitely no expert in wordpress so please forgive my not so technical terms...I can change things in css if i know what to change.
my designer has no more time on the budget, and my new website is missing a hover color on the menu titles, the color of the sub-menu items change when one hovers but not the top one, and I would like to change that. my designer offered me a suggestion however it doesn't make sense
my site :
http://moshecohen.netto be specific, if one places the pointer over the top item of one of the topics in the menu bar, all the subpages in that menu change color, however the top item doesn't, and I would really like it too, by not changing color i suspect people don't realize that is a page they can click to...
my designer suggested :
code that is controlling this is #subnav li a {...} (the ... indicating various lines of code. Just beneath that, you want to add a hover pseudo class, as follows:#subnav li a:hover {
background: #FF0)00; (or whatever color you want)
}
HOWEVER, adding her suggestion doesn't change anything, and when looking at the css, there is already similar language, so I am not sure what to do, anyone out there have the answer???
many thanks
Moshe
here is the css:
#subnav {
color: #000;
float: right;
font-weight:bold;
margin: -100px auto;
width:561px;}
#subnav ul {
background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.9);
float: left;
margin: 0px 0px 0px -4em;
padding: 0px;
width: 479px;
}
#subnav li {
float: left;
list-style-type: none;
}#subnav li a {
color: #000;
display: block;
font-size: 13px;
padding: 6px 10px;
position: relative;
text-decoration: none;
}#subnav li a:hover,
#subnav li a:active,
#subnav .current_page_item a,
#subnav .current-cat a,
#subnav .current-menu-item a {}
#subnav li li a,
#subnav li li a:link,
#subnav li li a:visited {
border-top-width: 0;
color: #f16124;
font-size: 12px;
margin-left: 60px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 80px;}
#subnav li li a:hover,
#subnav li li a:active {
background-color: #424c5d;
}#subnav li ul {
height: auto;
left: -9999px;
position: absolute;
width: 160px;
z-index: 9999;
}#subnav li ul a {
width: 140px;
}#subnav li ul ul {
margin: -31px 0 0 159px;
}#subnav li:hover>ul,
http://moshecohen.net
#subnav li.sfHover ul {
left: auto;August 9, 2014 at 12:57 pm #117959JanHoekParticipantFor the top link
change this:
#subnav li a:hover, #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a { }
with this
#subnav li a:hover, #subnav li a:active, #subnav .current_page_item a, #subnav .current-cat a, #subnav .current-menu-item a { color: #f16124; }
Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.
August 9, 2014 at 1:09 pm #117963yoowhoMemberBig Thanks Jan. That works!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.