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>
Related
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>
I have a simple menu made in html/css and the problem I encountered is that if I put my mouse pointer over menu item (test2) to expand submenu then other items from menu section (test1) change their positions: https://jsfiddle.net/dsb87pxz/
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
nav > ul > li {
display: inline-block;
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li > ul > li {
display: block;
}
Can you suggest a solution for this problem?
With vertical-align: top
nav>ul>li {
display: inline-block;
vertical-align: top;
}
nav>ul>li>ul {
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
When you hover over a list item in the first level, it affects the list item on the right, because of display: inline-block.
Therefore one can use float: left and display: relative for <li> in the first level and display: absolute for the <ul> inside of the <li>.
Example
ul {
list-style: none;
padding: 0;
}
li {
padding: 2px 5px;
}
nav>ul>li {
float: left;
position: relative;
}
nav>ul>li>ul {
position: absolute;
left: 0;
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
That's true you just need to add vertical-align as top to your inline-block elements which are li tags here.
display:inline-block by default aligns their block text to the baseline and that's why when user hover in above codes it aligns the text to the baseline i.e. vertical-align:baseline so change that to vertical-align:top.
nav > ul > li{
display: inline-block;
vertical-align:top; /*Just add this as already suggested*/
}
I am learning HTML5 and CSS. So my question is probably very basic and very naive. My apology for that.
To practice I am developing a header menu with drop down sub menu. The problem that I am experiencing is that even though I set up the display value of the sub-menu to block so that the sub-menu drops down vertically but now it drops horizontally.
html file :
<nav>
<ul>
<li>Home</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Woman</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>
<li>Contact Us</li>
</ul>
</nav>
here is the css code:
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover + ul li{
display: block;
}
nav ul li:hover{
background-color: #223433;
color:#f0f1f5;
}
I was wondering if some body could help me out what is wrong with my code? It is really appreciated.
The corrections are.
The issue was because the li tag were all float:left, this caused even the dropdown elements to be horizontal. So I created a class .dropdown to reset the float to none.
CSS:
.dropdown li {
float: none;
}
The dropdown ul tag, will still cause issues with the layout because you are not setting it to absolute position which will keep it separate from the navbar and show it as a floating (not CSS float) kind of element. Then the ul.dropdown needs to be placed inside the parent li element. This will allow us to position the absolute element according to the parent li element.
CSS:
nav ul li {
float: left;
position:relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left:0px;
}
On hovering the a tags were also in black which made the label dissapear. I recommend adding the CSS below, which will set the a tag to white color, on hover alone.
CSS:
nav ul li:hover > a {
color: white;
}
Finally below is a working example of the code.
nav {
height: 40px;
width: 960px;
display: block;
margin: 0, auto;
text-align: center;
text-transform: uppercase;
}
nav a {
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
position: relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
nav ul li ul li {
position: relative;
display: none;
}
nav ul li:hover>a {
color: white;
}
nav ul li:hover ul li {
display: block;
}
nav ul li:hover {
background-color: #223433;
color: #f0f1f5;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left: 0px;
}
.dropdown li {
float: none;
}
<nav>
<ul>
<li>
Home
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
Woman
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
1.Avoid the plus (+) sign in nav ul li:hover + ul li{display: block;} style.
2.Add one more style nav ul li ul {padding-left: 0px;}
3.li tag of Home and Woman close after dropdown list items. i.e,
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
Corrupted code:
<html>
<head>
<style>
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover ul li{
display: block;
}
nav ul li:hover{
background-color: #e3b0b2;
color:#f0f1f5;
}
nav ul li ul{
padding-left: 0px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Woman
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</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;
}
I am trying to create a horizontal navigation that when you rollover the root items the sub pages and their sub pages are shown below but in a 3 or 4 column layout. I have experimented with the css "column count" but it is not giving me consistent results. I am wondering if anyone has come across this before or could point me in the right direction.
<ul id="nav">
<li class="nonActive rootNav" id="rootNav1">
for Residents
<ul>
<li><a href="/for-residents/history-of-smithville/">History of
Smithville</a></li>
<li>Mission and Vision</li>
<li>Alerts</li>
<li>FAQs</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav2">
for Business
<ul>
<li>Film Commission</li>
<li>Comprehensive Plan</li>
<li>Chamber of Commerce</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav3">
our Community
<ul>
<li>Calendar</li>
<li>News</li>
<li><a href="/our-community/memorial-park-project/">Memorial Park
Project</a></li>
<li>City Maps</li>
<li>Airport</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav4">
city Departments
<ul>
<li>Police Department</li>
<li>Fire Department</li>
<li>Parks and Rec</li>
<li>Public Library</li>
<li>
Utilities
<ul>
<li>Pay online</li>
</ul>
</li>
<li>Public Works</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav5">
city Government
<ul>
<li>
City Council
<ul>
<li><a href=
"/city-government/city-council/city-council-meeting-minutes/">City Council
meeting minutes</a></li>
</ul>
</li>
<li>City Manager</li>
<li>City Staff</li>
<li>
Municipal Court
<ul>
<li><a href="/city-government/municipal-court/municipal-judges/">Municipal
Judges</a></li>
<li><a href="/city-government/municipal-court/open-warrants/">Open
Warrants</a></li>
</ul>
</li>
</ul>
</li>
</ul>
body {
margin: 0px;
}
ul#nav {
margin: 0px;
padding: 0px;
}
ul#nav li {
list-style-type: none;
display: inline;
position: relative;
float: left;
}
ul#nav li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
}
ul#nav li ul {
display: none;
position: absolute;
width: 750px;
margin: 0px 0px 0px -40px;
clear: both;
columns:200px 3;
-webkit-columns:200px 3; /* Safari and Chrome */
-moz-columns:200px 3; /* Firefox */
}
ul#nav li:hover ul {
display: block;
}
ul#nav li ul li {
clear: left;
display: block;
float: none;
}
ul#nav li ul li ul {
margin: 0px;
padding: 0px 0px 0px 10px;
position: relative;
}
ul#nav li ul li ul li {
clear: both;
display: block;
}
Here is my fiddle
fiddle
Here are a few examples of what I am trying to achieve.
Hm, based on your JSFiddle, I'm assuming the problem you're facing right now is that all of the submenus are lined up with the menu item that causes them to appear, and you want them aligned to only the left. You could achieve this through removing the relative positioning on <li> elements, and using left:0 on the submenus to put them where you want them.
So, your CSS adjustments would look like:
ul#nav li {
/* position:relative; */
}
ul#nav li ul {
left:0;
}
Here's a JSFiddle to show you how that look. Hope this helps! Let me know if you have any questions.
I'm sure there are plenty of ways to tackle this with a ton of different options - but here's one approach I worked with
#nav {
position: relative;
float: left;
}
#nav > li {
width: 20%;
}
ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
float: left;
}
ul li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
text-decoration: none;
}
ul li ul {
position: absolute;
top: 40px;
left: 0;
display: none;
}
ul li:hover > ul {
display: block;
}
/* The Rest for example purposes */
ul li ul li {
width: 25%;
}
ul li ul li a {
background: #ddd;
border: none;
}
With skipping the relative positioning on the first li children, the second level of ul's can inherit the width of the top level ul.
# http://jsfiddle.net/PqhEs/
Organized it a little differently - It all depends on how you'd want to group items in your sub sub pages, right now in the fiddle they just inherit the sub navigation's styles, but you could remove the float and adjust the width to have them list like the example.