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;
}
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'm new so don't mind if I ask some pretty dumb questions, I've been trying to create a navigation menu that has links that pop up once the mouse hovers over, it's been great so far, the only problem I have is that the spaces between the links appear to be uneven.
Now I've searched high and low (I'm bad with google) for an answer but just can't seem to find one.
I've tried the following CSS.
padding: 0;
margin: 0 0 0 0;
TL:DR; space between an unorganised row of vertical multiline links is uneven.
Here's the http://jsfiddle.net/1f9b0h6p/ , help please? ;-;
Best regards,
Vernon
Remove unwanted line-height from the ids #top, #top li li, #top li li a and height from the id #top li:hover li
Fiddle Demo
In #top li:hover li{ change the height from 33px to auto. here is the jsfiddle
Here is my current jsfiddle for the navigation bar.
http://jsfiddle.net/EPh6j/28/
Please stretch the bar so it is a single line otherwise you will get mixed results.
The problem only occurs in ie9 as far as I know. What happens is when you hover over one of the main links the drop down comes down. However, as soon as the drop down passes the bottom of the main menu it turns invisible. What is even more confusing is that the ul border for the submenu shows but not the elements.
Here is an example of what I mean:
Notice how it is visible and then disappears past the bottom.
http://i.imgur.com/jXsoE.png
I did the above when I was trying to figure out my problem to start. In the jsfiddle, it moves all the way down as it should and is thus completely blank.
I'm completely stumped on getting this one to work.
My CSS:
.menu li li {
float:none;
position: relative;
}
.menu li ul {
left:0;
position:absolute;
top:0;
visibility:hidden;
}
.menu li:hover > ul {
top:100%;
visibility:visible ;
}
Suggestions?
I suspected a z-index issue, so I stripped them all from your fiddle. Seems to have fixed it.
BTW, "sponsorships". ;-)
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.
i am well aware of iE6 hover probs and workarounds. what i am failing to see is how to show a li on hover in IE6? for example there is a link for support and when hovered over i would like a ul li to appear and on hover out just show initial link. any tips to get me started? many thanks
html code example
http://jsfiddle.net/zdUMG/4/
Well, for one thing, your HTML is invalid.
You need to wrap the whole thing in a ul, and you need to move the submenu ul inside the li. Like this: http://jsfiddle.net/zdUMG/2/
Then, you need some simple CSS: http://jsfiddle.net/zdUMG/3/
#nav li ul {
display: none
}
#nav li:hover ul {
display: block
}
But, that won't work in IE6.
i am well aware of iE6 hover probs and
workarounds
So, what's the problem?
Just use Whatever:hover to allow a selector like #nav li:hover ul to work in IE6.