The problem is when you leave the <a> the font color will revert back to its non hover color.
I want the color of the "About" text to be white even the cursor leaves the "About" link.
I've been trying to put all color: on the text on my hover link but no joy.
Here's my fiddle
HTML
<nav>
<ul>
<li class="n1">
Home
</li>
<li class="n2">
About
<ul class="menu">
<li>
List 1
</li>
<li>
List 2
</li>
<li>
List 3
</li>
</ul>
</li>
<li class="n3">
Contact
</li>
</ul>
</nav>
CSS
nav {
width 100%;
}
nav ul {
list-type: none;
}
nav ul li {
maring: 0;
padding: 0;
}
nav ul li a {
display: block;
float: left;
padding: 10px 20px;
line-height: 1;
color: dodgerblue;
background: silver;
text-decoration: none;
text-transform: uppercase;
}
nav ul li a:hover {
color: white;
}
nav ul li.n2:hover > .menu {
display: block;
}
.menu {
position: absolute;
top: 36px;
left: 86px;
background: silver;
width: 93px;
display: none;
}
.menu li a {
color: white;
}
.menu li a:hover {
color: dimgray;
}
You need to add the hover to the li
nav ul li:hover a {
color:white;
}
Related
I made a drop down nav menu which also partially hovers over the aside. But when I hover over the drop down menu part that is over the aside, the nav bar collapses and I end up selecting the aside. Also parts of the aside are over the nav sub menu.
This picture shows the overlap. The orange one is being hovered, when moving the mouse to the left half, into the grey aside area but still over the nav sub menu, the 'Stats' sub menu collapses and the 'Data sheet' link gets selected.
I've tried all kinds of things with z-index and adjusting positions and so on but I don't know what I'm doing wrong.
JSFiddle shows the problem.
HTML:
<nav>
<ul>
<li>Home</li>
<li>Stats
<ul>
<li>Graph</li>
<li>DataSheet</li>
<li>Print</li>
</ul>
</li>
<li>Projects
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Employees
<ul>
<li>View</li>
<li>Add</li>
<li>Edit</li>
</ul>
</li>
<li>Settings</li>
<li>About</li>
</ul>
</nav>
<aside>
<ul>
<li><a>Graph</a></li>
<li><a>Data sheet</a></li>
<li><a>Print graph</a></li>
</ul>
</aside>
CSS:
nav {
background: black;
width: auto;
height: 50px;
font-weight: bold;
}
nav ul {
list-style: none;
}
nav ul li {
height: 50px;
width: 125px;
float: left;
line-height: 50px;
background-color: #000;
text-align: center;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
}
nav ul li a:hover {
background-color: #ff6a00;
}
nav ul ul {
position: absolute;
display: none;
}
nav ul li:hover > ul {
display: block;
}
aside {
float: left;
width: 200px;
height: 700px;
background: grey;
}
aside input {
background-color: red;
}
aside ul {
list-style: none;
/*no bulets*/
height: 100%;
}
aside ul li {
height: 50px;
width: 100%;
float: left;
border-bottom: 1px solid black;
line-height: 50px;
text-align: center;
position: relative;
}
aside ul li a {
text-decoration: none;
width: 100%;
color: #fff;
display: block;
}
aside ul li a:hover {
background-color: #ff6a00;
display: block;
}
Add z-index to your nav ul element:
nav ul {
list-style: none; /*no bulets*/
z-index: 100;
}
Updated Fiddle
For more information about the z-index style and what it does, click here.
After a long break from HTML/CSS, I recently created a menu with dropdown links using a method I have used once before, and was surprised to find that this application of them is not working.
I used this
ul li:hover ul{ display:block;}
to "turn on" my menus when hovering, but they simply never appear. I have tried adding div tags around various blocks of code to no avail. What tricks am I missing?
jsfiddle here: https://jsfiddle.net/qccs4mLL/
Your html isn't align with your css selector.
ul.menu li:hover > ul {
display: block;
background: green;
}
There isn't any ul element that is direct child of li element. You can change your html so ul is direct child of li element.
body {
margin: 0px;
}
a {
text-decoration: none;
width: 8em;
/*width of each link*/
}
/*format list*/
ul {
text-align: center;
margin: 0;
padding: 0;
list-style: none;
}
ul.menu {
height: 2.5em;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-color: #454545;
}
ul.menu li {
float: left;
position: relative;
}
ul.menu li a {
cursor: pointer;
display: block;
color: white;
line-height: 2.5em;
padding: 0 10px;
}
ul.menu ul {
background: #555;
display: none;
position: absolute;
left: 0;
top: 100%;
}
ul.menu li:hover {
background: red;
}
ul.menu li:hover > ul {
display: block;
background: green;
}
<body>
<!--Heading-->
<!--Should change when scrolled down/on mobile-->
<h1 class="heading">Title</h1>
<!--Create Menus-->
<nav>
<ul class="menu">
<li>link1
<ul>
<li>sublink1
</li>
</ul>
</li>
<!--menu options with sub options have dropdown on computer, may unfold with tap on mobile or just be a click since they all go to one page maybe? maybe go with unfolding.-->
<li>link2
<ul>
<li>sublink1
</li>
<li>sublink2
</li>
<li>sublink3
</li>
<li>sublink4
</li>
</ul>
</li>
<li>link3
</li>
<li>link4
</li>
</ul>
</nav>
</body>
I have the following navbar :
nav ul {
display: block;
list-style-type: none;
height: 52px;
}
nav ul li {
display: inline-block;
width: 90px;
line-height: 52px;
text-align: center;
font-size: 15px;
}
nav ul li a {
display: block;
text-decoration: none;
color: #000;
}
nav ul li a:hover {
transition: 0.4s ease;
background-color: pink;
}
<nav>
<ul>
<li>One
</li>
<li>
Two
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
Five
</li>
<li>
Six
</li>
<li>
Seven
</li>
</ul>
</nav>
I want the background color of rainbow. I mean tab 1 will have violet, tab 2 will have indigo... and so on. I do this by adding class to each li. I can also do this by adding id to each li. Isn't there a faster way? CSS only!
You can use nth-of-type() selector
nav ul {
display: block;
list-style-type: none;
height: 52px;
}
nav li {
display: inline-block;
width: 90px;
line-height: 52px;
text-align: center;
font-size: 15px;
}
nav a {
display: block;
text-decoration: none;
color: #000;
}
li:hover {
transition: 0.4s ease;
}
li:nth-of-type(1):hover {
background-color: violet;
}
li:nth-of-type(2):hover {
background-color: indigo;
}
li:nth-of-type(3):hover {
background-color: blue;
}
li:nth-of-type(4):hover {
background-color: green;
}
li:nth-of-type(5):hover {
background-color: yellow;
}
li:nth-of-type(6):hover {
background-color: orange;
}
li:nth-of-type(7):hover {
background-color: red;
}
<nav>
<ul>
<li>One
</li>
<li>
Two
</li>
<li>
Three
</li>
<li>
Four
</li>
<li>
Five
</li>
<li>
Six
</li>
<li>
Seven
</li>
</ul>
</nav>
BONUS
Just a suggestion, don't use long selectors like nav ul li a. You know that you have one navbar element, in that only one a tag. So just cut it short and use nav a and so forth ...
Yes you can use:
nav > ul > li:nth-child(1){
background: yellow;
}
nav > ul > li:nth-child(2){
background: red;
}
//etc...
I have originally created my navigation in Chrome in which the outcome fits perfectly to my needs. I have then found out that Mozilla Firefox won't output the same result, the drop-down menus under Member Action and Admin Related will display vertically instead on horizontally as i wanted. However my biggest dissapointment was testing the navigation in Internet Explorer which won't even show the drop-down menus.
I would really appreciate someone checking the below code and your feedback, Thanks.
Solved the problem by changing one of the lines in css;
navigation ul li {float: left; list-style:none; }
HTML
<div id="navigationContainer">
<div id="navigation">
<ul>
<li class="borderleft">Home </li>
<li>Register </li>
<li>Search cars</li>
<li>Display all cars</li>
<li>Member Actions
<ul> <!-- Open drop down menu -->
<li class="bordertop">Login</li>
<li class="floatLeft">Member Area</li>
<li>Reservation</li>
<li>Contact us</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car</li>
<li>Delete a car</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
CSS
* {padding: 0%; margin 0%; } /* Overwrites the browser stylesheet */
#navigationContainer {background:url(images/navi.png); width:100%;position: relative; white-space:nowrap; word-spacing:0; }
#navigation {width:1200px; height:65px; position: relative; font-family: Arial; margin: 2px auto; font-size: 125%; }
#navigation ul { list-style-type: none; }
#navigation ul li {float: left; position: relative; }
#navigation ul li a { border-right: 2px solid #e9e9e9; padding: 20px;
display: block; margin: 0 auto; text-align: center; color: black; text-decoration: none; }
#navigation ul li a:hover { background: blue; color: white; }
#navigation ul li ul { display: none; }
#navigation ul li:hover ul {display: block; position: absolute; }
#navigation ul li ul li {float:left; position:relative; }
#navigation ul li:hover ul li a { background: #12aeef; color: white; position:relative; margin: 0px auto; border-bottom: 1px solid white; border-right: 1px solid white; width: 119px; }
#navigation ul li:hover ul li a:hover { background: blue;}
.bordertop { border-top: 1px solid white; }
.borderleft { border-left: 2px solid #e9e9e9;}
Try this
http://jsfiddle.net/Vf3AJ/
Example from: http://www.cssnewbie.com/example/css-dropdown-menu/horizontal.html
EDITED
Misread horizontal for vertical. tested in IE10, FF, and Chrome
As a side note: horizontal menus have serious issues depending on the width of the viewers screen.
CSS
nav {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
nav li {
list-style: none;
float: left;
}
nav li a {
display: block;
padding: 3px 8px;
text-transform: uppercase;
text-decoration: none;
color: #999;
font-weight: bold;
}
nav li a:hover {
background: blue;
color: white;
}
nav li ul {
display: none;
}
nav li:hover ul, nav li.hover ul {
position: absolute;
display: inline;
left: 0;
width: 100%;
margin: 0;
padding: 0;
}
nav li:hover li, nav li.hover li {
float: left;
}
nav li:hover li a, navbar li.hover li a {
color: #000;
}
nav li li a:hover {
color: white;
}
HTML
<div id="navigationContainer">
<nav id="navigation">
<ul>
<li class="borderleft">Home
</li>
<li>Register
</li>
<li>Search cars
</li>
<li>Display all cars
</li>
<li>Member Actions
<ul>
<!-- Open drop down menu -->
<li class="bordertop">Login
</li>
<!-- A bordertop class is given to this listed element in order to style a top border for in in the external CSS file. -->
<li class="floatLeft">Member Area
</li>
<li>Reservation
</li>
</ul>
</li>
<li>Contact us
</li>
<li>Admin Related
<ul>
<li class="bordertop">Insert new car
</li>
<li>Delete a car
</li>
</ul>
</li>
</ul>
</nav>
</div>
I am currently looking into developing a CSS only drop down menu. The idea is when the mouse hovers over a ul tag it will make another ul class appear.
Below is the code that I currently have.
HTML
<head>
<link href="nav.css" rel="stylesheet" type="text/css">
</head>
<ul class="nav">
<li class="topMenu">Home</li>
<ul class="subMenu" id="home">
<li>Hello</li>
<li>World</li>
</ul>
</ul>
CSS
.nav, .topMenu, .subMenu
{
position: relative;
list-style: none;
}
.topMenu
{
position: relative;
float: left;
}
.subMenu
{
display: none;
}
.topMenu a:hover + li
{
display: block;
background-color: blue;
}
The idea is that when the mouse hovers over the li class="topMenu" then the ul class="subMenu" id="home" should appear underneath.
Ideally this should be only in a CSS format without requiring any javascript etc.
Thanks for any help you can provide.
All you really need to do is nest the <ul> within your <li> element.
<nav>
<ul>
<li>Link</li>
<li>
Link
<ul>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Link</li>
</ul>
</nav>
Here's some CSS that will help you get started:
/* Resets */
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
Preview: http://jsfiddle.net/Wexcode/BEhvQ/
It will need some tweaking:
<ul class="nav">
<li class="topMenu">Home</li>
<li class="subMenu">
<ul id="home">
<li>Hello</li>
<li>World</li>
</ul>
</li>
</ul>
.topMenu:hover + .subMenu
{
display: block;
background-color: blue;
}
Demo