I'm trying to turn off the hover for the current page in a navigation menu.
div.nav {
width: 100%;
padding: 6px;
height: 40px;
}
.nav li {
color: #FFFFFF;
display: inline;
list-style-type: none;
text-align: center;
text-transform: uppercase;
padding: 20px;
margin: 0px;
height: 40px;
}
li.current {
background-color: #424242
}
li.current:hover {
background-color: inherit;
}
.nav li:hover {
background-color: #737373;
<div class="nav">
<ul>
<li class="current">Home</li>
<li>About
</li>
<li>Contact
</li>
<li>Gallery
</li>
</ul>
</div>
Here is the jsfiddle:
https://jsfiddle.net/swordams/jk6z5aqj/
I want the li for home to stay dark and not change on hover. I've tried setting the hover background color to "inherit", but that doesn't work.
Thanks!
You can use the CSS :not() pseudo-class:
.nav li:hover:not(.current) {
background-color: #737373;
}
jsFiddle example
You can use the solution by j08691 but ultimately, the problem with your css is that .nav li:hover is more specific than li.current:hover. Tacking a .nav will do the trick.
.nav li.current:hover {
background-color: inherit;
}
just make the active/current li background color important
li.current {
background-color: #424242 !important;
}
Related
While I know there are several discussions regarding this issue, none of the solutions fixed my problem. No matter what I do, the CSS submenu I'm trying to use disappears after you stop hovering over the parent li. I haven't the slightest idea what could be causing this, and I've really been staring at this forever trying to find a solution and just can't. I tried adding in a top: px; to the submenu in the CSS, which allowed me to select the submenu options, however it also moved the menu so that it would appear covering and centered over the parent li, which is also no good to me because I need it to appear directly below. Could the header be clipping it and if so what would I need to add to change that? All assistance is so greatly appreciated!
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-size: 1.2em;
line-height: 40px;
text-align: left;
display: none;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
#header {
float: left;
background-color: #ffffff;
cursor: default;
padding: 1.75em 2em 0em 0em;
position: relative;
}
<header>
<img id="logo" src="images/logo.jpg" alt="logo">
<div class="nav">
<ul>
<li class="home">Home
</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##
</li>
<li>Tutorial #2
</li>
<li>Tutorial #3
</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a>
</li>
<li class="news">Newsletter
<ul>
<li>News #1
</li>
<li>News #2###
</li>
<li>News #3
</li>
</ul>
</li>
<li class="contact">Contact
</li>
</ul>
</div>
</header>
I did figure this out eventually but thought I should come back and update with my solution, in case it is helpful to anyone who is having a similar issue. It was actually really simple.
I had to add a z-index here:
.nav li:hover ul {
display: block;
z-index: 99999;
}
This was recommended to other users, and I did try it initially but did not place it in li:hover thus it didn't work. I guess because the high z-index forces it to the top, it stopped whatever was causing the clipping by placing the submenu above it. I must have misread something somewhere along the line and placed the z-index in the wrong section. The real solution here is probably to read your code carefully!
I have a problem with the navigation bar. When I hover over About or Text on the nav bar it shows a spacing on the left side of the button, I want it the hover colour to contain the full width of the button.
https://jsfiddle.net/jdd3h0sf/3/
HTML:
<div id="nav">
<ul>
<li class="home">Home</li>
<li>About</li>
<li>Text ⌄
<ul class="submenu">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
<li>Work</li>
<li>Contact ⌄
<ul class="submenutwo">
<li>One</li>
<li>Two</li>
<li>Three</li></li>
</ul>
</ul>
CSS:
#nav {
background-color: #333;
height: 52px;
text-align: center;
margin: 0 auto;
letter-spacing: 1px;
text-transform: uppercase;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav li {
border-right: 1.8px solid #191919;
height: auto;
width: 156.5px;
padding: 0;
margin: 0;
}
.home {
border-left: 1.8px solid #191919;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #444;
}
#nav ul li a, visted {
color: #ccc;
display: block;
padding: 15px;
margin: 0;
text-decoration: none;
}
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #444;
border: 1px solid #333;
border-top: 0;
max-width: 169px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:visited {
color: #ccc;
}
#nav ul ul li a:hover {
color: #2980B9;
}
This is a part of display:inline-block;. If you want to keep them displayed inline-block, there are several different solutions (Read a css-Tricks article about it):
1 - Change your HTML format:
Change your <li>'s html like this:
<ul>
<li>
one</li><li>
two</li><li>
three</li>
</ul>
Or this:
<ul>
<li>one</li
><li>two</li
><li>three</li>
</ul>
Or even with comments, like this:
<ul>
<li>one</li><!--
--><li>two</li><!--
--><li>three</li>
</ul>
Or, just place all the li's on a single line:
<ul><li>one</li><li>two</li><li>three</li></li>
It is messy, yet effective.
2 - Negative margins:
Pretty straightforward:
li{
display: inline-block;
margin-right: -4px;
}
3 - Skip the closing tag:
This is actually perfectly fine in HTML5, li's do not have to have a closing tag.
<ul>
<li>one
<li>two
<li>three
</ul>
4 - Set the <ul>'s font size to 0:
ul {
font-size: 0;
}
ul li {
font-size: 16px;
}
5 - Or, just float the <li>'s:
Whatever floats your boat.
You are experiencing the dreaded inline-block spacing issue. In your fiddle, if you condense all of your li elements to be on the same line, the hover works as expected. The linked article outlines a few other options.
You can also just float the elements and that would resolve the issue.
#nav ul li {
float: left;
}
I found this CSS code for an horizontal dropdown menu over the internet which at first seems really good (the results on chrome are perfect). However, when I try it with internet explorer, white spaces appear between the dropdown elements and I cannot navigate the menu.
Have any idea? Your help would be greatly appreciated.
HTML :
<div id="menu">
<ul>
<li>Accueil</li>
<li>CV</li>
<li>Enseignement
<ul>
<li>Plans de cours</li>
<li>Leçons</li>
<li>Powerpoints </li>
</ul>
</li>
<li>Recherche
<ul>
<li>Italia</li>
<li>Livres</li>
</ul>
</li>
<li>Liens</li>
<li>Contact</li>
<li>English</li>
</ul>
</div>
And the CSS :
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul a:hover {
color: #ffffff;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 0px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover {
background: #617F8A;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a {
background: #617F8A;
}
li:hover li a:hover {
background: #95A9B1;
}
Are you missing some code from your examples or is this the exact code, because I think you'r missing the close
</ul>
?
I have the following html code:
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="home2"><a class="active" href="#">Home2</a></li>
<li class="home3">Home3</li>
<li class="home4">Home4</li>
<li class="home5">Home5</li>
</ul>
</div>
<div class="post">
<div id="borders">
<ul>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
<li>red border</li>
</ul>
</div>
</div>
and with that I have a css file:
body {
padding-top: 2rem;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.nav {
min-width:100% !important;
}
.nav ul {
list-style: none;
background-color: rgba(0,0,0,0.6);
text-align: center;
position: absolute;
top: 0;
padding: 0;
margin: 0;
min-width: 100%;
}
.nav li {
font-size: 20px;
line-height: 30px;
height: 30px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #919191;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
font-size: 20px;
line-height: 30px;
height: 30px;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
}
ul li { position: relative; border:1px solid red; display: inline-block; text-align: center; }
ul { text-align:center; }
And now when I run it in jsfiddle, I see there's a red border around every element. What I want to achieve is to remove the border from the top elements and just use it on the elements from div id = borders. I'm a little bit confused about CSS, because I tried to use the code .borders ui li , but it didn't work well... I thought that's the way how we should call the classes on the webpage? Anyway, could you help me with removing the red border from the top links and leave it only on the words containing "red border"?
Here's the jsfiddle for that http://jsfiddle.net/gfkPG/451/
Thanks!
Use #borders ul li (as # is an id selector, not . – class selector) instead of ul li.
JSFiddle
Your borders is an ID but you're referring to it as a class in your CSS.
Try #borders instead of .borders.
You could use a class here also:
.borders ul li {
border:1px solid red;
}
<div class="borders">
<ul>
<li>red border</li>
</ul>
</div>
I've posted my codes on JsFiddle. Problem is if i hover a link that background color does not appear fully. Background color only appears for the text only. i want that background color should appear based on the particular width and height of the link.
HTML :
<div id="menu">
<ul class="menubar">
<li>link</li>
<li>link1</li>
<li>link2
<ul class="sidemenu">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>link3</li>
<li>link4</li>
</ul>
</div>
CSS :
body
{
background: rgba(120,120,120,0.1);
padding: 0;
margin: 0;
}
#logo
{
height: 50px;
}
#menu
{
background-color: #CC0000;
height: 40px;
}
.menubar
{
list-style-type: none;
text-align: center;
width: auto;
position: relative;
}
.menubar li
{
display: inline-block;
padding: 10px 20px 5px 20px;
}
.menubar li a
{
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
.menubar li a:hover
{
background-color: rgba(255,255,255,0.3);
}
.sidemenu
{
display: none;
}
.menubar li:hover .sidemenu
{
display: block;
}
.sidemenu
{
background-color: #CC0000;
position: absolute;
height: 40px;
width: 70px;
height: 100px;
}
.sidemenu li a:hover
{
background-color: rgba(255,255,255,0.3);
}
If you apply the effect on the <li>, the hover effect will work, but the dropdown won’t show until your mouse is perfectly placed on the link itself. This can be confusing for the user since the effect and the result differ.
I suggest you apply the padding to the link instead so the link area is bigger. It fix the visual problem and also improve the experience.
.menubar li {
display: inline-block;
}
.menubar li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
Here’s a complete Fiddle with some extra fixes to your dropdowns.
Simply change this:
.menubar li a:hover
To this:
.menubar li:hover
This will apply the background to the whole list item when hovered.
Updated fiddle.
change
.sidemenu li a :hover
{
background-color: rgba(255,255,255,0.3);
}
with
.sidemenu li:hover
{
background-color: rgba(255,255,255,0.3);
}
FIDDLE