On media query with a max-width of 768px, the sub-menu under the About Menu overlaps to the Course Menu, I will want it pushed down on-click to display the sub-menu. I have tried a lot of options but is not working. Any help will be much appreciated.
var navLinks = document.getElementById("navLinks");
function displayMenu() {
navLinks.style.right = "0";
}
function hideMenu() {
navLinks.style.right = "-200px";
}
nav{
display: flex;
align-items: center;
padding: 2% 6%;
justify-content: space-between;
}
.nav-links{
flex: 1;
text-align: right;
}
.nav-links ul li{
display: inline-block;
padding: 8px 12px;
position: relative;
list-style: none;
}
.nav-links ul li a{
color: #000;
text-decoration: none;
font-size: 15px;
}
.nav-links ul li::after{
content: "";
width: 0%;
height: 2px;
background: #ff5733;
display: block;
margin: auto;
}
.nav-links ul li:hover::after{
width: 100%;
transition: 0.5s;
}
.nav-links ul li:nth-child(2):hover::after{
background: none;
width: 0;
}
nav .fa{
display: none;
}
nav .fa-chevron-down{
display: inline;
margin-right: 6px;
}
.sub-menu-1{
display: none;
}
.nav-links ul li:hover .sub-menu-1{
display: block;
position: absolute;
background-color: #ff5733;
margin-top: 15px;
margin-left: -15PX;
}
.nav-links ul li:hover .sub-menu-1 ul{
display: block;
margin: 10px;
}
.nav-links ul li:hover .sub-menu-1 ul li{
width: 150px;
padding: 10px;
border-bottom: 1px dotted #fff;
background: transparent;
border-radius: 0;
text-align: left;
text-transform: uppercase;
font-weight: 500;
}
.nav-links ul li:hover .sub-menu-1 ul li:last-child{
border-bottom: none;
}
.nav-links ul li:hover .sub-menu-1 ul li a:hover{
color: bisque;
}
<html>
<body>
<section>
<nav>
<!-- Navigation Links -->
<div class="nav-links" id="navLinks">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li>HOME</li>
<li><i class="fa fa-chevron-down"></i>ABOUT
<div class="sub-menu-1">
<ul>
<li>Principal Message</li>
<li>School History</li>
<li>Mission & Vision</li>
</ul>
</div>
</li>
<li>COURSE</li>
<li>NEWS</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</div>
<i class="fa fa-bars" onclick="displayMenu()"></i>
</nav>
</section>
</body>
</html>
Fiddle demo
I added these two rules and it seemed to behave better.
This sets the defaults for everything (not required), so that we know what we are changing from
.nav-links ul, .nav-links ul li{
position:relative;
z-index:0;
}
This sets things to be on top when you hover them. I like to adjust z-index by at least 10 at a time, because it gives you room to insert between them at a later date if needed, without having to adjust everything else.
.nav-links ul li:hover{
z-index:10;
}
Related
So I am trying to make a basic nav menu with a drop down from my Django app. My menu is fine, but the dropdown doesn't want to show all the links.
How to fix this?
HTML
<nav role="navigation">
<ul>
<li>Chat Home</li>
<li>Go To <i class="fa fa-caret-down"></i>
<ul class="dropdown" aria-label="submenu">
<li>Calendar</li>
<li>Big Blue</li>
</ul>
</li>
<li>Logout</li>
</ul>
</nav>
CSS
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: sticky;
position: -webkit-sticky;
width: 100%;
height: 1.5rem;
}
li {
float: left;
font-size: 1rem;
padding: 0.25rem 1rem;
letter-spacing: 1.5px;
cursor: pointer;
display: block;
position: relative;
}
li a {
color: white;
text-decoration: none;
text-align: center;
}
ul li ul li {
display: block;
padding: 0.25rem 1rem;
}
li:hover,
li:focus-within {
background-color: black;
}
li:focus-within a {
outline: none;
}
ul li ul {
display: none;
background-color: #333;
position: absolute;
visibility: hidden;
left: 0;
margin-top: 2px;
}
ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
display: block;
visibility: visible;
}
You can see what I mean here: https://jsfiddle.net/rj269hsf/
But essentially, when I hover over the "Go To" item it will drop the first listed item below it. The only way to see the second is to move down and hover where it would be, then it shows up.
You can fix the problem by wrapping the dropdown <ul> in a <div>. I also gave the nav item with the dropdown the class of .dropdown-btn to make the CSS easier to understand.
The ul li:hover > ul selector you've used is also incorrect - I replaced it with .dropdown-btn:hover ul which selects the ul which is a child of .dropdown-btn but only when it is hovered.
Lastly, you don't need both visibility and display to hide the dropdown, simply display: none will do.
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
position: sticky;
position: -webkit-sticky;
width: 100%;
height: 1.5rem;
}
li {
float: left;
font-size: 1rem;
padding: 0.25rem 1rem;
letter-spacing: 1.5px;
cursor: pointer;
display: block;
position: relative;
}
li a {
color: white;
text-decoration: none;
text-align: center;
}
/*ul li ul li {
display: block;
padding: 0.25rem 1rem;
}*/
li:hover,
li:focus-within {
background-color: black;
}
/*li:focus-within a {
outline: none;
}*/
.dropdown {
display: none;
background-color: #333;
position: absolute;
left: 0;
margin-top: 2px;
}
/*ul li:hover > ul,
ul li:focus-within > ul,
ul li ul:hover,
ul li ul:focus {
display: block;
visibility: visible;
}*/
.dropdown-btn:hover .dropdown {
display: block;
}
<nav role="navigation">
<ul>
<li>Chat Home</li>
<li class="dropdown-btn">
Go To <i class="fa fa-caret-down"></i>
<div class="dropdown">
<ul aria-label="submenu">
<li>Calendar</li>
<li>Big Blue</li>
</ul>
</div>
</li>
<li>Logout</li>
</ul>
</nav>
You just need to add two properties width and height to the class .dropdown i.e. in your CSS ul li ul. JSFiddle
ul li ul {
/* already mentioned styles */
width: fit-content;
width: -moz-fit-content; /* Firefox support */
height: fit-content;
height: -moz-fit-content;
}
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
I am trying to create a responsive menu as follows.
.menu {
margin: auto;
text-align: center;
margin-top: 10px;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding-left: 0;
}
.menu li {
display: inline;
}
.menu li a {
border: 1px solid #eee;
padding: 10px 15px;
text-transform: uppercase;
transition: background 0.5s ease;
}
.menu li a:focus {
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background: #ddd;
}
#media (max-width: 620px) {
.menu li {
display: block;
width: 100%;
}
}
<div class="menu">
<ul>
<li>Home
</li>
<li>Experience
</li>
<li>Education
</li>
<li>Open Source
</li>
<li>Contact
</li>
</ul>
</div>
But the menu entries are overlapping in small screens. Why this problem is happening? Also, I have set width to 100%, but entries does not change size in small screens as expected.
You need to set the display:inline-block for the anchor tag
.menu li a {
display: inline-block;
}
.menu {
margin: auto;
text-align: center;
margin-top: 10px;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding-left: 0;
}
.menu li {
display: inline;
}
.menu li a {
border: 1px solid #eee;
padding: 10px 15px;
text-transform: uppercase;
transition: background 0.5s ease;
display: inline-block;
}
.menu li a:focus {
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background: #ddd;
}
#media (max-width: 620px) {
.menu li {
display: block;
}
}
<div class="menu">
<ul>
<li>Home
</li>
<li>Experience
</li>
<li>Education
</li>
<li>Open Source
</li>
<li>Contact
</li>
</ul>
</div>
.menu {
margin: auto;
text-align: center;
margin-top: 10px;
padding: 10px;
}
.menu ul {
list-style-type: none;
padding-left: 0;
}
.menu li {
display: inline;
}
.menu li a {
border: 1px solid #eee;
padding: 10px 15px;
text-transform: uppercase;
transition: background 0.5s ease;
display:block;
}
.menu li a:focus {
text-decoration: none;
}
.menu li a:hover {
text-decoration: none;
background: #ddd;
}
#media (max-width: 620px) {
.menu li {
display: block;
width: 100%;
}
}
<div class="menu">
<ul>
<li>Home
</li>
<li>Experience
</li>
<li>Education
</li>
<li>Open Source
</li>
<li>Contact
</li>
</ul>
</div>
anchor by default has display: inline property. you need to set it to display:block if you need full-width or set it to display:inline-block to take the size as per the text.
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
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