this is the code for menu CSS code. It will work on Firefox but not in IE6.
.menu li a:hover .menu ul li:hover a{
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
IE6 only responds to :hover on a-elements. You try to use it on a list item.
Unless you pasted incorrectly, it looks like you also might be missing a comma between your two rules?
.menu li a:hover, /* <--- comma */
.menu ul li:hover a {
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
Unless you made a typo, the selector looks wrong.
It should be enough with this CSS, unless you have more uls inside the .menu lis.
.menu li a:hover {
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
Try this tutorial : www.learnwebdesignonline.com/css-tutorials/css-hover.htm
Razy
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.
i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.
i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and am now ready to throw this thing outta the window...
here's a jsfiddle: http://jsfiddle.net/64Grv/
so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on "more stuff" for example, all of "menupoint2, stuff, more stuff, even more stuff...." should change color.
how should i go with that? i've tried putting different classes, to no avail - i guess i put them at the wrong place. or is this possible with some kind of box?
i apologize for the messiness of my css (just a beginner messing around..), and i'd really appreciate it if somebody had concrete tips on how to do this :)
thank you very much!
CSS:
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}
you need to set :hover on li :
http://jsfiddle.net/64Grv/1/
li:hover a {color:red}
Try
li:hover a
{
color:yellow;
}
Updated fiddle link is here just changed below
Replace below code
#navigation li a:hover
color:#08298A;
text-decoration:none;
}
with
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}
I'm having an issue when I try to set the visited state, it does not seem to work.
Not sure why this is happening as the hover works but the visited does not. Any ideas why not?
#nav li:visited a{
background:#6b0c36;
}
#nav li:hover a{
background:#6b0c36;
}
what about this:
#nav li a:visited{
background:#6b0c36;
}
#nav li a:hover{
background:#6b0c36;
}
li elements cannot match the :visited pseudo-selector (think about what that would even mean). Anchors have locations that can have been visited, so if you need to change the style on a visited anchor, use:
#nav li a:visited
{
background: #6B0C36;
}
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;
}
I am using the following CSS but it never shows background images in IE6. But if I remove the filter .. AlphaLoader command, then it shows with grey background.
Here is my CSS Code
.fg-block1 ul, .fg-block3 ul
{
list-style:none;
}
.fg-block1 ul li, .fg-block3 ul li
{
padding-left:28px;
background:url(images/bullet-2.png) no-repeat left top;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border-bottom:1px dotted #fff;
text-align:left;
background-position:1px 0;
line-height:16px;
padding-bottom:5px;
margin-bottom:5px;
}
.fg-block3 ul li
{
border-bottom:none;
}
.fg-block1 ul li a, .fg-block3 ul li a
{
color:#fff;
text-decoration:none;
}
.fg-block1 ul li a:hover, .fg-block3 ul li a:hover
{
color:#fff;
text-decoration:underline;
}
Try reading this :
http://www.twinhelix.com/css/iepngfix/demo/
AlphaImageLoader hack works only if you set dimensions to the parent container where you load your png as a background.
If you add width and height and display:block to your <li>'s it should be fine. Otherwise - consider different approach.
i recommend jQuery png fix. see links below
jQuery plugin
another source
I never tried the jQuery plugin, but after dealing with a lot of PNG problems in IE6 the best fix I found is by far DD Belated PNG fix. The TwinHelix fix mentioned before presented some problems for me in certain scenarios.