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.
Related
I'm using sahifa theme.I set special css for each buton on main menu.But something block my code and it's back to orjinal theme color blue.
I tried every rules
/* Altinci Menu */
.altinci-nav{
/*background-color: #866;*/
}
.altinci-nav:hover {
background-color: #8c5de4;
}
/*ul li.altinci-nav a,*/
.altinci-nav ul li a:hover,
.altinci-nav ul li a,
.altinci-nav ul li:hover > a,
.altinci-nav ul li:active,
ul li.altinci-nav:active{
background-color: #8c5de4;
}
.altinci-nav:active {
background-color: #8c5de4;
}
.altinci-nav:focus {
background-color: #8c5de4;
}
.altinci-nav:select{
background-color: #8c5de4;
}
.altinci-nav:after{
background-color: #8c5de4;
}
I look with firefox web developer tools and it's show problem that.
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover
So I make comment this lines bu nothing change
UPDATE
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover{ background-color: transparent !important; }
Thank you.Claudiu D.
find your .altinci-nav:hover css rule and add a chained one for the current page like this
.altinci-nav:hover,
.altinci-nav.current-menu-item {
do the same for other links
I have a nested span in a li element. I want the color of the li only to change when it is hovered over. However
#sortable li:hover:not(.ce){
background-color:#3f0;
cursor:pointer;
}
does not work. The li changes color when my cursor is over the span as well. How can I make the li only change color when it --and not the span-- is hovered over?
http://jsbin.com/alExeVO/16/edit
As your <span> is part of the <li> your code behaves as expected. A hack would be to add a hover to your span so it changes to the original color.
Give the span and the li their own hover features. Check it out.
SEE DEMO HERE
ul{
list-style-type:circle;
text-align:center;
}
ul li{
display:inline-block;
border:1px solid purple;
padding:20px;
}
ul li span{
font-size:2em;
}
ul li:hover{
background:orange;
}
ul li span:hover{
background:white;
color:black;
}
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;
}
Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it's appears like inline block and it's too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.
any help or advice will be appreciated!
http://jsfiddle.net/an4Ng/
My code is:
nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}
nav ul li{
float:left;
position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{
text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
overflow:visible;
position:static;
}
nav ul li ul{
width: auto; height: auto;
display:block;
position:absolute;
border:3px solid gray;
background-color: black;
}
nav ul li ul li a{
text-decoration:none;
font-size:large;
margin-top:15px;
}
nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}
I just threw this together but how's this?
http://jsfiddle.net/PgVQC/3/
Obviously I haven't tested it in IE7 but it's how I tend to do my dropdown menus.
You might have to throw in a bit of jquery to get the menu to display in IE7, here's an example from a site I built a few weeks ago.
http://jsfiddle.net/9L4EC/2/
Here's the site: http://breteastman.com/stormwater-basics/
Here's the dropdown css & menu CSS.
#menu-main-menu{margin-left:-30px;}
#menu-main-menu a:hover {color:pink;}
#menu-main-menu{
list-style:none;
display:inline;
text-align:center;
}
.main {
margin-top:20px;
}
#menu-main-menu li{
float:left;
}
#menu-main-menu li{
padding-left:5px;
padding-right:5px;
border-right:1px #fff solid;
}
.main{
padding-top:-1000px;
}
#menu-main-menu li a{
color:#fff;
font-size:1.2em;
text-decoration:none;
}
#navigation li a:hover{
color:#399edb;
text-decoration:none;
}
/* dropdowns */
/* Hiding the other chlidren */
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;margin-left:-20px;}
ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;}
.sub-menu { position: absolute;display: none;float:none;list-style:none;}
.sub-menu li { clear: both;width:225px;background-color:#000;padding:10px;border:0;text-align:left;}
.sub-menu {list-style:none;}
basically when I go to click, the drop down goes away. Please help!
Try taking out the display:none on .sub-menu:
.sub-menu { position: absolute;float:none;list-style:none;}
That should get you closer to your solution.
You have missing stylesheet properties. I see you are using superfish dropdowns. You can include their stylesheet :
<link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
and then just adjust your website's navigation styles to what you want.
See my link : http://jsfiddle.net/nCK2P/1/ [excuse the colours used, just for the example]