I am having issue where the Nav UL with class .hidden is appearing off the screen when the navigation link is at the end and there is not enough space for it to show.
The following screenshot illustrates what happens when you gradually resize the browser, you will be able to see the issue.
Code pen example
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul id="menu">
<li>
Nav Item 1 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 2
</li>
<li>
Nav Item 3
</li>
<li>
Nav Item 4
</li>
<li>
Nav Item 5 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 6
</li>
<li>
Nav Item 7
</li>
<li>
Nav Item 8 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
nav li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue";
color: #fff;
background: #A80B0D;
text-decoration: none;
}
#show-menu {
display: none;
}
.show-menu {
font-family: "Helvetica Neue";
text-decoration: none;
color: #fff;
background: #A80B0D;
text-align: center;
padding: 10px;
display: block;
}
nav li:hover ul a:hover {
background: #DDDDDD;
color: #000;
}
nav li:hover a {
background: #333333;
}
nav ul li a:hover + .hidden,nav .hidden:hover {
display: block ;
}
nav input[type=checkbox]:checked ~ #menu {
display: block;
}
#media (min-width: 750px) {
.show-menu {
display: none;
}
nav ul#menu {
display: block;
text-align: center;
}
nav ul#menu {
width: 100%;
background-color: #A80B0D;
}
nav ul#menu li {
display: inline-block;
}
nav ul#menu ul.hidden li {
display: block;
min-width: 200px;
}
nav ul.hidden {
position: absolute;
}
nav li a {
padding-left: 10px;
padding-right: 10px;
}
}
just add those lines to your css:
nav ul li {
position: relative;
}
nav ul li:last-child ul {
right: 0;
}
Result:
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: none;
}
nav li a {
display: block;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue";
color: #fff;
background: #A80B0D;
text-decoration: none;
}
#show-menu {
display: none;
}
.show-menu {
font-family: "Helvetica Neue";
text-decoration: none;
color: #fff;
background: #A80B0D;
text-align: center;
padding: 10px;
display: block;
}
nav li:hover ul a:hover {
background: #DDDDDD;
color: #000;
}
nav li:hover a {
background: #333333;
}
nav ul li a:hover + .hidden,
nav .hidden:hover {
display: block;
}
nav input[type=checkbox]:checked ~ #menu {
display: block;
}
nav ul li {
position: relative;
}
nav ul li:last-child ul {
right: 0;
}
#media (min-width: 750px) {
.show-menu {
display: none;
}
nav ul#menu {
display: block;
text-align: center;
}
nav ul#menu {
width: 100%;
background-color: #A80B0D;
}
nav ul#menu li {
display: inline-block;
}
nav ul#menu ul.hidden li {
display: block;
min-width: 200px;
}
nav ul.hidden {
position: absolute;
}
nav li a {
padding-left: 10px;
padding-right: 10px;
}
}
<nav>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul id="menu">
<li>
Nav Item 1 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 2
</li>
<li>
Nav Item 3
</li>
<li>
Nav Item 4
</li>
<li>
Nav Item 5 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
<li>
Nav Item 6
</li>
<li>
Nav Item 7
</li>
<li>
Nav Item 8 ^
<ul class="hidden">
<li>Nav Item 1</li>
<li>Nav Item 2</li>
<li>Nav Item 3</li>
</ul>
</li>
</ul>
</nav>
Related
I tried to create a side menu bar with a sub-menu. The sub-menu should be visible when the cursor touches the main side menu. I used display: none; and on hover I used display: block;. The display: none; is not working for the sub-menu.
I also tried visibility: hidden; but it is also not working. What is wrong in my code?
.side-menu {
height: 89%;
width: 15%;
font-size: 18px;
font-family: Arial;
float: left;
z-index: 2;
}
.side-menu ul {
margin-left: 10px;
}
.side-menu ul li {
list-style-type: none;
font-weight: bold;
margin-top: 10px;
cursor: pointer;
}
.side-menu ul li:hover {
color: green;
}
.side-menu ul li ul {
display: none !important;
}
#side-menu ul li:hover ul {
display: block;
}
<html>
<head>
<title>Green Box</title>
</head>
<body>
<section class="header">
<div class="side-menu" id="side-menu">
<ul>
<li> Home</li><br>
<li>Offers<i class="fa fa-angle-right"></i></li>
<ul>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
</ul>
<li>mega sale<i class="fa fa-angle-right"></i></li><br>
<li> great indian sale<i class="fa fa-angle-right"></i></li><br>
<li> glass</li><br>
<li>frames</li><br>
<li> gift</li><br>
</ul>
</div>
</section>
</body>
</html>
This is wrong. You have no '< ul>'element inside '< li>'. Also remove the important.
.side-menu ul li ul {
display: none !important;
}
You have not included which part to display when hove over the menu. I have added a class name to the submenu to make it display. So final code is
.side-menu {
height: 89%;
width: 15%;
font-size: 18px;
font-family: Arial;
float: left;
z-index: 2;
}
.side-menu ul {
margin-left: 10px;
}
.side-menu ul li {
list-style-type: none;
font-weight: bold;
margin-top: 10px;
cursor: pointer;
}
.side-menu ul li:hover {
color: green;
}
.side-menu ul ul {
display: none;
}
#side-menu ul li:hover + .subs {
display: block;
}
<html>
<head>
<title>Green Box</title>
</head>
<body>
<section class="header">
<div class="side-menu" id="side-menu">
<ul>
<li> Home</li><br>
<li>Offers<i class="fa fa-angle-right"></i></li>
<ul class="subs">
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
<li>sub menu</li>
</ul>
<li>mega sale<i class="fa fa-angle-right"></i></li><br>
<li> great indian sale<i class="fa fa-angle-right"></i></li><br>
<li> glass</li><br>
<li>frames</li><br>
<li> gift</li><br>
</ul>
</div>
</section>
</body>
I have created my nav bar which was working fine but now i tried to add sub menu in my navbar and its not showing sub menu on hover. kindly check and correct me.
First I added <ul> in my <li> tag then I added css to hide nested <ul> then I tried to show <ul> on hover <li>
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
</nav>
Looks like your <li> wrap is incorrect!
here is the fiddle
After Privacy Policy you have created another <li> that shouldn't be needed. you have to wrap the sub-menus with in privacy policy tag not a new one that is one of the reason why the css was not showing data as expected and you were almost there regarding CSS I just fixed it for you! hope it helps.
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</nav>
Why don't you start from this working snippet and try to change data according to your needs :)
HTML Sub-Nav
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
test
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
You have to add an anchor tag in the sub nav you have created. Because currently those sub-tabs are created but are not associated with any super-tab.
Subnav
So add this above your sub-nav code. You are good to go.
I'd like for the menu sub menu to show 10 pixels underneath the menu, i can achieve that using margin-top on the ul, but then i cant move my mouse down to the sub menu because there is a gap. There are posts very similar to this but i could't extract an answer from them. Like this one
Space between menu and drop down menu
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
margin-top: 18px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2 long lel</li>
<li>Sub Menu 3 really bare long mad</li>
<li>Sub Menu 4 dvg</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg</li>
<li>sdfg</li>
<li>sdfgsdfgsdfgsdfg</li>
<li>sdfgsdfgsdfgsdfgsdfg</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf</li>
<li>sfdgsdfgsdfgl</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
</ul>
</li>
<li class="point">pages</li>
<li class="point">light version</li>
</ul>
UPDATE:
Now that you gave the reference, the hover menu is not actually distant from the li itself, but it is positioned right below it. On the example site the li has a height bigger than the text within and has position: relative; on it.
The dropdown is absolute positioned right below this bigger <li> element with a top: 100%; that way it is distant from the text that triggers the dropdown.
Check the updated Snippet bellow with an updated solution.
Margins are not 'hoverable', and therefore the hover selector is not triggered. One way to keep it distant whilst 'hoverable' is to use padding instead of margins.
So you could change your .lmao li ul, although I wouldn't advise adding style to tags as a CSS best practice, I usually adopt a CSS naming convention such as BEM, SMACSS, among others.
/* Reset the ul style */
ul {
list-style: none;
padding: 0;
margin: 0;
}
deepMenu {
background: black !important;
margin-left: 100px !important;
position: absolute !important;
}
.lmao {
width: 100%;
text-align: center;
}
.lmao li {
display: inline-block;
background-color: white;
padding: 15px;
position: relative;
padding: 20px;
}
.lmao li a {
text-decoration: none;
color: black;
}
.lmao li a:hover {
text-decoration: none;
color: #f38763;
}
.lmao li ul {
display: none;
position: absolute;
border-top: 5px solid black;
top: 100%;
min-width: 200px;
}
.lmao li ul li {
display: none;
border-top: 0.1px solid #F2F2F2;
padding: 10px 40px 10px 10px;
margin: 0;
position: relative;
z-index: 9999999;
background: white;
font-size: 8pt;
line-height: 24px;
text-align: left;
}
.lmao li:hover > ul,
.lmao li:hover > ul li {
display: block;
}
<ul class="lmao">
<li class="point1">home
<ul>
<li>Sub Menu 1
</li>
<li>Sub Menu 2 long lel
</li>
<li>Sub Menu 3 really bare long mad
</li>
<li>Sub Menu 4 dvg
</li>
</ul>
<li class="point">features
<ul>
<li>sdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li>sdfg
</li>
<li>sdfgsdfgsdfgsdfg
</li>
<li>sdfgsdfgsdfgsdfgsdfg
</li>
</ul>
<li class="point layout">Layouts
<ul>
<li>sfdgsdfgsdfgsdfgsdfgdfgsdgsdf
</li>
<li>sfdgsdfgsdfgl
</li>
<li>dfsgsdfgsdfgsdfgsdfgsdfgsdfg
</li>
<li class="arrow">sfgsdfg
<ul class="deepMenu">
<li>Deep Menu 1
<ul>
<li>Sub Deep 1
</li>
<li>Sub Deep 2
</li>
<li>Sub Deep 3
</li>
<li>Sub Deep 4
</li>
</ul>
</li>
<li>Deep Menu 2
</li>
</ul>
</li>
</ul>
</li>
<li class="point">pages
</li>
<li class="point">light version
</li>
</ul>
body {
background-color: #cac3bc
}
nav {
float: left;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-table;
margin-right: -80px;
}
nav ul li {
float: left;
}
nav ul li:hover {
border-bottom: 5px solid #f5aa65;
color: #fff;
}
nav ul li a:hover {
color: #000;
}
nav ul li a {
display: block;
padding: 15px 15px;
font-family: 'PT Sans', sans-serif;
color: #000;
text-decoration: none;
}
nav ul ul {
background-color:#fff;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #000;
}
nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
<body>
<nav>
<ul>
<li>One
<ul>
<li>A</li>
<li>B
</ul>
</li>
<li>Two
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>Three
<ul>
<li>A</li>
<li>B</li>
</ul>
</li>
<li>Four</li>
</ul>
</nav>
</body>
I have some problem with my horisontal drop down menu. The sub_menu is not appearing under its parent. Can anyone help me get it right? What am I doing wrong? I want the menu to be 100% wide and centerd.
nav {
max-width: 100%;
text-align: center;
}
nav > ul > li {
padding: 10px;
display: inline;
}
nav ul li a {
font-family: sans-serif;
font-size: 1em;
color: #000;
}
nav ul li:hover .sub_menu {
display: block;
}
.sub_menu {
display: none;
position: absolute;
}
<nav>
<ul>
<li>link 1
</li>
<li>link 2
<ul class="sub_menu">
<li>link 2.1
</li>
<li>link 2.2
</li>
</ul>
</li>
<li>link 3
<ul class="sub_menu">
<li>link 3.1
</li>
<li>link 3.2
</li>
</ul>
</li>
</ul>
</nav>
Two steps
1. Set position: relative; for li:
nav > ul > li {
padding: 10px;
display: inline;
position: relative;
}
2. Set right: 0; for ul:
.sub_menu {
display: none;
position: absolute;
right: 0;
}
jsFiddle
I am trying to make a drop down menu using only CSS, but i'm having a hard time getting the dropdown menu the same size (width and height) as it's parent:
Working fiddle: HERE
The <nav> section from my HTML:
<nav>
<ul>
<li>Home</li>
<li>Menu With Menus
<ul>
<li>opt 1</li>
<li>opt 2</li>
<li>opt 3</li>
</ul>
</li>
<li>Whatnot</li>
</ul>
</nav>
The CSS:
nav ul {
position: relative;
display: inline-table;
list-style: none;
}
nav ul li {
float:left;
list-style-type: none;
}
nav ul li a {
background-color: #dae8ec;
color: rgb(233,78,31);
display: block;
font-weight: bold;
margin: 0 auto;
padding: 9px 18px 9px;
text-decoration: none;
border: 1px solid black;
border-radius: 2px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 7px 30px;
color: rgb(233,78,31);
}
nav ul li a:hover {
background: rgb(138, 92, 132);
color:#dae8ec;
}
Any suggestions? Thanks.
Js Fiddle Demo
<nav>
<ul>
<li>Home</li>
<li>Menu Withs
<ul>
<li>opt 1</li>
<li>opt 2</li>
<li>opt 3</li>
</ul>
</li>
<li>Whatnot</li>
</ul>
</nav>
Cheers !!