I was trying to learn how to create drop down menu from CSS tricks. This is code they have:
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
css
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
What I don't understand from above is why they need the following selector:
ul li ul:hover
Because when I remove it the menu still works. Can someone explain why? Which is the correct selector?
Here is demo:
https://stackblitz.com/edit/js-aftbkv?file=style.css
Article link:
https://css-tricks.com/solved-with-css-dropdown-menus/
the hover selector means: when the mouse is on that element, something is going to happen. it adds some functionality.
has u see the elements of the dropdown menu they have display:none and on hover they set their display to display:block appering them.
If u delete all the hover it will not work! maybe is because u deleted them and not save the file or maybe the cache, but without :hover will not be functionality.
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;
}
I have a problem with focus parameter in css. My basic problem is, when I click on my href, it expands my list with hrefs which don't work.
When I comment css below, these hrefs all are fine, but they are also enabled when they are invisible.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 20px;
}
li.position {
width: 100px;
background-color: powderblue;
border-bottom: 1px solid black;
}
ul a:hover {
background-color: green;
}
.sub-menu {
position: absolute;
opacity: 0;
}
.sub-menu ul li a {
cursor: default;
pointer-events: none;
}
ul li a:focus + .sub-menu {
opacity: 1;
pointer-events: none;
}
ul li a:focus + .sub-menu ul li a {
pointer-events: auto;
cursor: pointer;
}
<ul>
<li>
click here
<div class="sub-menu">
<ul>
<li class="position">amazon</li>
<li class="position">amazon</li>
<li class="position">amazon</li>
</ul>
</div>
</li>
</ul>
You explicitly said the browser should ignore clicks on the links with pointer-events:none;
You are using opacity to hide your links. This is not the best way because the links are still there, just invisible.
What you really want to do really hide the links when they shouldn't be visible. I recommend using display: none and display: block. You can also do things like this, which keeps the links visible to screen readers but not humans:
.hidden {
display: block;
width: 0;
height: 0;
padding: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
By default, selector pointer-events: none should have rule .sub-menu set.
Even with focus, tags a continue to be inactive. Add rule pointer-events: auto for the .sub-menu:hover ul li a selector.
.sub-menu:hover ul li a {
pointer-events: auto;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 20px;
}
li.position {
width: 100px;
background-color: powderblue;
border-bottom: 1px solid black;
}
ul a:hover {
background-color: green;
}
.sub-menu {
position: absolute;
opacity: 0;
pointer-events: none;
}
.sub-menu ul li a {
cursor: pointer;
}
ul li a:focus + .sub-menu {
opacity: 1;
pointer-events: auto;
}
.sub-menu:hover ul li a {
pointer-events: auto;
}
<ul>
<li>
click here
<div class="sub-menu">
<ul>
<li class="position">amazon</li>
<li class="position">amazon</li>
<li class="position">amazon</li>
</ul>
</div>
</li>
</ul>
I have a menu and submenu from one of the elements. The code is here: http://jsfiddle.net/mq5g6upe/ . I would like you to tell me how to implement vertical dropdown menu from element My project because now it not seem ok.
header.html
<header>
<div class="main">
<ul>
<li>Home</li>
<li>My projects
<ul class="my-projects-dropdown">
<li>Endless Blow
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>My Google Play link</li>
<li>About</li>
<li><input type="submit" class="a-login" value="Login" (click)="navigateToLogin()"></li>
</ul>
</div>
</header>
header.css
#container {
margin: 0 auto;
}
ul {
float: right;
list-style-type: none;
margin-top: 25px;
margin-right: 115px;
}
ul li {
display: inline-block;
vertical-align: middle;
}
ul li a {
text-decoration: none !important;
padding: 5px 20px;
border: 1px solid #000;
color: #000;
transition: 0.4s ease;
font-size: 20px !important;
}
ul li a:hover {
background-color: cyan;
}
ul li a.li-login {
text-decoration: none !important;
position: relative;
margin-left: 10px;
padding: 5px 10px;
color: #000;
transition: 0.4s ease;
font-size: 16px !important;
border: none;
vertical-align: middle;
line-height: normal;
}
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
}
ul li:nth-child(5){
margin-left: 20px;
vertical-align: middle;
line-height: normal;
}
ul ul {
display: none;
position: absolute;
}
ul ul li {
float:none;
display:list-item;
position: relative;
}
Now there are three problems. First the submenu of items seems to overlap on another elements. Second there is a distance between the menu element My projects and first element of submen. Third outside jsfiddle in production (https://jakuwegiel.web.app/home) also submenu is moved a bit to right.
I forked your fiddle. check this https://jsfiddle.net/wrtxkz0d .
Made these changes in your css. Dropdown is working.
ul li:hover > ul {
visibility: visible;
opacity: 1;
display: block;
margin:0;
padding: 0;
}
ul ul li {
float:none;
display:list-item;
position: relative;
margin: 13px 0;
}
This is a two part question. The first part is my problem when hovering over an li element that is supposed to reveal a nested ul element. It brings the rest of the li tags at the bottom of the nested ul element. I don't know what I'm doing wrong but it pushes the initial li elements downward. I wish someone can explain what I'm doing wrong. Here is the code
The second question I have is how do I create li elements that specificly have a hovering effect on them and not any nested li elements? I wanted to create a menu list that changes the color of the text when you hover over it, but I didn't want the nested li elements to also have the hover effect
HTML
<div id="container">
<ul class="list-inline">
<li>Fire
<ul>
<li>charmander</li>
<li>magmar</li>
<li>vulpix</li>
</ul>
</li>
<li>Grass
<ul>
<li>bulbasaur</li>
<li>bellsprout</li>
<li>oddish</li>
</ul>
</li>
<li>Electric
<ul>
<li>pichu</li>
<li>magneton</li>
<li>voltorb</li>
</ul>
</li>
<li>Water
<ul>
<li>squirtle</li>
<li>poliwag</li>
<li>krabby</li>
</ul>
</li>
</ul>
</div>
SCSS
$green: #33cc33;
$blue : #0099ff;
$yellow: #ffcc00;
$red: #ff3333;
#mixin secondUl($color) {
li {
color: white;
background: $color;
min-width: 100px;
border-bottom: 1px solid white;
}
a {
color: white;
font-weight: normal;
text-align: center;
display: block;
width:100% ;
padding: 5px 0;
}
} //secondUl
#container {
width: 600px;
margin: auto;
margin-top: 30px;
border-top: 1px solid black;
color: black;
font-family: arial,
sans-serif;
ul {
margin: 15px 0;
position: relative;
} //ul
} //container
.list-inline {
ul {
position: absolute;
padding: 0;
top: 0;
left: -25% ;
z-index: 2;
display: none;
li {
display: inherit;
min-width: 100px;
margin: 0;
} //li
} //ul
li:nth-of-type(1) ul {
#include secondUl($red);
}
li:nth-of-type(2) ul {
#include secondUl($green);
}
li:nth-of-type(3) ul {
#include secondUl($yellow);
}
li:nth-of-type(4) ul {
#include secondUl($blue);
}
li {
list-style: none;
display: inline-block;
margin: 0 10px;
&:hover ul {
display: block;
}
} //li
li:nth-child(1) a:hover {
color: $red;
}
li:nth-child(2) a:hover {
color: $green;
}
li:nth-child(3) a:hover {
color: $yellow;
}
li:nth-of-type(4) a:hover {
color: $blue;
}
&:first-child a {
text-decoration: none;
color: black;
text-transform: capitalization;
font-weight: 600;
-webkit-transition: color 1s;
transition: color 1s;
-moz-transition: color 1s;
}
}//list-inline
First you have used global css for ul under #container #container ul {position:relative;} this css will be apply on every child ul which is in #container, and its overriding .list-inline ul{position:absolute}, you need to set immediate child selector css #container > ul {position:relative;}.
For second ans. you need to do same thing, use immediate child selector css
http://codepen.io/anon/pen/LRZVRO
For problem 1 add vertical-align:top to your li
li {
list-style: none;
display: inline-block;
margin: 0 10px;
vertical-align: top;
&:hover ul {
display: block;
}
}
For Problem 2 use child instead of decendant selector. E.G:
> li:nth-child(1)>a:hover {
color: $red;
}
See: http://codepen.io/anon/pen/rrpVaV
It works well. you have to add width of li
.list-inline li {
min-width: 110px;
}
And
.list-inline li:hover ul {
display: table;
}
DEMO
https://codepen.io/Dhaarani/pen/vXpONj
I have a navigation menu for my website:
here is the HTML
<ul id="trans-nav">
<li>About Us
<ul>
<li>Contact Us</li>
<li>Login</li>
</ul>
</li>
</ul>
as you can see it has a dropdown (submenu) under the link but the sub menu is displaying under the page content below the menu.
how can i make it display the sub menu OVER the page content rather than behind?
here is the CSS:
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
also a fiddle: http://jsfiddle.net/charliejsford/SAXmG/
You don't appear to be defining any z-index. Without it, elements that appear later in the page will appear on top.
To fix this, I suggest adding position:relative to your list's styles, and then you can also add z-index:1000 or some other suitable number.
Not defining any z-index should not be a problem, and i don't think it's wise to define useless z-index everywhere.
With sample CSS code you post there, your menu should lie on the top of any static element that follow it, because your menu is positioned and the rest of your page is not.
So if you're submenu goes behind the page content, the page content you're talking about must be positioned too, and it may be your true problem.