I have a menu which I'm mimicking an old tape deck. Each list item has a background image of a button. When an item is selected a new background image shows the button in the down position. however, I can still see the other image underneath. How can I have the original image replaced by the selected image. Please see http://www.saintalvia.com to see what I mean.
Thanks!
#access a {
font-family:Roboto;
text-transform:uppercase;
font-size:12px;
padding: 0 9px 2px 9px;
-moz-border-radius:0 0 0 0 !important;
-webkit-border-radius:0 !important;
-webkit-border-radius:0 !important;
border-radius:0 !important;
border-radius:0 !important;
}
#access .menu-header li,
div.menu li {
margin-top:0px;
height:80px;
}
#access ul li {
margin-right:8px;
background-repeat:no-repeat;
background-position:bottom;
background-image:url(http://www.saintalvia.com/wp-content/uploads/2013/02/newButton.png);
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access li.selected > a,
#access ul li.current-menu-parent > a,
#access ul li.current_page_item > a:hover,
#access ul li.current-menu-item > a:hover {
height:80px;
background-color:transparent;
background-repeat:no-repeat;
background-position:bottom;
background-image:url(http://www.saintalvia.com/wp-content/uploads/2013/02/buttonDownNew.png)
}
You have the "up" image set on the <li> and the down set on <a>. Set the down on the current <li> instead of the <a>
To improve this I would also combine the up and down versions of the button into one image to create what is called a CSS sprite. Then when you want to shift the button to the down position all you need to do is tweak the background-position.
You've got one image on the a tag and one on the li tag, so when the page goes to the link you click on you should change the image on the same tag which it was on before, not add it on top on another tag. Either tag should work, you just need to pick one.
It looks like the li has the background of the up button and the li a has the down button background.
Related
The main header menu of my site has an hover effect.But when i mouse over to the right of each menu item the text color is not changing but when i mouse over near the text it changes.
I have tried
.menu li:hover{background:#222;
color:white;}
.menu a:hover{
color:white;
}
but this didn't work.work. Please Help to make the hover effect.Thank you
try this,i think its compelete:
.menu li:hover{
background:#000;
}
.menu li a:link,
.menu li a:visited{
color:#000;
}
.menu li:hover a{
color:#FFF;
}
You need to change the color of the anchor's text when hovering over the li. Therefore use the following:
.menu li:hover a {
color: #fff;
}
Change it to this:
.menu li:hover{
background:#222;
color:white
}
.menu li:hover a{
color:white;
}
Try this,
.menu li:hover{
background:#222;
}
.menu li:hover a{
color:white;
}
This may be because your anchor has already css defined for itself. you need to override them.
The following CSS code creates a NAV bar with some sample boxes within a container.
I was having problems with the Hover staying on so with some advice from here I included the extra code (second block of code down)
.dropdown>ul>li>a:hover {margin-bottom:20px;}
This extra code worked well
However it has had a side effect on my DIV boxleft in that in wont stay left - as I move the mouse across the NAV bar it moves with it......... I just want to keep DIV boxleft on the left hand side. Can you help? Many thanks.
/* Navigation Style */
.dropdown { position:relative; font-family: arial, sans-serif; width:100%; height:40px; border:1px solid #666666; font-size:14px; color:#ffffff; background:#333333; z-index:2; }
/* Basic List Styling (First/Base Level) */
.dropdown ul {padding:0; margin:0; list-style: none;}
.dropdown ul li {float:left; position:relative;}
.dropdown ul li a { border-right:1px solid #666666; padding:12px 8px 12px 8px; display:block; text-decoration:none; color:#000; text-align:center; color:#fff;}
.dropdown>ul>li>a:hover {margin-bottom:20px;}
.dropdown ul li a:hover {color:#ffffff; background:#232323;}
/* Second Level Drop Down Menu */
.dropdown ul li ul {display: none;}
.dropdown ul li:hover ul { font-size:13px; display:block; position:absolute; top:41px; min-width:150px; left:0;}
.dropdown ul li:hover ul li a {display:block; background:#000; color:#ffffff; width:170px; }
.dropdown ul li:hover ul li a:hover {background:#666666; color:#ffffff;}
/* Third Level Drop Down Menu */
.dropdown ul li:hover ul li ul {display: none;}
.dropdown ul li:hover ul li:hover ul { display:block; position:absolute; left:145px; top:0; }
#container {
overflow:hidden;
background-color:yellow;
width:1250px;
padding 10px 10px 10px 10px;
border:1px solid #666666;
margin: 0 auto;
}
.boxleft {
float:left;
background-color:blue;
margin-top:30px;
margin-bottom:10px;
margin-left:10px;
margin-right:10px;
width:600px;
border:1px solid #666666;
z-index:1;
}
EDIT
Fiddle here : - http://jsfiddle.net/LUzNm/
Rather than address this band-aid fix, let's address the root problem!
To begin, you don't need that margin-bottom: 20px thing. That was never the cause of your initial problem. Rather, it was due to the fact that your .dropdown bar is 40px in height, but your actual dropdowns are absolutely positioned at 41px from the top. If the browser registers a mouse event while the mouse is over that 1px gap, the dropdown will close.
Now, it seems like you want that 41px so a border: 1px solid #666666 on your .dropdown bar will appear. We can do that still, but we'll just be adding that border to your hover menu.
And finally, let's get some best practices going. Padding can be useful, but padding for this use case sucks. Its far easier and more accurate to instead use line-height to achieve the height and spacing in our <a> tags rather than padding, and it allows us to do away with the extra padding-top and padding-bottom declarations on your site title! By setting line-height to 40px, we immediately match the height of the .dropdown bar at all times (and if you're using something like LESS or SASS, it becomes a great variable to reuse).
With all that being said, here's the updated fiddle: http://jsfiddle.net/2r5Mz/
One more thing that I would also recommend doing is moving the entire .dropdown container out of #container. The reason for this is #container has overflow: hidden set, which can mean chopping off your dropdown if the content isn't of sufficient height. Simply moving this .dropdown out of that div solves the issue.
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
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.
I need some more help on my superfish menu here:
http://web288.merkur.ibone.ch/klingler/
I would like to modify the main buttons on hover and current. However this does also change the submenu entries what I do not want. I am not a CSS expert but somehow the submenu entries do inherit the properties. What I tried to add is the following
.sf-menu a:hover,
.sf-menu li.current a,
.sf-menu li.sfHover a {
background: #e24c4c url(../../images/bg-top-a-active.png) no-repeat center bottom;
margin: 5px;
padding: 0 10px;
height: 35px;
line-height: 35px;
border-radius: 5px;
}
This does what I want for the main buttons but it does also change the submenu entries... What am I doing wrong?
As I understand you only want to select the a elements which are direct children of li.current or li.sfHover.
.sf-menu a:hover,
.sf-menu li.current > a,
.sf-menu li.sfHover > a {