I have made a css dropline menu. It's works fine, but there's a small issue if i go to the child menu, the parent menu text color should be hover text color(#ccc;), but it's move default color(#000;).
Here Jsfiddle Link: http://jsfiddle.net/thilakar/aTXbm/4/
Please help me out with this issue.
Thanks
That's because you have the hover-effect on the link. You'll have to use :hover on the li to have the hover effect even when you're hovering a submenu.
Change
.menu ul li a:hover
To
.menu ul li:hover a
And I think you'll get the effect you're after.
Related
My question here is when I hover over recipes and when I move forward to the sub menus how do I make the blue hover perfectly fit the sub headings. Like the color is not covering the text fully. And for a better understanding please do read and run my code if you like.
I am using this in the CSS
nav li:hover ul {
display: block;
}
Here is the link please do check it.
https://jsfiddle.net/harisfaisal/q68n7ro4/2/
It's because nav li {width:20%} in your code is affecting all li elements including submenu so the color covers only 20% in submenus. It can be fixed by adding width:100%; in your nav li li {} selector.
Note: your code has repeated selectors, it's better to merge them to improve readability.
I have a small bug.
See here.
When you go to Diensten and you hover the sub-pages, you'll see a bug on the end.
It hovers the last button, but also an extra small block at the bottom. It says it's active with the button Diensten.
I would like to remove the small block at the bottom.
It also feels like when i hover, that the first 2 text goes up and and the others go down.
Best regards,
Hannes Verbrugghe
contact#hvweb.be
Firstly, set top:43px; to your nav ul ul.
Then remove margin from both of your nav ul ul li a & nav ul ul li a:hover.
Hope it'll helps! :)
You need to stop padding from this style:
nav ul ul li{
padding:0;
}
I have created a drop-down menu using CSS and HTML.
What I'm wanting is for the navigation menu item to turn back to blue when I hover over a sub-menu link. For example, when I hover over the Resources1 heading under the Resources heading, I want the Resources font to change back to the colour blue.
JSFiddle: http://jsfiddle.net/SSL78/
Can someone advise me how to do this using CSS?
Just change your :hover to the anchor tag and not the li tag.
#menu li a:hover{
color:red;
}
#menu li a:hover{
color:red;
}
Here is a JSFiddle of it
I am using WordPress twentyeleven theme and developing my custom theme. The live demo of the site can be seen here. In that site you can see there are two types of menus. On the left and another one in the right side. In the right side menu you can see there is a drop-down menu.Here when you will hover on the parent menu drop down box will come but there is one problem with this. When you will hover on the parent menu the drop-down menu can be seen but with the arrow on the right side. So here I want there should be no arrow images on the sub menus when I will make hover on the parent menu. Can someone tell me how to do this?
I am really stocked with this point.
Define your child a span background-image:none;
Add this css
#access #header-right-menu ul li:hover ul a span {
background-image: none;
}
I think you should add !important after background-image: none;
#access #header-right-menu ul ul li a span {
background-image: none !important;
}
this is the link for the navigation that i am having a problem
http://www.3dghosting.com/mucci-navigation/
the icon on the second drop down menu will disappear when i mouse-over on the second drop down
can anyone help me with this?
this is the code
#navigation-main li:hover ul li.tomatoes a:hover{
background:#737475 url(images/navs/tomatoes.png) no-repeat;
background-position:left;
color:#fff;
}
You have the background image being set on :hover. Therefore when the mouse is moved to the second menu, the image disappears. Instead style the container, but have it hidden by default and then when hovering, have it displayed