I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.
Here is the link to jsfiddle
li {
display: inline-block;
position:relative;
line-height: 7vmax;
vertical-align: middle;
}
ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}
a:hover { background-color: #2c3e50;
padding: 1vmax;}
Does anyone know why is this? And how can I fix this? Thanks.
The flickering and jumping are caused by the padding you're adding on hover.
Simply add the padding on your normal state like this:
ul li a {
color:rgb(23,123,177);
text-decoration: none;
margin-left:5vmax;
font-size:1.3vmax;
padding: 1vmax; // add it here
}
a:hover {
background-color: #2c3e50;
// remove it here
}
I've created a fork of your code and updated it:
https://jsfiddle.net/7jsf9o2t/1/
Related
Good day! The problem appears with actual Chrome version I already have.
This is the actual Chrome version I have 99.0.4844.51
Suddenly discovered that menus (we uses simple downloaded several years before with some style change) on our website go now wrong, for example that there is no font highlight (change colors) on menu hover
Before it was:
nav ul li:hover {
color: white; /* color menu active font */
background: #005DAB;
}
Now it doesn't work and was implemented also additional:
nav ul li a:hover {
color: white;
}
To make it highlighted as before.
I'm attaching complete JS fiddle with code
But together with it appeared other very strange story - disappearing of menu buttons after hover. Because probably it cannot show in other browsers I made Youtube video to show completely.
I'm sorry but I don't know where is the mistake and what to do. Your assistance is kindly appreciated!
I think issue is happening in menu items which has children. You can try this css if it works:
#media (min-width:761px){
li.sub:hover a, li:hover a {
color: white !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li a{
color: grey !important;
}
}
#media (max-width:760px){
li.sub:hover ul a {
color: white !important;
}
li:hover a {
color: #005DAB !important;
}
li.sub ul a:hover {
color: #005DAB !important;
}
li.sub a:hover {
color: #005DAB !important;
}
li a {
color: white !important;
}
}
Q: Would anyone know how to style the sub-menu on my website so it doesn't over-lap as it does now?
I have tied to do it within the CSS but all the submenus move across, rather than just the child menus.
cherwelluk.com
Roll-over Windows and try and select timber alternatives.
.nav.navbar-nav li ul.sub-menu li a {
color: #FFF;
text-transform: uppercase;
padding: 5px 0px;
display: block;
font-size: 14px;
}
Image
You can add this CSS rule to move the sub-sub menu to the right of the sub menu:
.nav.navbar-nav ul li ul.sub-menu {
left: 200px;
}
Try adding the following CSS.
.sub-menu{margin-left:10px}
I made a simple navigation menu using a ul, but when you hover over it, the background color will not change the entire background. I think it may have to do with my padding elements. How do I fix this?
Here is a Fiddle of my code: https://jsfiddle.net/b8js8zkq/
I have looked at How do I make the hover background color fill the height of the link? and did not find a good answer there, so please don't mark this as a duplicate of that.
The problem with your code is, you have margin and padding on both <h3> and <li>. So remove them and add them as padding to the <a> tag. And you are done!
The padding and margin of each 15px constitute 30px of total padding to <a>. That's what I have done below:
.header li {
border-bottom: 1px solid #888;
font-size: 20px;
padding: 0;
}
ul h3 {
margin: 0;
padding: 0
}
.header a {
display: block;
padding: 30px;
}
Fiddle: https://jsfiddle.net/19r4a4ft/
I'd recommend changing your css from this
.header a:hover{
background-color: #f3e5d8;
}
to this
.header li:hover{
background-color: #f3e5d8;
}
This will make it so any list item within your header class will change its background colour when hovered.
https://jsfiddle.net/b8js8zkq/1/
Fixed fiddle.
You remove the padding on both <h3> and <li>, and add that same padding to the <a>-tag.
jsfiddle update
Old
.header a:hover {
background-color: #f3e5d8;
}
New
.header li:hover {
background-color: #f3e5d8;
}
You want to change the color of the li element rather than just the a tag
So i am working on a small HP for a school project and am kinda stuck with the nav bar. When i hover over "Gallery" the submenu opens and there's the problem:
I am trying and trying but can't seem to find a way to get the backgroundcolor only for the submenu area and not the whole page on the left of it...
I'm sure it's an easy fix but I am struggling atm
here's the jsfiddle:
https://jsfiddle.net/67wq84g9
i think it's something here, but if I change the width and hover over the submenu it doesn't completely change color.
.menu ul {
display: none;
width: 100%;
}
any ideas?
can you set width for
.menu ul {
list-style: none;
background: #7ebc71;
padding: 0;
position: absolute;
top: 100%;
width:80px;
}
and
.menu ul li a:hover {
background: #557F4C;
width :80px;
}
My problem is that I've got a div at the top of my site that has a dropdown menu with a float to the left, the thing is that under that div where I want to have a header whenever I hover over the menu the header floats to the left as well.
I tried to do a clear div after the top div then on css use clear:both; but it didn't really help
Here's the JSfiddle:
http://jsfiddle.net/Safushi/XRNP5/
ul {
font-size: 16px;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
background: #464646;
white-space: nowrap;
}
ul li a:hover {
background: #565656;
}
is some of the code for the menu (had to paste some code to be able to paste JSfiddle link).
It will be fixed by adding a
position: absolute;
to the ul that contains the submenu.
The child ul element needs to be absolutely positioned if you don't want it to effect the other elements.
Example Here
#top li > ul {
position:absolute;
width:100%;
}
And as Adrift mentions, you may also want to give the ul a width of 100%.
You got the layer of HTML file right,but the property "position" wrong.
Demo
Once a tag's settled position:absolute; ,it will only be positioned referring to its containing block.So you need to set #menu{postion:relative;} to let its parent-tag be the containing block.In fact,now the submenu is totally deleted from the normal flow,so it won't affect the styles of other tags.
Moreover,I highly recommend you to resist to use descendant selectors,which not only let your browser slower,and your code maintenance much more complex as well.