I currently have a navigation menu with a few subjects. One subject has the titel Equipment. When I hover over it, Throwables and Gear show up. This is what I currently have, I want to have another menu that opens when I hover over Throwables or Gear. I tried different things like adding another ul or li between the li of Gear, but every time when I trie something like that my hole menu get weird. I searched on YouTube/Google but I couldn't get it to work how I want it.
So in short:
I want another dropdown menu when I hover over Throwables or Gear. It needs to open to the right and have the same blue color when I hover over it, Here is an example of how it's supposed to look (the rest of the menu is to the left of Equipment)
A part of the menu code:
.navigatie_menu{
position: absolute;
left: 505px;
top: 95px;
z-index: 2;
}
ul {
padding: 0px;
list-style: none;
color: black;
}
ul li {
float: left;
width: 130px;
height: 40px;
background: rgba(223,223,223,0.95);
line-height: 40px;
text-align: center;
font-size: 17px;
color: black;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li a:hover {
background-color: #94bfea;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="navigatie_menu">
<li><a>Equipment</a>
<ul>
<li>Gear</li>
<li>Throwables</li>
</ul>
</li>
</ul>
Something like that?
.navigatie_menu {
position: absolute;
left: 505px;
top: 95px;
z-index: 2;
}
ul {
padding: 0px;
list-style: none;
color: black;
}
ul li {
float: left;
width: 130px;
height: 40px;
background: rgba(223, 223, 223, 0.95);
line-height: 40px;
text-align: center;
font-size: 17px;
color: black;
}
ul li a {
text-decoration: none;
color: black;
display: block;
}
ul li a:hover {
background-color: #94bfea;
display: block;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
.sub_menu1 {
position: absolute;
left: 130px;
display: none;
}
.sub_menu2 {
position: absolute;
left: 130px;
display: none;
}
.gear:hover .sub_menu1 {
display: block;
}
.throwables:hover .sub_menu2 {
display: block;
}
<body>
<ul class="navigatie_menu">
<li><a>Equipment</a>
<ul>
<li class="gear">Gear
<ul class="sub_menu1">
<li>subject1</li>
<li>subject2</li>
<li>subject3</li>
<li>subject4</li>
</ul>
</li>
<li class="throwables">Throwables
<ul class="sub_menu2">
<li>subject1</li>
<li>subject2</li>
<li>subject3</li>
<li>subject4</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
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;
}
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 made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
As per title, I have got the code almost working I think, but due to having limited knowledge on CSS, I am making stupid mistakes/assumptions. Any help with explanation would be much appreciated.
The fiddle link is here
ul {
padding: 0;
list-style: none;
background: #ffffff;
}
ul li {
color: #0000ff;
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a {
display: inline-block;
padding: 8px 25px;
background-color: #FFFFFF;
text-decoration: none;
width: 140px;
}
ul li a:hover {
background-color: #FFFFFF;
}
ul li ul.dropdown {
min-width: 125px;
/* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 500;
}
ul li:hover ul.dropdown {
border: 2px solid #0000ff;
display: block;
padding-left: 50px;
background-color: #ffffff;
}
ul li:hover a:hover ul.dropdown {}
<div id="mylinks">
<ul id="mylists" href="#">
<li>MY LIST MENU
<ul class="dropdown">
<li><span id="level1" onclick="location.href='http://www.google.co.uk/'" title="Go Google"> First item<span>
</li>
<li> Second item
</li>
</ul>
</li>
</ul>
</div>
You need to set a correct position for the dropdown list:
ul li ul.dropdown {
min-width: 125px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 150px;
top: 0;
}
Notice that left was set to 150px and top was set to 0.
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