I am trying to make the main menu active (background color same sub menu background color), so the when submenu is opened the main menu color becomes active, I tried to make it but not working, Can anyone please look in to it whats wrong with my css?
JSfiddle demo
nav {
float: left;
width: 100%;
background: #6c9d1c;
border-bottom: 5px solid #e57817;
font-family: 'MyriadPro-Regular';
}
nav > ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 0;
text-align: center;
}
nav > ul > li {
list-style: none;
padding: 0;
margin: 0;
position: relative;
display: inline-block;
}
nav > ul > li > a {
color: #fff;
text-decoration: none;
font-size: 16px;
text-transform: uppercase;
padding: 7px 17px 3px 17px;
font-weight: 700;
display: block;
line-height: normal;
}
nav > ul > li > a:hover {
background-color: #e57817;
color: #fff;
text-decoration: none;
}
nav > ul > li > ul {
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
top: 30px;
width: 100%;
text-align: left;
}
nav > ul > li:hover ul {
display: block;
}
/*main menu active on submenu open*/
nav > ul > li > ul > li > a:hover nav > ul > li > a:hover {
background-color: #e57817;
}
/*Submenu*/
nav > ul > li > ul > li {
padding: 0;
margin: 0;
list-style: none;
display: block;
}
nav > ul > li > ul > li > a {
display: block;
background: #e57817;
color: #fff;
font-size: 14px;
font-family: Arial;
border-bottom: 1px solid #fcb65a;
padding: 8px 20px;
}
nav > ul > li > ul > li > a:hover {
background-color: #fcb65a;
color: #fff;
text-decoration: none;
}
<nav>
<ul>
<li>Main Menu
<ul>
<li>Submenu one</li>
<li>Sub Menu Two</li>
</ul>
</li>
</ul>
</nav>
You are using the :hover selector on <a> which means that when the cursor is moved over the <ul> the text in <a> is no longer hovered. The <ul> is still part of its parent <li> though so change:
nav > ul > li > a:hover {
to
nav > ul > li:hover {
Here's an updated fiddle: https://jsfiddle.net/nc5yqah9/2/
Related
I'm trying to build multi-level CSS dropdown. I found a simple demo code and tried to edit but when I customized the third level of dropdown it became broken. I'm hoping to use <div> instead of <ul><li><a></a></li></ul> as I'd like to put multiple elements like <ul>, <li> and <p>. Below is the final image of the dropdown. If I hover Sub Menu 2 or Sub Menu 3, third level dropdown will appear next to each each <li> tag.
a {
text-decoration: none;
}
nav {
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav ul {
width: 100%;
}
/* first level */
nav ul li {
position: relative;
float: left;
width: 20%;
height: 40px;
background: #fff;
}
nav ul li a {
display: block;
line-height: 40px;
color: #111;
}
nav ul li a:hover {
background: #009a9c;
color: #fff;
}
/* second level */
nav ul li ul {
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 100%;
}
nav ul li ul li {
overflow: hidden;
width: 100%;
height: 0;
background: #43c6db;
}
nav ul li ul li a {
display: block;
color: #fff;
}
/* hover effect for second level */
nav > ul > li:hover > a {
height: 40px;
background: #009a9c;
color: #fff;
}
nav > ul > li:hover li:hover > a {
background: #009a9c;
}
nav ul li:hover > ul >li {
overflow: visible;
height: 40px;
}
/* thir level */
nav ul li ul li ul {
top: 0;
left: 100%;
}
nav ul li:last-child ul li ul {
left: 100%;
}
nav ul li ul li ul li {
width: 100%;
background: #43c6db;
}
nav ul li ul li ul li a {
display: block;
color: #fff;
}
/* hover effect for third level */
nav > ul > li > ul > li:hover > ul {
display: block;
z-index: 200;
}
nav > ul > li:hover ul >li:hover > a {
background: #009a9c;
color: #fff;
}
/* Second level arrow direction */
nav > ul > li > ul:before {
position: absolute;
content: "";
top: -20px;
right: 16px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #111;
}
nav > ul > li:hover > ul:before {
border-top-color: #fff;
}
/* Third level arrow direction */
nav ul li ul li ul:before {
position: absolute;
content: "";
top: 16px;
left: -20px;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #fff;
}
nav ul li ul li:hover ul:before {
border-left-color: #fff;
}
nav ul li:last-child ul li ul:before {
position: absolute;
content: "";
top: 16px;
left: 200%;
margin-left: -20px;
border: 5px solid transparent;
border-right-color: #fff;
}
nav ul li:last-child ul li:hover ul:before {
border-right-color: #fff;
}
<nav>
<ul>
<li>menu 3
<ul>
<li>menu 3-1
<!-- original code I found -->
<!--<ul>
<li>menu 3-1-1</li>
</ul>-->
<!-- Want to customize like this -->
<div>
<p>Text</p>
<ul>
<li>Some menu</li>
</ul>
<ul>
<li>Some menu</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
Your styles get overridden, for example:
/* first level */
nav ul li {
position: relative;
float: left;
width: 20%;
height: 40px;
background: #fff;
}
This style will affect all of your li elements, not just the first-level list items. You can use classes like class='first-level' or even the > operator for more specific elements selectors, like in the snippet below:
a {
text-decoration: none;
}
nav {
margin: 0 auto;
width: 600px;
height: 40px;
text-align: center;
}
nav ul {
width: 100%;
}
/* first level */
nav > ul > li {
position: relative;
float: left;
width: 20%;
height: 40px;
background: #fff;
}
nav > ul > li > a {
display: block;
line-height: 40px;
color: #111;
}
nav > ul > li > a:hover {
background: #009a9c;
color: #fff;
}
/* second level */
nav > ul > li > ul {
position: absolute;
z-index: 100;
top: 100%;
left: 0;
width: 100%;
}
nav > ul > li > ul > li {
overflow: hidden;
width: 100%;
height: 0;
background: #43c6db;
}
nav ul li ul li a {
display: block;
color: #fff;
}
/* hover effect for second level */
nav > ul > li:hover > a {
height: 40px;
background: #009a9c;
color: #fff;
}
nav > ul > li:hover li:hover > a {
background: #009a9c;
}
nav > ul > li:hover > ul >li {
overflow: visible;
height: 40px;
}
/* thir level */
nav > ul > li > ul > li > ul {
top: 0;
left: 100%;
}
nav > ul > li:last-child > ul> li> ul {
left: 100%;
}
nav >ul >li >ul >li >ul >li {
width: 100%;
background: #43c6db;
}
nav >ul >li> ul> li> ul >li> a {
display: block;
color: #fff;
}
/* hover effect for third level */
nav > ul > li > ul > li:hover > ul {
display: block;
z-index: 200;
}
nav > ul > li:hover ul >li:hover > a {
background: #009a9c;
color: #fff;
}
/* Second level arrow direction */
nav > ul > li > ul:before {
position: absolute;
content: "";
top: -20px;
right: 16px;
width: 0;
height: 0;
border: 5px solid transparent;
border-top-color: #111;
}
nav > ul > li:hover > ul:before {
border-top-color: #fff;
}
/* Third level arrow direction */
nav ul li ul li ul:before {
position: absolute;
content: "";
top: 16px;
left: -20px;
width: 0;
height: 0;
border: 5px solid transparent;
border-left-color: #fff;
}
nav ul li ul li:hover ul:before {
border-left-color: #fff;
}
nav ul li:last-child ul li ul:before {
position: absolute;
content: "";
top: 16px;
left: 200%;
margin-left: -20px;
border: 5px solid transparent;
border-right-color: #fff;
}
nav ul li:last-child ul li:hover ul:before {
border-right-color: #fff;
}
<nav>
<ul>
<li>menu 3
<ul>
<li>menu 3-1
<!-- original code I found -->
<!--<ul>
<li>menu 3-1-1</li>
</ul>-->
<!-- Want to customize like this -->
<div>
<div>Text</div>
<ul>
<li>Some menu</li>
</ul>
<ul>
<li>Some menu</li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</nav>
CSS styles for my menu bar
* {
margin: 0;
padding: 0;
}
body {
background: white;
font-family: 'Helvetica Neue', Helvetica;
font-weight: 400;
font-size: 1.05em;
line-height: 1.6rem;
color: white;
font-size: 1.2em;
}
header {
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
header > nav > ul {
display: flex;
margin: 0;
padding: 0;
justify-content: flex-start;
list-style: none;
flex-wrap: wrap;
}
header > nav > ul > li {
margin: 0;
flex: 0 1 auto;
position: relative;
transition: 0.2s;
cursor: pointer;
}
header > nav > ul > li:hover {
background: #aa64e0; /*dark purple*/
}
header > nav > ul > li > ul {
/* dropdown */
position: absolute;
background: #76a1e8; /*light blue*/
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
header > nav > ul > li:hover > ul {
/* dropdown */
display: block;
width: 220px;
}
header > nav > ul > li > a {
color: white;
display: flex;
font-size: 1.5rem;
text-decoration: none;
padding: 1rem 1.5rem;
letter-spacing: 1px;
}
header > nav > ul > li > ul > li {
display: block;
}
header > nav > ul > li > ul > li > a {
text-decoration: none;
color: white;
display: flex;
letter-spacing: 1px;
cursor: pointer;
padding: .25rem 1.5rem;
}
header > nav > ul > li > ul > li:hover {
background: blue;
}
header > nav > ul > li > a > i {
margin-left: 5px;
}
input {
padding: .25rem;
width: 100px;
}
input:invalid {
border: 2px solid red;
}
header > nav > ul > li > ul > li > input:invalid + button {
background: red;
cursor: not-allowed;
}
button {
padding: .25rem;
}
HTML header and an image
<header>
<nav>
<ul>
<li>Teams<i class="fas fa-caret-down"></i>
<ul>
<li><a class="preset-id" data-schoolid=13318>Huron</a> </li>
<li><a class="preset-id" data-schoolid=99999>Pioneer</a></li>
<li>
<input type="number" min="1" max="100000" class="custom-id-value" placeholder="School ID #" required>
<button class="custom-id"> Go </button>
</a>
</li>
</ul>
</li>
<li><a class="show-calendar">Calendar</a></li>
<li><a class="show-athletes">Athletes</a></li>
</ul>
</nav>
</header>
<main>
<image src="https://www.w3schools.com/w3css/img_lights.jpg"></image>
</main>
When it shows up,
The content is on top of the header bar. Is there some way to avoid this? and have the content displayed below? When the dropdown is activated, I don't want the content below it to move though.
JsFiddle: https://jsfiddle.net/g870xy3d/36/
You just need to add a margin top in the main tag with the height of the header. Also add top:0 to the header:
header{
top:0;
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
main{
margin-top: 57px;
}
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'm trying to get my navigation menu figured out but I'm not sure what I'm doing wrong. I'm trying to give each menu item it's own background color, which I've done successfully, but I can't get the colors to space out correctly. I got a background going through the whole thing (the green and gray in between the menu items) but I'm not sure how to translate that into the menu items auto scaling to match the 940px nav. bar...
Here is a link: www.pancakeweb.com/preschool/test.html
CSS:
#header .navigation {
padding: 0 5px;
width: 940px;
}
#header .navigation > ul:before, #header .navigation > ul:after {
content: "";
display: table;
}
#header .navigation > ul:after {
clear: both;
}
#header .navigation > ul {
background: url(../images/bg-navigation.gif) repeat-x bottom left;
margin: 0;
padding: 0;
}
#header .navigation > ul .link1 {
background: url(../images/bg-navigationb.gif) repeat-x bottom left;
}
#header .navigation > ul .link2 {
background: url(../images/bg-navigationo.gif) repeat-x bottom left;
}
#header .navigation > ul .link3 {
background: url(../images/bg-navigationr.gif) repeat-x bottom left;
}
#header .navigation > ul .link4 {
background: url(../images/bg-navigationg.gif) repeat-x bottom left;
}
#header .navigation > ul > li {
display: block;
float: left;
list-style: none;
margin: 0 35px;
position: relative;
padding: 0;
}
#header .navigation > ul > li > a {
color: #fff;
display: block;
font-family: 'Lato-Light';
font-size: 14px;
font-weight: normal;
height: 52px;
line-height: 56px;
margin: 0;
padding: 0 8px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
}
#header .navigation > ul > li.selected > a {
font-family: 'Lato-Black';
}
#header .navigation > ul > li > a:hover {
color: #e2e2e2;
}
#header .navigation > ul > li.booking > a {
color: #fcac00;
font-family: 'Lato-Black';
}
#header .navigation > ul > li.booking > a:hover {
color: #f3be4b;
}
#header .navigation ul ul {
left: -99999px;
margin: 0;
padding: 0;
position: absolute;
top: 52px;
z-index: 5;
}
#header .navigation > ul > li:hover ul {
left: 0;
}
#header .navigation ul ul li {
border-top: 1px solid #fff;
display: block;
list-style: none;
margin: 0;
padding: 0;
width: 180px;
}
#header .navigation ul ul li:first-child {
border: 0;
}
#header .navigation ul ul li a {
background: #e9e9e9;
color: #000000;
display: block;
height: 23px;
font-family: 'Lato-Light';
font-size: 13px;
font-weight: normal;
line-height: 23px;
margin: 0;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
}
#header .navigation ul ul li a:hover {
background: #fcac00;
color: #fff;
}
HTML:
<div class="navigation">
<ul>
<li class="link1">
home
</li>
<li class="link2">
About
</li>
<li class="link3">
admissions
</li>
<li class="link4">
Teachers
</li>
<li class="link1">
Kindergarten
<ul>
<li>
After School Programs
</li>
<li>
Spring Break Camps
</li>
<li>
Summer Camps
</li>
</ul>
</li>
<li class="link2">
Contact
<ul>
<li>
Visiting Sudbury
</li>
<li>
Map & Directions
</li>
<li class="selected">
Giving to Sudbury
</li>
</ul>
</li>
</ul>
</div>
</div>
It looks like this is what you want to change:
#header .navigation > ul > li {
display: block;
float: left;
list-style: none;
margin: 0;
position: relative;
padding: 0 35px;
}
I replaced the 35px side-margins with padding.
here is what's happening.
As required!
http://jsfiddle.net/U99Br/
So I'm making this web site with a drop down menu, until now it was all good, but while doing my drop-down menu (I wanted to do something of the sort of Netflix's menu), I noticed my sub-menu is pushing the "contact" li tag 300px away (which is it's length).
Here's my code:
#menu,
#menu ul,
#menu li {
margin: 0;
padding: 0;
list-style: none;
}
#menu a {
text-decoration: none;
}
#menu {
height: 60px;
width: auto;
}
#menu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#menu > ul > li > a {
color: #fff;
text-shadow: 1px 1px 5px #737373;
font-size: 20px;
line-height: 60px;
padding: 15px 20px;
}
#menu > ul > li > a:hover {
color: #000;
}
#menu > ul > li > ul {
opacity: 0;
visibility: hidden;
display: none;
background-color: #fff;
text-align: left;
height: auto;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
width: 300px;
}
#menu > ul > li:hover > ul {
display: block;
border: none;
visibility: visible;
opacity: 1;
}
#menu > ul > li > ul > li {
display: block;
content: '';
}
#menu > ul > li > ul > li > a {
font-size: 12px;
color: #000;
display: block;
text-shadow: none;
}
#menu > ul > li > ul > li > a:hover {
color: #0AB3FC;
}
#menu > ul ul > li {
position: relative;
}
I have not found what's wrong in my coding yet!
ad a width to the first ul li so children can not push up width from parent
#menu > ul > li {
width:300px; /* add with here */
float: left;
margin-left: 15px;
position: relative;
}