I am developing an HTML page with only CSS in it. The menu option has a drop down on hover, but as soon as I try to click on the drop down list it disappears
I want the options in categories and all other drop down menus to be clickable. What am I doing wrong?
#mid ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
#mid li {
display: inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
#mid li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
#mid li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
#mid li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
#mid li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
#mid li ul {
display: none;
}
/*Make dropdown links vertical*/
#mid li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
#mid li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
#mid ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
#mid .show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
#mid input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
#mid input[type=checkbox]:checked~#menu {
display: block;
}
<div id="mid">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
Categories ￬
<ul class="hidden">
<li>Engineering </li>
<li>MBA</li>
<li>AGRICULTUE</li>
<li>ARCHITECTURE</li>
<li>Commerce</li>
<li>Sceince</li>
<li>PHD</li>
<li>Other Branches</li>
</ul>
</li>
<li>NOVELS
</li>
<li>News Upadates</li>
<li>
Follow us ￬
<ul class="hidden">
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
</li>
<li>Contact Us ￬
<ul class="hidden">
<li>ADVERTISEMENT</li>
<li>Report bug</li>
</ul>
</li>
</ul>
</div>
</html>
Add this
#menu li:hover > ul{
display: block;
}
This keeps the menu displayed while you are hovering over it's parent li
Related
I am using the pure css menu from this site. It works fine, but if I try to center or right-align the menu when it is not in 'hamburger menu' mode, I cannot get it to work.
I have tried the solutions from this stackoverflow question but it messes up the menu. The li-elements get placed beklow each other and/or the dropdown menus appear in wrong places.
So how can I center or right align this menu without messing it up? Any help is appreciated!
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Only Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</body>
</html>
You can use flexbox to align your content:
#media (min-width: 768px) {
#menu {
width: 100%;
display: flex;
justify-content: center; /* or use end */
}
}
You can use this code
body {
margin: 0;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden,
.hidden:hover {
display: block;
}
ul.hidden {
width: 20%;
}
ul.hidden li a {
display: block;
height: auto;
text-align: center;
line-height: normal;
padding: 15px 10px;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
ul.hidden {
width: 100%;
}
}
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
I am trying to center my menu, but I don't know why it isn't working. Can someone help me?
body {
margin: 0;
padding: 0;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox] {
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display: block;
}
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button" />
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</body>
</html>
Thanks for helping.
You are declaring all of your ul elements as position:absolute. You will need to change your ul id="menu" item to static positioning, and also give it a defined width since you are defining the width of your li a elements. Check your updated fiddle here. Simply add the following to your css:
#menu {
width:705px;
margin:0 auto;
display:block;
position:static;
}
How would I add a second tier to the drop down items?
Below is the code I found on StackOverfow which will work great if I can add
the second tiers.
body {
margin: 0
}
#menuBackground {
background: #2f3036;
width: 100%;
height: 50px;
text-align: center;
}
#menuContainer {
text-align: center;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*Create a horizontal list with spacing*/
li {
display: inline-block;
vertical-align: top;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
font-size: 1rem;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff
}
/*Hide dropdown links until they are needed*/
li ul {
position: absolute;
display: none
}
/*Make dropdown links vertical*/
li ul li {
display: block;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px
}
/*Display the dropdown on hover*/
ul li a:hover+.hidden,
.hidden:hover {
display: block
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 16px 0;
display: none;
width: 100%!important
}
/*Hide checkbox*/
input[type=checkbox] {
display: none
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked~#menu {
display: block;
margin: 0 auto
}
/*Responsive Styles*/
#media screen and (max-width: 760px) {
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
white-space: initial;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px
}
/*Make all menu links full width*/
ul li,
li a {
width: 100%
}
/*Display 'show menu' link*/
.show-menu {
display: block
}
}
<div id="menuBackground">
<div id="menuContainer">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>Home</li>
<li>
About ￬
<ul class="hidden">
<li>Who We Are</li>
<li>What We Do</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>Photography</li>
<li>Web & User Interface Design</li>
<li>Illustration</li>
</ul>
</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</div>
To add a tier just open a new ul inside whichever li you want to have the sub section. You can see the example with ul class="hidden.
.hide { display: none }
li:hover { color: red; cursor: pointer; }
li:hover > .hide { display: block }
<ul>
<li>link
<ul class="hide">
<li>sub</li>
</ul>
</li>
<li>deeper link
<ul class="hide">
<li>sub
<ul class="hide">
<li>sub</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm playing around with this Navbar and somehow the 'About and Portfolio' Menu keeps extending sidewards whenever you hover on top of it.
I would like to prevent it from extending.
You can check the code from JSFiddle. Thanks in advance.
https://jsfiddle.net/JustCraze/gdc56899/1/#
HTML
<ul id="main-nav">
<li>
Home
</li>
<li>
About ￬
<ul class="hidden">
<li>
Who We Are
</li>
<li>
What We Do
</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>
Photography
</li>
<li>
Web & User Interface Design
</li>
<li>
Illustration
</li>
</ul>
</li>
<li>
News
</li>
<li>
Contact
</li>
</ul>
CSS
#wrap-nav {
display: block;
margin:2rem;
z-index: 900;
padding: 5rem;
}
#main-nav {
display: block;
z-index: 950;
padding: 1rem;
float: right;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:.1rem;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
z-index: 980;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
z-index: 980;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
z-index: 980;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 250px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
The trick is to make li ul positions, absolute so they wont take room.
#wrap-nav {
display: block;
margin:2rem;
z-index: 900;
padding: 5rem;
}
#main-nav {
display: block;
z-index: 950;
padding: 1rem;
float: right;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:.1rem;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
z-index: 980;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
z-index: 980;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
z-index: 980;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
/*this is the trick*/
position:absolute;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 250px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
<ul id="main-nav">
<li>
Home
</li>
<li>
About ￬
<ul class="hidden">
<li>
Who We Are
</li>
<li>
What We Do
</li>
</ul>
</li>
<li>
Portfolio ￬
<ul class="hidden">
<li>
Photography
</li>
<li>
Web & User Interface Design
</li>
<li>
Illustration
</li>
</ul>
</li>
<li>
News
</li>
<li>
Contact
</li>
</ul>
The problem you are having is the result of one of your listed items:
<li>Web & User Interface Design</li>
Try cutting it down to just User Interface Design and it will not extend as much, if you prevent the nav bar from extending then the text will be cut off, is that your intent? Your desired outcome is a little unclear. And, thank you for making improvements to your question
I found this script online, but while using this its only float left side. i want this on center of DIV (id="menuback").
tried following but not working...
margin-left:auto;
margin-right:auto;
text-align:center;
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
<div id="menuback" style="text-align:center">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>menu1</li>
<li>
menu2
<ul class="hidden">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li>
menu3
<ul class="hidden">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
Give a specific width to your menu e.g 400px and set its margin:0 auto;
add this CSS to ul
ul {
left: 50%;
transform: translate(-50%,0);
}
The thing is that your ul#menu has position: absolute so it don't follow the flow of the document, so remove position: absolute an set display: inline-block
like this:
ul {
list-style-type:none;
margin:0;
padding:0;
/*position: absolute;*/ /*removed*/
display: inline-block; /*added*/
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block; /*setting block at low resolution*/
}
}
<div id="menuback" style="text-align:center">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>menu1</li>
<li>
menu2
<ul class="hidden">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li>
menu3
<ul class="hidden">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
If you want the menu has position: absolute for some reason add a wrapper that has the position
Like this:
.menu-wrapper{ /*added*/
position: absolute;
width: 100%;
}
ul {
list-style-type:none;
margin:0;
padding:0;
/*position: absolute;*/ /*removed*/
display: inline-block; /*added*/
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
-webkit-appearance: none;
}
/*Responsive Styles*/
#media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
.menu-wrapper {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
ul{
display: block;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ .menu-wrapper{ /*added the .menu-wrapper selector*/
display: block; /*setting block at low resolution*/
}
}
<div id="menuback" style="text-align:center">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<div class="menu-wrapper"> <!--added awrapper-->
<ul id="menu">
<li>menu1</li>
<li>
menu2
<ul class="hidden">
<li>sub1</li>
<li>sub2</li>
</ul>
</li>
<li>
menu3
<ul class="hidden">
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</div>