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;
}
Related
my problem is rather simply explained, but I just cannot find the answer using firebug etc....
Why are my submenu items overlapping? Hover over "Aktuelles" and you can see that the transparent submenu items overlap, creating ugly white bars. The ul li elements have no minus margins assigned to them, so why are they doing it?
Thanks!
It's because you are giving .main-navigation li a fixed height. Line 946 in style.css. Remove the height. Also the box-shadow on .main-navigation li ul li a might cause some ugly design. You'd better apply the shadow on .main-navigation li ul.
The line-height of a <a> is higher than it's parent <li>.
Set the line-height in the following classes to equal values:
.main-navigation li ul li a
.main-navigation li
You have this css class:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
}
Change it like this:
.main-navigation li ul li a:hover {
background: #e3e3e3;
color: #444;
opacity: 0.75;
}
#Bram Vanroy answer is the way to go...
Also try this code
.sub-menu li {
margin: 0;
}
Because .main-navigation li style affects all the li in that menu, so this margin: 0 2.857142857rem 0 0 is making the .sub-menu li to have an ugly margin-right
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 trying to add a sub-menu to the css at http://jsfiddle.net/hozey/9dGuc/, but can't seem to get the hang of it. Could someone please help this newbie? Here's the html. I want to make a sub-menu for Horses 1, 2 and 3.
<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first">Home</li>
<li><a class="current">Portfolio ▼</a>
<ul>
<li>Horses 1</li>
<li>Horses 2</li>
<li>Horses 3</li>
<li>Dogs</li>
<li>People</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me</li>
</ul>
</div> <!-- end menu -->
</div>
Here's the css I've got so far:
body {
margin: 0px;
}
#wrapper {
border: px solid black;
margin: 1em auto;
font-family: Arial,Helvetica,sans-serif;
width: 760px;
text-align: left;
background-color: #cccccc;
overflow:hidden;
height:150px;
}
.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}
.menu ul li a {display:block;
text-decoration:none;
width:97px;
height:25px;
text-align:center;
color:white;
padding-left:1x;
border:px solid;
border-width:0 0px 0px 0;
background:;
line-height:25px;
font-size:1.0em;}
.menu ul {padding:0;margin:0;list-style-type: none; }
.menu ul li {float:left;position:relative;}
.menu ul li ul {visibility:hidden;position:absolute;}
.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block;
background:#444444;
color:white;
width:97px;
padding-left:1px;
border-right:none;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}
This will get you started, though it's far from perfect. As Zeta pointed out, without the child combinator, making a deeply nested menu is not only difficult, but it also results in bad code.
What you need to do is make sure you know exactly what each of your selectors is targeting. You want your second and third tier lis to behave differently, so you need to be certain that your selector for the second isn't also effecting the third.
Literally all that I did to solve your problem was apply the child combinator all over the place on the code you already had, as I knew you were writing code for first and second tier menu items. After that, I tacked on a simple selector to target third tier items and had a working menu.
Were I you, I'd go back through your code and make sure you know exactly what your selectors are targeting, then rewrite your CSS. It's not too hard to do, and it can result in surprisingly little code for very complex nested menus.
html (for just a third tier menu item)
...
<!-- the rest of the menu -->
<li>
Horses 1
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<!-- the rest of the menu -->
...
css (for just the third tier)
.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }
And just for a few examples of how to select different tier menus and items:
css (to target the 'header items')
.menu > ul > li { }
css (to target the first dropdown)
.menu > ul > li > ul { }
css (to target the first dropdown items)
.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }
css (to target the submenu to a dropdown item)
.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }
css (to target the submenu item of a dropdown item)
.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }
What we can gather from the above code is that you don't want to stop doing using the child combinator until you're at the last tier of your menu. In general, menu ul[n] li, where I'm using pseudocode to represent n number of uls, will target any li deeper than n depth in your menu. So in your case, it's fine to use .menu ul ul ul li as the third tier is the last one. But you wouldn't want to use .menu ul ul li to write style that's meant just for the first dropdown, as that selector also targets the third, fourth, and so on depth as well.
Just for completeness, the bare minimum to get a working deeply nested menu is done by thinking like this:
You want anything after the first ul to start off as hidden. So you can do:
.menu ul ul { visibility: hidden; }
This hides any ul that is nested within another ul. So it hits all of our submenus. And it only applies to lists within our menu.
Then you want each submenu to be visible when you're hovering over its parent's link. We can handle all of our submenus with a single selector, I think:
.menu li:hover > ul { visibility: visible; }
That should be general enough to apply to every level of a menu. Reading right to left, we make the ul visible when we're hovering over an li that is its direct parent. And, like usual, this only applies to an li that is within our menu.
Of course, you could use a, too, if you wanted.
CSS Menus are a great time to think and learn about CSS efficiency. Once you have a working menu, see if you can optimize it! The tags I posted here might not be the quickest; I just thought of them off the top of my head. I'll leave it to you to find the best selectors to use.
And that's really the basics of complex nested CSS menus. Hope it helps.
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
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;
}