I am working on a css3 menu and I can't get it to work exactly how I want it to. I'm kind of new to this so be patient with me! :-)
What I want:
When you hover over the top level nav, I want the drop down to ease in AND I want the top level nav to slide up 20px AND I want the top level nav to have a bottom border appear. This is basically what it is doing in FF. However, when I do that, the second-tier nav is getting the same treatment. I don't want that. I want the second and third tier nav to just have a basic hover over color. I do want all of the hover transitions to be smooth so I am using some css3 for that also.
None of this is working in IE. Also, I understand that I can use Modernizr to polyfil some js to make the css transitions work in older browsers, but I don't know how to do that. Can someone tell me?
Here is my jsfiddle . Thanks for any help you can give me!
I changed this:
ul#navigation li a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
to this:
ul#navigation .topNav > a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
And added the class "topNav" to your top level navigations. The child combinator after the topNav class limits the style to only the first anchor. Fiddle is here: http://jsfiddle.net/zwVwh/
This should solve your problem:
http://jsfiddle.net/NFEt4/
Basically, you needed some way to override the styling of submenus. I did this with a new class on the nested ul.
If you haven't yet I would recommend checking out SMACSS (http://smacss.com/), I think it would help create a more flexible architecture in your CSS classes.
As for the modernizr question, maybe you could create a separate question to make sure you get a good enough answer for that?
Related
I designed a template-based web page: Website
There's a Menu "Avalúos Inmobiliarios" I don't want to show up. The solution I think of is to either change the menu background color to #173336 (like the background), take this menu off or make it 100% transparent.
The only thing my template service provider allows me in the code is to include CSS.
This is the solution I thought with my limited knowledge was (not working):
li a:visited {
background-color: #173336;
}
So do you suggest any solution with a simple code that could help?
Thanks!
Try this one
.navbar .navbar-inner .container .nav li {
display: none;
}
Hi guys i'm learning and progressing on CSS basics. I'm wondering how do you make the background of active menu bar set to orange? i tried
ul#mcolor li.active a {
color: rgb(25, 25, 25);
background-color: Black;
}
but it's not working. what do i need to add to my code to change the background color of avtive menu bar? Please point me to the right direction. Thanks in advance.
here's my code so far
http://jsfiddle.net/blackknights/jADWj/embedded/result/
Active page is currently Home
Take a look at Is there a CSS parent selector? thread and you will find out there is no way to call the parent of an a tag, in your example.
So you need to add the active class to your li tag, instead of a and then make your CSS like this one.
#mcolor li.active {
background: none repeat scroll 0 0 black !important;
}
I saw you used <font> tag with color. If you want to change the color property of your buttons with CSS, give the color to the a tag and avoid giving this to a <font>. Suggest you to take a look at W3Schools HTML tutorials.
You have to set the #active for the a element:
ul#mcolor li a.active {
background-color: orange;
color: Black;
}
In addition to that rgb(25, 25, 25) is a black color (and not a orange one).
See also http://www.colorcodehex.com/191919/.
There is way too much errors in example code. But for your current question:
ul#mcolor li.active a
you are using li.active but the active class are applied to a tag in your HTML.
Hope this will help...
Here is the fiddle which you looking for. http://jsfiddle.net/jADWj/4/embedded/result/
Just put active class to li. Thanks.
I'll try to explain this as best I can - I'm playing with a CSS vertical menu, take a look at it here:
http://codepen.io/jgclifton/pen/JIfhy
My question is, how do I ensure that the links keep their hover color when navigating to the submenu of that item.
I hope that makes sense, I tried using a:active but it seemed to have no effect.
Set the color on the hover state of the li:
.menu-side-menu-container li:hover > a
{
#FFFFFF;
}
Live Demo: http://jsfiddle.net/xxf9B/1
I am developing my first website using html5boilerplate and I'm experiencing a strange thing. When doing an anchor and clicking it, it moves to the right. This it only happens on Firefox and not on Chrome, for example.
You can see an example of this with my exact CSS: http://jsfiddle.net/PuEzv/
How I can solve it?
Thank you in advance!
Its a bit late to answer, but still:
Remove or modify following code to avoid the "jumping" for all links:
#submenu a, a:active, a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
To keep it enabled for #submenu, I think you muste write your css selectors like this:
#submenu a,#submenu a:active,#submenu a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
I hope that helped!
I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.
http://fundcentre.newireland.ie/
Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.
Can someone suggest something I could do to sort this issue out? Thanks.
Stick .content in front of all your CSS rules.
So a:hover { ... } becomes .content a:hover {...}
This will limit any damage to the content div which appears to be all yours.
There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.
.ClipboardLink a:link, a:hover, a:visited, a:active {
font-family:Arial,Verdana,Helvetica,Sans-Serif;
font-size:12px !important;
padding-bottom:2px;
text-decoration:underline !important;
// check this line making css important causes it to be underline when you hover over
}
Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...
I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!
Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...
better yet, assign to the menu id or
class an :hover event with the same
properties than does used for the menu in normal
state!!