The submenu links show up white in safari on my macbook.
They should show black, as they do in every browser (ie, ff, chrome) on Windows 7.
This happens on my site: http://www.impactshred.com
Why don't the style work in Safari?
Try updating this:
#navigation ul li.hover ul li a,
#navigation ul ul li a,
#navigation ul ul li a:visited
To use :link
#navigation ul li.hover ul li a:link,
#navigation ul ul li a:link,
#navigation ul ul li a:visited
Related
Why is this piece of code not working? Only the li items in the first ul in the #menu should be red.
.l-branding .l-region #menu > ul li {background: red;}
Only the li items in the first ul in the #menu should be red.
Then you need to use :first-of-type or :first-child selector to make the first ul red:
.l-branding .l-region #menu > ul:first-of-type li {background: red;}
Demo: https://jsfiddle.net/o1muekkj/
I have a Superfish menu that, when I hover over it and the sub-menu comes into view, I wish to keep a certain background-color for the selected option.
I have written this, however, it doesn't seem to apply:
.sf-menu ul li:hover > a {background-color: #da2026;}
Would it work if I targeted the element itself and used a < arrow to work backwards?
This could be a good place to start
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover {
background-color: #da2026;
}
or maybe just
.sf-menu li li.sfHover a{
background-color: #da2026;
}
Im trying to style the submenu on my wordpress menu
http://www.milknhny.co.uk/SofiaWork/
I tried
.headermenu ul ul
etc,... and it didnt work, can anyone suggest the correct class structure?
ive already tried
.headermenu ul li ul li also
thanks
Your ul's got an id attribute. Why not use it in css:
#menu-header-menu - I think it is the top-level menu.
#menu-header-menu .sub-menu - targets ALL sub menus of top-level menu.
Not sure what you are trying to customise, but the anchor text also has a background which does not help styling, so if you remove this it can help you style the list item better.
#headermenu ul ul li a {
background: none;
}
#headermenu ul ul li a:hover, ul.headermenu ul ul li:hover {
background: none;
}
Then use :
#headermenu ul ul li {
background: red ;
}
AND:
#headermenu ul ul li:hover {
background: yellow;
}
I'm working on this page:
I'm trying to get the first dropline items to display a little further down from the main menu; say approximately half the distance as there is between the first and second droplines. The reason being that when mousing over the first dropline, it's very easy to have the mouse go back to the main menu.
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/pro_dropline7.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#dropline {position:relative; font-size:13px; height:40px; background:url(http://test.garlandcountydemocrats.org/MASTER_files/back.gif);}
#dropline, #dropline ul {padding:0; margin:0; list-style:none; width:1080px;}
#dropline table {border-collapse:collapse; margin:-1px -10px; 0 0; padding:0; width:0; height:0; font-size:13px;}
#dropline li {float:left; height:40px; margin-right:1px;}
#dropline li a {float:left; display:block; height:40px; line-height:19px; padding:0 20px 0 10px; font-family:arial, sans-serif; font-size:13px; color:#fff; text-decoration:none; font-weight:bold; text-align:center;}
#dropline li a.down {background:background:url(http://test.garlandcountydemocrats.org/MASTER_files/down.gif) no-repeat right center;}
#dropline li ul li a.down {font-size:15px; color:#ff0; font-weight:normal;}
#dropline li a:hover {white-space:nowrap; color:#444;}
#dropline li a.down:hover {white-space:nowrap; color:#444; background:background:url(http://test.garlandcountydemocrats.org/MASTER_files/down-over.gif) no-repeat right center;}
#dropline li:hover > a {color:#4AEF03;}
#dropline li:hover > a.down {color:#4AEF03; background:url(http://test.garlandcountydemocrats.org/MASTER_files/down-over.gif) no-repeat right center;}
#dropline li ul {position:absolute; top:38px; left:-9999px; z-index:10; background:url(http://test.garlandcountydemocrats.org/MASTER_files/sub-back.png) left top;}
#dropline li ul.floatRight li {float:right;}
#dropline :hover ul,
#dropline :hover ul :hover ul,
#dropline :hover ul :hover ul :hover ul,
#dropline :hover ul :hover ul :hover ul :hover ul,
#dropline :hover ul :hover ul :hover ul :hover ul :hover ul {left:0; background:url(http://test.garlandcountydemocrats.org/MASTER_files/sub-back.png) left bottom;}
#dropline :hover ul ul,
#dropline :hover ul :hover ul ul,
#dropline :hover ul :hover ul :hover ul ul,
#dropline :hover ul :hover ul :hover ul :hover ul ul {left:-9999px; top:38px; background:transparent;}
I've tried several different variations on the css code shown below without success. I'm a total newbie so any help will certainly be appreciated. Thanks in advance. Hozey
Just add padding-top to #dropline li ul
CSS:
#dropline li ul {position:absolute; padding-top:14px; top:38px; left:-9999px; z-index:10; background:url(http://test.garlandcountydemocrats.org/MASTER_files/sub-back.png) left top;}
Demo: http://jsfiddle.net/CGctj/1/
I have an .active class to apply to li a for the current page.
But it keeps being overrode by my styling the main nav div.
#nav ul li a:link, #nav ul li a:visited {
color: #BBBBBB;
}
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff;
}
I've tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn't have the id in originally, but I know that id is a step above class in the cascade). Maybe I'm missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)
Assuming you have markup like this:
<div id="nav">
<ul>
<li>foo</li>
<li>foo</li>
<li class="active">foo</li>
</ul>
</div>
Your CSS appears to work fine.
See http://jsfiddle.net/X7eAw/1/
You may need to add
#nav ul li.active a
to force specificity if the active class is not being applied. That selector is probably overkill however.
assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link
You can prevent a style from getting overriden in CSS by using !important tag:
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff !important;
}