How can I get it so when I hover over Menu item 2 it will show the submenu-container?
Codepen
Do I need to add something on the LI or the A tag? I have tried
ul li a:hover .submenu-container {
display: block;
}
but it didn't work
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
</ul>
<div class="submenu-container">
<ul class="Sub-Menu">
<h3>SubMenu 1</h3>
<li>
Sub-Menu 1
</li>
<li>
Sub-Menu 2
</li>
</ul>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.submenu-container {
padding: 50px 20px;
background-color: red;
display: none;
}
ul {
list-style: none;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
display: block;
font-size: 1.2rem;
}
Your ideas are appreciated.
Many thanks
Paul
I would organize so that the submenu div is inside the menu 2 li and add:
ul li:hover .submenu-container {
display: block;
}
See the full working example here:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.submenu-container {
flex-wrap: nowrap;
justify-content: space-between;
padding: 50px 20px;
background-color: red;
display: none;
}
ul li:hover .submenu-container {
display: block;
}
ul {
list-style: none;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
display: block;
font-size: 1.2rem;
}
<div class=wrap>
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
<div class="submenu-container">
<ul class="Sub-Menu">
<h3>SubMenu 1</h3>
<li>
Sub-Menu 1
</li>
<li>
Sub-Menu 2
</li>
</ul>
</div>
</li>
</ul>
</div>
I've changed you css selector to ul li:hover .submenu-container
And then moved your sub-menu so it is inside the li with the hover selector
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.submenu-container {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding: 50px 20px;
background-color: red;
display: none;
}
ul {
list-style: none;
}
ul li {
margin: 10px 0;
}
ul li a {
text-decoration: none;
display: block;
font-size: 1.2rem;
}
ul li:hover .submenu-container {
display: block;
}
<ul>
<li>
Menu 1
</li>
<li>
Menu 2
<div class="submenu-container">
<ul class="Sub-Menu">
<h3>SubMenu 1</h3>
<li>
Sub-Menu 1
</li>
<li>
Sub-Menu 2
</li>
</ul>
</div>
</li>
</ul>
Related
Did I make a dropdown menu where I run into problems when I align the menu on the right side in the browser? The last submenu item sits further out of the browser's box-model. How do I control the placement of the dropdown (left, center and right)? Follow the link below:
.navbar-menu-one {
display: flex;
}
ul {
position: relative;
background-color: gray;
margin: 0px;
padding: 0px;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
color: white;
padding: 23px;
display: block;
}
ul li:hover {
background-color: #ccc;
}
ul ul {
position: absolute;
min-width: 200px;
display: none;
background-color: #ccc;
}
ul ul li {
display: block;
background-color: #e3e3e3;
}
ul li:hover ul {
display: block;
}
.item-nav-right {
float: right;
margin-right: 0px;
}
<nav class="navbar-menu-one item-nav-right">
<ul>
<li>Menu</li>
<li>Menu
<ul style="">
<li>
Link</li>
<li>
Link</li>
<li>
Link</li>
</ul>
</li>
<li>Menu</li>
<li>Menu
<ul>
<li>
Link</li>
<li>
Link</li>
<li>
Link</li>
</ul>
</li>
</ul>
</nav>
Link : Codepen
Based on the code and the existing resources, I managed to fix it by implementing the syntax below and the element
display: flex;
flex-direction: row-reverse;
direction: rtl;
improvement :
ul {
position: relative;
background-color: gray;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: row-reverse;
direction: rtl;
}
I want to display listed items (List 1) inside listed items (List 2) and I want the <li> elements of the first list to be displayed inline and the <li> elements inside each first <li> to be displayed vertically on hover. The problem that when hovering over the first main <li>, then the second main <li> will be displayed at the end of the first main <li> which is not expected:
The following is a live display of the problem:
https://codepen.io/alafawzi/pen/PaVYyB
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
ul li {
display: inline-block;
padding: 15px;
}
ul li ul li{
margin: 0;
padding: 0;
display: none;
}
ul li:hover ul li{
display: block;
}
<body>
<header>
Html5 begins
</header>
<nav>
<ul>
<li>div
<ul>
<li>Link1.1</li>
<li>Link1.2</li>
<li>Link1.3</li>
</ul>
</li>
<li>head
<ul>
<li>Link2.1</li>
<li>Link2.2</li>
<li>Link2.3</li>
</ul>
</ul>
</nav>
</body>
You need to add absolute position in sub ul.
ul {
list-style: none;
padding: 0;
margin: 0;
height: 100%;
}
ul li {
display: inline-block;
padding: 15px;
position: relative;
}
ul li ul{
margin: 0;
padding: 0;
display: none;
position: absolute;
}
ul li:hover ul{
display: block;
}
<body>
<header>
Html5 begins
</header>
<nav>
<ul>
<li>div
<ul>
<li>Link1.1</li>
<li>Link1.2</li>
<li>Link1.3</li>
</ul>
</li>
<li>head
<ul>
<li>Link2.1</li>
<li>Link2.2</li>
<li>Link2.3</li>
</ul>
</ul>
</nav>
</body>
I wrote a code using different internet source and I ran into a problem every object that's in the bottom of the menu parts cannot be interacted the menu interferes everything below him where the dropdown falls . the hitbox of the menu seems to included the dropdown even when its not shown
body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 23px;
}
#nav {
background-color:1a1a1a;
opacity: 0.9;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: right;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
border: 0px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
}
.left-to-right {
text-align: left;
}
<body dir-"rtl"><div id="nav">
<div id="nav_wrapper">
<div>
<ul <ul dir="RTL">
<li> תרמילים
<ul class="left-to-right">
<!-- <li class="backpacks" id="firstlight-20l"> FirstLight 20L </li>
<li class="backpacks" id="firstlight-30l"> FirstLight 30L </li>
<li class="backpacks" id="firstlight-40l"> FirstLight 40L </li>-->
<li class="backpacks"> rotation180° Professional 38L Deluxe </li>
<li class="backpacks"> rotation180° Horizon 34L </li>
<li class="backpacks"> rotation180° Panorama 22L </li>
<!-- <li class="backpacks" id="rotation180-travel-away"> rotation180° Travel Away 22L </li>-->
<li class="backpacks" id="rotation180-trail"> rotation180° Trail 16L </li>
</ul>
</li>
<li> תיקי מצלמות ספורט
<ul class="left-to-right">
<li>GP 1 kit case
</li>
<li>GP 2 kit case
</li>
</ul>
</li>
<li> אביזרים
<ul class="left-to-right">
<li>r180º Panorama/Horizon Photo Insert
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
Help will be appreciated
edit:
the menu is working but everything below him in the area where the dropdown fals dosent
Need to select all sibling <li> elements on hover. Tried accepted answer here but it is not working. JSFiddle here
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;;
background-color: #777;
}
.menu li {
float: none;
display: none;
}
.menu li a {
display: block;
padding: 10px 20px 10px 20px;
text-decoration: none;
color: #bbb;
}
.menu li a:hover {
color: #fff;
}
.menu .btn {
display: block;
cursor: pointer;
}
.menu li:hover ~ .menu li{/*ON THIS HOVER NOT SHOWING ALL SIBLIING LIs*/
display: block !important;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a></li>
<li>Home</li>
<li>Portfolio</li>
<li>Contact
<ul class="sub-menu">
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
Your problem is the selector:
.menu li:hover ~ .menu li
A hidden element can't be hovered-over, which means that li:hover is never going to match an element. Also, the general-sibling combinator is trying to find (subsequent) siblings that are <li> elements descending from sibling .menu elements. Which matches no elements in the page.
Converting that to the following selector:
.menu:hover li ~ li
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
;
background-color: #777;
}
.menu li {
float: none;
display: none;
}
.menu li a {
display: block;
padding: 10px 20px 10px 20px;
text-decoration: none;
color: #bbb;
}
.menu li a:hover {
color: #fff;
}
.menu .btn {
display: block;
cursor: pointer;
}
.menu:hover li ~ li {
display: block;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a>
</li>
<li>Home
</li>
<li>Portfolio
</li>
<li>Contact
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
works; that said it will - because of the general sibling combinator - match only those <li> elements with a preceding <li> sibling, which means it will, and can, never show the first <li>.
So, instead, I'd suggest using:
.menu:hover li
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
;
background-color: #777;
}
.menu li {
float: none;
display: none;
}
.menu li a {
display: block;
padding: 10px 20px 10px 20px;
text-decoration: none;
color: #bbb;
}
.menu li a:hover {
color: #fff;
}
.menu .btn {
display: block;
cursor: pointer;
}
.menu:hover li {
display: block;
}
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
<ul class="menu">
<li class="btn"><a>☰</a>
</li>
<li>Home
</li>
<li>Portfolio
</li>
<li>Contact
<ul class="sub-menu">
<li>Sub Menu
</li>
<li>Sub Menu
</li>
</ul>
</li>
</ul>
<!--NEED SOLUTION WITHOUT ALTERING HTML -->
I've been trying to work on this with no success, for some reason the sub list is just not showing up! I've tried: nav > ul > li:hover > ul{} but that seems to break functionality of the code. I'm sure this is a pretty simple issue I'm having.
nav > ul {
list-style: none;
}
nav > ul > li {
padding: 20px;
float: left;
}
nav > ul > li {
background-color: #fff;
}
nav > ul > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav > ul > ul > li {
float: none;
width: 200px;
}
nav > ul > li:hover {
color: #4169E1;
display: block;
visibility: visible;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure</li>
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
<li>Mad</li>
</ul>
</nav>
Simplify your selectors (nav ul ul) is fine
Make the parent li's position: relative so that the position: absolute dropdowns are positioned in relation to them. Use an appropriate top value
In your example, visibility: visible is not doing anything. display: none and display: block are used to hide / show
Nest your lists properly. This is the correct way:
<ul>
<li>Top Menu Item
<ul>
<li>Sub-menu Item</li>
</ul>
</li>
</ul>
Read more: Nested lists on w3.org
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
padding: 20px;
float: left;
background-color: #fff;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav ul ul li {
width: 200px;
background: #FFF;
padding: 10px;
}
nav ul li:hover ul {
color: #4169E1;
display: block;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
</ul>
</li>
<li>Secure
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
</nav>
To Point out one of the Mistakes you have
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure
<ul> **--> this should be inside li**
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
and your css
add this
nav > ul > li:hover > ul{
display: block;
opacity: 1;
visibility: visible;
}
check the fiddle
http://jsfiddle.net/ruchan/4fk6y2wu/
Use some more css3 power!
See Demo here
See Fullscreen
<nav>
<ul id="menu">
<li class="category top_level"><a class="selected" href="#">Home</a></li>
<li class="category top_level">About</li>
<li class="category top_level">Secure
<ul class="dropdown">
<li class="item">How secure are we?</li>
<li class="item">We are not secure enough!!</li>
</ul>
</li>
<li class="category top_level last">Mad
</li>
</ul>
</nav>
css
body {
font-family:'Montserrat', sans-serif;
background:#000;
}
ul {
list-style-type: none;
}
#menu a {
text-decoration: none;
white-space: nowrap;
color: #222;
background-color: #fff;
}
#menu li.top_level {
vertical-align: top;
zoom: 1;
display: block;
float: left;
width: 16.5%;
margin-right: 0.2%;
position: relative;
text-align:center;
}
#menu li.last {
margin-right: 0px;
}
#menu .dropdown {
float: none;
z-index: 100;
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
line-height:2em;
display:block;
padding:.6em;
border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
background:#007dac;
-webkit-transition: background-color 940ms;
-moz-transition: background-color 940ms;
}
#menu a.selected {
color: #ffffff;
background-color: #007dac;
}