I'm here to ask a question I know is simple, but I just can not get it to work. I want to change the background color of my li tag to a different color once a user hovers over it.
HTML:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
CSS:
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: #aaa;
background-color: #333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
nav ul li:hover {
background-color: #666;
color: #000;
}
Any help will be greatly appreciated, thanks!
add an a to the hover and it works
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
}
nav ul li a {
color: #aaa;
background-color: #333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
nav ul li a:hover {
background-color: #666;
color: #000;
}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
The reason it doesn't work is that there are links inside the li tags - <a> tags. Those take on their own color when hovering. So you'll have to define your desired color for li a:hover { color: ...}
Your styling for the anchor tag is interfering with your li:hover instructions.
You have to think of them as layers, especially when you're using them as block elements. The dimensions of the anchor tag are bigger than the ones of the li tag, hence you don't see the hover effect. I corrected your code. This works:
nav {
background-color: #333;
margin: 0;
overflow: hidden;
width: 100%;
text-align: right;
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
list-style-type: none;
background-color: #333;
}
nav ul li:hover {
background-color: #666;
color: #000;
}
nav ul li a {
color: #aaa;
background: transparent;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Try to see, if you notice what I changed. This helps you to understand what was wrong in the first place. :)
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 3 years ago.
I would like to know how to fix this issue I have tried everything that I can think of. Any help would be great. all my paddings and margins are set to zero or auto.
nothing that is obvious to me is causing the issue, I have tried first and last child float left and right but this did not work.
#nav {
text-align: center;
margin: 0;
overflow: hidden;
display: block;
}
#nav ul {
margin: auto;
padding: 0;
font-size: 100%;
list-style: none;
list-style-type: none;
}
#nav ul li {
display: inline-block;
}
#nav a {
transition: 0.3s;
background-color: #fff;
}
#nav ul li a {
text-decoration: none;
padding: 10px 30px;
display: block;
color: #000000;
background-color: red;
}
#nav a:hover {
color: #fff;
background-color: red;
}
#nav .active {
background-color: red;
color: #000000;
}
<div id="nav">
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</div>
I just added 'display: flex' to #nav ul.
Please check this fiddle https://jsfiddle.net/smilingpigs/ar1h8ynq/5/
nav {
text-align: center;
margin: 0;
overflow: hidden;
display: block;
}
nav ul {
margin: auto;
padding: 0;
display: flex;
font-size: 100%;
list-style: none;
list-style-type: none;
}
nav ul li {
display: inline-block;
}
nav a {
transition: 0.3s;
background-color: #fff;
}
nav ul li a {
text-decoration: none;
padding: 10px 30px;
display: flex;
color: #000000;
background-color: red;
}
nav a:hover {
color: #fff;
background-color: red;
}
nav .active {
background-color: red;
color: #000000;
}
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Contact</a></li>
</ul>
</nav>
In the below snippet I have a CSS menu using nested lists. A problem I have with it is that when you hover over the second list item, it reveals the nested list but in the process, increases the parent list's height pushing everything else down.
I'm aware I can use a position of absolute however that leads to a problem of the nested list not sitting below it's parent element and making it incredibly annoying to style for each nested list I may want.
Is there a simple way I can solve my problem while maintaining the nested loop sitting below it's parent (and by extension, making it possible to access with the :hover)
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: relative;
left: 50px;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
I hope your issue is fixed in below fiddle. Try it.
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li > ul {
display: none;
position: absolute;
left: 50px;
top:100%;
border: 1px solid #fff;
}
nav ul li > ul li {
display: block;
color: #fff;
}
nav ul li:hover > ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3</li>
<li>Item-4</li>
</ul>
</nav>
For this you will need to understand the concept of position...Use position:absolute for the drop-menu and position:relative for its parent li...no need to write css for every drop-menu
* {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
background: #000;
text-align: center;
}
nav ul li {
display: inline-block;
position: relative;
}
nav ul li a {
display: inline-block;
padding: 20px;
color: #fff;
text-decoration: none;
}
nav ul li a:hover {
background-color: #3ab795;
text-decoration: underline;
}
nav ul li>ul {
display: none;
position: absolute;
top: 100%;
left: 0px;
border: 1px solid #fff;
min-width: 150px;
}
nav ul li>ul li {
display: block;
color: #fff;
}
nav ul li:hover>ul {
display: block;
}
<nav>
<ul>
<li>Item-1</li>
<li>Item-2
<ul>
<li>Item-2A</li>
<li>Item-2B</li>
<li>Item-2C</li>
<li>Item-2D</li>
</ul>
</li>
<li>Item-3
<ul>
<li>Item-3A</li>
<li>Item-3B</li>
<li>Item-3C</li>
<li>Item-3D</li>
</ul>
</li>
<li>Item-4</li>
</ul>
</nav>
There is nothing to worry about using absolute position for submenu. just make the parent relative. According to your code
nav ul li {
display: inline-block;
position: relative; // Added
}
and than modify nested ul like this
nav ul li > ul {
display: none;
position: absolute; // Added
left: 0; // Changed
border: 1px solid #fff;
width: 160px; // Change as per your requirement
}
I want to make it so the +Kendrick element is not underlined, but the Gmail and Images elements remain underlined when hovered over, any help would be appreciated, thanks
Relevant HTML
<body>
<div id="header">
<ul>
<li>+Kendrick</li>
<li>Gmail</li>
<li>Images</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
Relevant CSS
#header {
background-color: none;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#header ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
}
#header ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#header ul li a:hover {
text-decoration: underline;
}
ul a:hover first-child {
text-decoration: none;
}
You almost had it there. You just needed to finish the last css style like this
#header ul li:first-child a:hover {
text-decoration: none;
}
Here is the JSFiddle
My dropdown works fine, except it closes before i can move mouse top of last link in it.
CSS
nav {
width: 100%;
display: inline-block;
margin-bottom: 1%;
text-align: center;
background-color: #F0F0F0;
}
nav .links {
width: 100%;
line-height: 1.2;
font-size: 100%;
text-decoration: underline;
text-align: center;
}
nav .links a {
color: #666666;
text-decoration: none;
word-spacing: normal;
}
nav .links a:visited {
color: #666666;
text-decoration: none;
}
nav .links a:hover {
color: #383838;
text-decoration: none;
}
nav .links a:active {
color: #666666;
text-decoration: none;
}
nav ul {
position:relative;
list-style:none;
color: #666666;
white-space: nowrap;
}
nav li{
position:relative;
float: left;
margin-left: 5%;
}
nav ul li ul {
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
line-height: 1.2;
}
ul li:hover ul {
display: block;
}
HTML
<nav>
<div class="links">
<ul>
<li>ETUSIVU</li>
<li>HENKILÖKUVA JA HISTORIA</li>
<li>KORISTEKERAMIIKKA</li>
<li>GALLERIA
<ul>
<li>Keramiikkaveistokset</li>
<li>Keramiikka - kuparityöt</li>
<!--Next link is the one where dropdown closes before mouse reaches it-->
<li>Krisu testi</li>
</ul>
</li>
</ul>
</div>
I tested it with Chrome and FF. CSS is not top skill for me and i think this should work but obviously im wrong :)
I would appreciate help with this greatly, thanks.
EDIT
I changed nav ul li ul as...
nav ul li ul {
z-index: 1;
display: none;
position: absolute;
background-color: #F0F0F0;
border: 2px solid;
border-radius: 5px;
padding: 0.5em 1em 0.5em 0.5em;
}
and now it works just fine. So basically i just added z-index there.
There is an image right below dropdows, not sure is it possible that it messes this one? Atleast z-index did help...
I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.
This is my code:
<nav class="icons">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Account
<ul id="login">
<li>Change password</li>
<li>Update details</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
And the CSS
nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-left: 5%;
}
ul li {
display: inline-block;
width: 15%;
text-align: center;
line-height: 70px;
}
ul li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul li a:hover {
border-bottom: solid black 1px;
}
ul#login{
margin: 0;
padding: 0;
list-style: none;
}
ul#login li {
display: block;
width: 30%;
text-align: center;
line-height: 70px;
}
ul#login li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul#login li ul li{
width: 20%;
}
ul#login li ul li a {
text-decoration: none;
color: #fff;
font-size: 0.7em;
display: block;
}
ul#login li a:hover {
border-bottom: solid black 1px;
}
I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.
Can someone please tell me what I'm doing wrong with the dropdown menu?
Add this css
ul li{
position:relative;
}
#login{
position:absolute;
top:71px;
left:0;
}
FIDDLE