How To Create A Responsive Navigation Menu Using Only CSS

How To Create A Responsive Navigation Menu Using Only CSS

In this tutorial we will be creating a basic responsive navigation menu with dropdown using only HTML and CSS. Many navigation menus (especially responsive ones) are created using a combination of HTML, CSS and Javascript. This simple CSS only method will demonstrate that Javascript isn't always necessary!

The code we will create includes only the most essential CSS required for structure and basic styling. This makes it much easier to follow and understand the purpose of each line of code. It also means that the end product is primed and ready for your unique customization.

Live Demo

A Quick Message

Big thanks to the commenters that informed us of an issue this code was having on mobile devices! We have now amended the code using the checkbox method found here: http://bit.ly/1pMflzW as suggested by Sean Savoie.

The HTML

As you can see I have declared the HTML5 doctype, and included the basic page structure. The only content within the body tags is a nested unordered list. To demonstrate which top level links will have dropdowns, I have included a unicode down arrow (↓).

<!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>
	<ul id="menu">
		<li><a href="#">Home</a></li>
		<li>
			<a href="#">About ↓</a>
			<ul class="hidden">
				<li><a href="#">Who We Are</a></li>
				<li><a href="#">What We Do</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Portfolio ↓</a>
			<ul class="hidden">
				<li><a href="#">Photography</a></li>
				<li><a href="#">Web & User Interface Design</a></li>
				<li><a href="#">Illustration</a></li>
			</ul>
		</li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>

The CSS

First of all, some basic styling to the ul and li elements to remove bullet points and other list styles. The inline-block and float:left attributes make the list display horizontally.

/*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;
}

The following attributes are almost exclusively for aesthetic appeal. If you intend to style this menu to your liking then this is the section of code to fiddle about with.

/*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;
}

Next up, some styling for the dropdown links. The first class defines that the dropdown will not be visible by default. And the final class says that the dropdown element will become visible on top level link hover.

/*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 menu css3

The navigation menu is ready for desktop use now, however we should also include some love for mobile users. Using a media query I target devices with a max width of 760px and make a few changes to the code.

/*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%;
	}
}

Optional Final Step

Space is limited on mobile devices, so it would be cool if we also had a button prompting mobile users to click a button before displaying the whole menu. To do this a couple of lines of code to the HTML where you want the button to appear.

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">

Add the following code into the CSS anywhere outside the media query:

/*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;
}
And this code within the media query:
	/*Display 'show menu' link*/
	.show-menu {
		display:block;
	}
responsive menu css3

Complete Code

HTML:

<!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><a href="#">Home</a></li>
		<li>
			<a href="#">About ↓</a>
			<ul class="hidden">
				<li><a href="#">Who We Are</a></li>
				<li><a href="#">What We Do</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Portfolio ↓</a>
			<ul class="hidden">
				<li><a href="#">Photography</a></li>
				<li><a href="#">Web & User Interface Design</a></li>
				<li><a href="#">Illustration</a></li>
			</ul>
		</li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</body>
</html>

CSS:

/*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;
	}
}

Conclusion & Live Demo

Live Demo

This code should work just fine in modern browsers, and doesn't rely on any javascript which can slow down page load times. Be sure to check out the live demo and use the code however you like!

Pre-Coded Resources

Love the tutorial but still want everything nicely packaged? We've got a few resources for you then.

5 CSS Navigation Menu Bars
1 5 CSS Navigation Menu Bars

5 CSS Navigation Menu Bars

This premium pack includes 5 unique navigation menu bar designs that can be easily implemented into your existing design concepts of coded projects.

View Resource >
Flat CSS3 Menu Bars
2 Flat CSS3 Menu Bars

Flat CSS3 Menu Bars

This premium pack contains 2 stylish web navigation menus, fully coded using HTML5 and CSS3. They're very modern and easily to edit and implement into your designs.

View Resource >
Pretty CSS3 Menu Bars
3 Pretty CSS3 Menu Bars

Pretty CSS3 Menu Bars

This premium pack contains 2 super sleek web navigation menus, fully coded using HTML5 and CSS3. Also included in the package is the original .psd source file for your design concepts.

View Resource >

Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    Marc

    Marc

    For people looking for a simpler way to create a menu, there is also a website called http://www.generatecss.com.

    All you you need to do is enter the link details, and the menu along with all the CSS and HTML will be created for you. Pretty neat!

    Apr 6, 2014 at 5:50 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Awesome, thanks for the tip, Marc!

      Apr 7, 2014 at 9:43 am
    • Reply »
      sonu

      sonu

      For people looking for a simpler way to create a menu, there is also a website called http://www.funtosms.com.

      Aug 8, 2014 at 1:47 am
    • Reply »
      pawan kumar

      pawan kumar

      It’s realy nice tutorial….....

      Oct 30, 2014 at 5:19 am
  • Reply »
    Carlos

    Carlos

    I like it, but it dosnt work on mobile, in mobile we cant use the hover as we use it in Desktop, i tried to use it on my WP, but it dosnt work.

    Apr 9, 2014 at 5:04 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Carlos, I’m able to tap to enable the dropdowns on mobile. The hover effects to change the background color won’t work the same way on mobile, otherwise the user would have to tap twice.

      Apr 10, 2014 at 10:17 am
      • Reply »
        conceptic

        conceptic

        what is…this..

        Jun 16, 2014 at 4:42 am
      • Reply »
        vid

        vid

        The menu does not drop down when clicked on Blackberry or any mobile. It works fine on bigger screens. Can you please help?

        Mar 14, 2015 at 3:33 pm
  • Reply »
    Robert

    Robert

    Why doesn’t the link work in iPhone device? When you try to click on a link it only shut down the “show menu”. It works in desktop mode.

    Example link:

    <li>homepage</li>

    Apr 21, 2014 at 8:07 am
    • Reply »
      Dan

      Dan

      You need a link inside:

      <li>Home</li>

      Apr 22, 2014 at 10:45 am
      • Reply »
        Dan

        Dan

        Oh that didn’t allow me to type in the anchor tag

        Apr 22, 2014 at 10:46 am
  • Reply »
    jah

    jah

    Thanks a lot. awesome menu and clean codes!!
    Hope you have footer designs too

    May 25, 2014 at 12:43 am
  • Reply »
    fws

    fws

    Links do not work when screen is reduced to trigger the media query (or on phone)—see the quick demo at http://www.screencast.com/t/0GY07Gbza

    May 26, 2014 at 11:48 am
    • Reply »
      NameFWS

      NameFWS

      FWIW the browser status bar DOES show the correct link, but clicking merely closes the dropdown…

      May 26, 2014 at 11:50 am
      • Reply »
        jim

        jim

        same issue? what am I missing?

        May 28, 2014 at 12:01 pm
        • Reply »
          Patrick

          Patrick

          Same issue. What am I missing?

          May 30, 2014 at 1:32 pm
          • Reply »
            Patrick

            Patrick

            Demo has the same problem. Think the code needs some more code, but I don’t know how to fix it.

            May 30, 2014 at 1:35 pm
            • Reply »
              maxiges

              maxiges

              </input>
              </body>
              </html>
              add this in end

               

              Feb 9, 2016 at 1:09 pm
        • Reply »
          Patrick

          Patrick

          I’ve added the following code:

          nav ul:active{
          display: block;
          }

          ...to the following css media section:

          @media only screen
          and (max-width : [lowrespx]) {
          }

          Result: if you click on a submenu, it doesn’t close merely.

          Hope it’s helpful for the rest of you.

          May 30, 2014 at 2:14 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      I’ll check this out and post an update with a fix ASAP.

      May 30, 2014 at 4:41 pm
      • Reply »
        mark

        mark

        This could be very useful to me. Is there a fix yet for the mobile issue?

        Jun 1, 2014 at 6:36 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      Hey everybody, this is fixed now!

      Jun 4, 2014 at 8:52 am
  • Reply »
    Sean Savoie

    Sean Savoie

    Hey for everyone trying to figure out the mobile link fix I think I may have found a better solution than the one presented. It involves a check-box that hides and shows the div when clicked, or pressed. Still using only CSS which is nice as well. Check it out here: http://bit.ly/1pMflzW

    Jun 2, 2014 at 11:51 am
    • Reply »
      Tony Thomas

      Tony Thomas

      Thanks Sean, I used the checkbox method you found to fix the tutorial code

      Jun 4, 2014 at 8:55 am
  • Reply »
    Dan

    Dan

    I keep trying to float the menu to the right but it’s not happening. Where exactly would that be coded? :)

    Jun 6, 2014 at 12:46 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Dan, if you add right: 0; to the ul class for the menu it will float right since it’s positioned absolutely.

      Jun 6, 2014 at 8:48 am
  • Reply »
    Dan

    Dan

    Thanks, Jenn. I kept searching around and found that to be the case. Another lesson learned in CSSdom. :)

    The last hurdle I have before it’s just the way I want can be seen in the following link to a test page. Hover on ‘About?’ and you can see the drop-down floats to the right instead of being directly under the main link.

    http://sitesetis.com/publicdocs/simplemenu.html

    All the code is on the page so you can view the source.

    Dan

    Jun 6, 2014 at 1:56 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Dan, Sorry about that. You need to position the ul#menu for right: 0;
      The solution I previously provided is making all ul’s be positioned to the right, so you just need to call out the top level ul ID. Hope that helps.

      Jun 9, 2014 at 6:25 am
  • Reply »
    Mohsin Shaikh

    Mohsin Shaikh

    Hi guys this is a very simple and easy style of responsive menu without bootstraap i like this

    Jun 24, 2014 at 3:04 am
  • Reply »
    Gary

    Gary

    Hi guys,

    This looks great, but I’m struggling to get it working on Windows Phone 8. The Show Menu button works. But tapping on the About or Portfolio buttons does not expand their sub items.

    Any work-around for this problem?

    Gary

    Jun 24, 2014 at 5:16 am
  • Reply »
    Deelite

    Deelite

    I tried your code, but when I try to roll off the main menu links, the dropdowns just disappear, and I can’t click the sub menu items

    Jun 26, 2014 at 7:49 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi there, sorry about that. Can you provide a live link so I can investigate?

      Jun 27, 2014 at 9:37 am
  • Reply »
    Darshan

    Darshan

    I Tried These code but not working in my menu.See only menu button but not work.

    Jul 3, 2014 at 3:36 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Darshan, do you have a live link so I can take a look?

      Jul 3, 2014 at 10:31 am
  • Reply »
    JD

    JD

    hi there

    How could i get this so that the whole block would sit centrally on the page?
    I’ve tried a few things and wrapping it up in a container but it’s not happy.
    Thanks in advance :)

    Jul 3, 2014 at 10:43 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi JD, I found this tutorial on CSSWizardry, and at the bottom there’s an update for a CSS dropdown version if you wanted to take a look at his code. Thanks!

      Jul 3, 2014 at 11:08 am
  • Reply »
    Bob

    Bob

    I cannot get the Show Menu link to appear on an iPhone. http://bit.ly/1zaSHqR

    Jul 3, 2014 at 2:54 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      Hi Bob, you need to include this html code where you want the link to appear:

      <label for=“show-menu” class=“show-menu”>Show Menu</label>
      <input type=“checkbox” id=“show-menu” role=“button”>

      Jul 4, 2014 at 5:30 am
  • Reply »
    Bob

    Bob

    Thanks Tony, I am an idiot. In my defense, let me say that was my fourth or fifth attempt at trying to get the code to work in my page. It wasn’t until I started with a completely empty page that the dropdown actually worked.

    When i put your code into my page things get a little screwy: the green button on the iPhone takes up about the top third of the screen instead of the 50px you intended. Plus the tap (or click on the desktop) on Show menu doesn’t reveal the menu.

    I assume (because it works on an empty page) something in my code is conflicting with yours. Now I just have to find it.

    But thanks again for your help, I really appreciate it.

    Jul 4, 2014 at 11:36 am
  • Reply »
    Jessica

    Jessica

    I finally got this code to work, however, now I am wondering: how do I make the color bar from the links go all the way across the page? Also how do I get the bar to line up flush to the image I have above it? No margins on either.

    Jul 15, 2014 at 5:37 pm
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Jessica, You can do this by putting a div around the ul and specifying its background color and height. To get rid of the margins, I recommend adding on normalize.css or try using negative margins.

      Jul 16, 2014 at 10:29 am
      • Reply »
        Jessica

        Jessica

        Thank you Jenn. I kinda just fudged the numbers for the height to work and be responsive, however i can’t get the margin fixed and still be responsive. Any ideas?

        Also, is there a way to make the drop down menu clickable instead of hoverable on phone (since phones don’t really have the ability to hover)?

        Jul 16, 2014 at 11:26 am
  • Reply »
    Tice

    Tice

    This is a really great and wonderful clean way. No JS just CSS. Thanks! : )

    Only one thing: How do I avoid to affect normal lists by that css. I know classes should do, but somehow if I use i.e. .topmenu ul { the margins are ignored and under show menu the navigation ist still in blocks and unhidden.

    Can you change that code so it won´t affect normal lists?

    Greetings and thanks for the great work, Tice

    Jul 16, 2014 at 10:48 am
    • Reply »
      Jenn Coyle

      Jenn Coyle

      Hi Tice, thanks for your comment, we’re glad you like this! Since this tutorial is for demonstration purposes only, we didn’t want to get too involved with the code. If you’re looking for more specific code that won’t affect other ul’s and li’s, check out our premium resource.

      Jul 16, 2014 at 10:53 am
  • Reply »
    Brad

    Brad

    I’m close to getting this to work. However, when I hover over the button, the drop down appears, but when I go to click an item in that list the dropdown disapeers.

    Also, the dropdown buttons are aligned to the right of my main nav button so they are extended past the left side. I would like to reverse this so they are inline with the left side and extend out the right.

    here is my style.css code:


    /*********************************************************************************/
    /* Nav                                                   */
    /*********************************************************************************/

    #nav
    {
      position: absolute;
      right: 0em;
      top: 2.2em;
    }

      #nav > ul > li
      {
      float: left;
      }
     
      #nav > ul > li:last-child
      {
      padding-right: 0;
      }

      #nav > ul > li > a,
      #nav > ul > li > span
      {
      display: block;
      margin-left: 0.7em;
      padding: 0.5em 1.2em;
      letter-spacing: 0.06em;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1.1em;
      outline: 0;
      color: #333;
      }

      #nav li.active a
      {
      background: #C13333;
      border-radius: 5px;
      color: #FFF;
      }
     
      #nav li a
      {
      display: block;
      margin-left: 0.1em;
      padding: 0.1em 0.1em;
      letter-spacing: 0.06em;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 0.9em;
      outline: 0;
      color: #333;
      }
     
      #nav li:hover a
      {
      background: #C13333;
      border-radius: 5px;
      color: #FFF;
      left: 0em;
      }
     
      #nav li:hover ul a
      {
      background: #C13333;
      border-radius: 2px;
      color: #FFF;
      padding: 0.1em 0.3em;
      left: 0em;
      }
     
      #nav li:hover ul a:hover
      {
      background: #C13333;
      border-radius: 2px;
      color: #FFF;
      }
     
      #nav li ul
      {
      display: none;
      }
     
      #nav li ul li
      {
      display: block;
      float: none;
      }
     
      #nav li ul li a
      {
      width: auto;
      min-width: 0px;
      padding: 0 20px;
     
      }
     
      #nav ul li a:hover + .hidden, .hidden:hover
      {
      display: block;
      text-transform: uppercase;
      font-size: 0.8em;
      }
     
     

      #nav > ul > li > ul
      {
      display: none;
      }

    Jul 17, 2014 at 10:52 am
  • Reply »
    Brad

    Brad

    Ignore that previous comment. I got the disappearing to work, but I’m struggling with the alignment, as well as the dropdown list is behind my banner image which hides some selections.

    here is my current code:

    /*********************************************************************************/
    /* Nav                                                   */
    /*********************************************************************************/

    #nav
    {
      position: absolute;
      right: 0em;
      top: 2.2em;
    }

      #nav > ul > li
      {
      float: left;
      }
     
      #nav > ul > li:last-child
      {
      padding-right: 0;
      }

      #nav > ul > li > a,
      #nav > ul > li > span
      {
      display: block;
      margin-left: 0.7em;
      padding: 0.5em 1.2em;
      letter-spacing: 0.06em;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1.1em;
      outline: 0;
      color: #333;
      }

      #nav li.active a
      {
      background: #C13333;
      border-radius: 5px;
      color: #FFF;
      }
     
      #nav li a
      {
      display: block;
      margin-left: 0.1em;
      padding: 0.1em 0.1em;
      letter-spacing: 0.06em;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 1.1em;
      outline: 0;
      color: #333;
      }
     
      #nav ul li:hover a
      {
      background: #C13333;
      border-radius: 5px;
      color: #FFF;
      left: 0em;
      }
     
      #nav li:hover a
      {
      background: #FFFFFF;
      border-radius: 2px;
      color: #000;
      padding: 0.5em 1.2em;
      left: 11em;
      box-shadow: 0 2px 2px -1px rgbs(0, 0, 0, 0.055);
      margin: 5;
     
      }
     
      #nav li:hover ul a:hover
      {
      background: #C13333;
      border-radius: 2px;
      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;
    }

    Jul 17, 2014 at 11:30 am
  • Reply »
    Bhushan

    Bhushan

    Very useful Indeed, Thank you so much

    Jul 28, 2014 at 8:46 am
  • Reply »
    Cheyenne

    Cheyenne

    Hi guys.
    Really like the way this menu is styled and I like how clear the description is.
    I do have one problem…. I have way more list items than you guys have in the example, resulting in that my menu is always displayed as the mobile version on the left side of the page.
    I would love to use this on my website…
    The idea is that I want my logo op the left, and my menu next to it on the right side of the page. Any tips on how to fix this?

    Many thanks.

    Jul 28, 2014 at 2:46 pm
  • Reply »
    Karen

    Karen

    Hi,

    I love the navigation menu. I thought I had it working. It works fine on my desktop, but when I click the Menu button within my Galaxy S3, nothing happens.

    Does anyone has an idea?

    Jul 30, 2014 at 9:22 am
    • Reply »
      Mike

      Mike

      Karen,

      Same here - not able to get the menu to open on phone (Galaxy S3). Works fine on desktop. Also viewed the jsfiddle examples listed on this page with phone and can confirm that they don’t work either.

      Hoping for a fix.

      Aug 4, 2014 at 3:59 pm
      • Reply »
        Karen

        Karen

        Hi Mike,

        After struggling for a few days, I decided to implement another menu. This time with some javascript, but it works fine.

        Aug 5, 2014 at 3:37 pm
  • Reply »
    NamePhilippe

    NamePhilippe

    Un très bon Tutorial, merci !!
    A very good tutorial, thank you!

    Aug 1, 2014 at 4:10 am
  • Reply »
    Maria Reiersol

    Maria Reiersol

    I would prefer if the id’s and classes were added in the CSS you provided, for example not just ul {, but ul#menu {. I have other lists in my HTML, and this obviously changes all my lists. I have tried specifying that this should only apply to the menu, but then for some reason the menu changes into looking exactly like it does without any CSS at all.

    Could something be done about this?

    Aug 2, 2014 at 1:09 pm
  • Reply »
    febin

    febin

    HELP ME PLZ..  I WANT TO ADD SUBITEMS FOR THE SUBMENUS

    Aug 3, 2014 at 3:48 am
  • Reply »
    Jennifer

    Jennifer

    I can not get the drop down menu to show up.. .What I am missing…. Please help

    <div class=“navbar”>

    <label for=“show-menu” class=“show-menu”> Menu</label>
    <label type=“checkbox” id=“show-menu” role=“button”>

    <ul class=“mainnav”>
      <li class=“active”> Home </li>
      <li>Our Parish </li>
      <li> Mass </li>
      <li>Bulletins </li>
      <li>Sacraments </li>
      <li>Contact </li>
    </ul>
    </div>

    </body>
    </html>/

    *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;
      -webkit-appearance: none;
    }

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~.mainnav li{
      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;
    }
    }

    Aug 3, 2014 at 9:08 pm
  • Reply »
    Richy

    Richy

    How to make the menu always show on mobile without click on the “Show Menu”

    Aug 5, 2014 at 1:13 pm
    • Reply »
      Tony Thomas

      Tony Thomas

      @Richy: Just don’t include the ‘Optional Final Step’ part of the tutorial

      Aug 6, 2014 at 5:28 am
      • Reply »
        Maren Holtermann

        Maren Holtermann

        Hi Tony,

        Great tutorial! I have almost used it for my new website. However, I have one problem. The menu does not open on click on some mobile phones or on Ipad? Do you have any idea what the reason could be?

        Thank you
        Maren

        Nov 25, 2015 at 8:15 am
      • Reply »
        Tina

        Tina

        If you remove the “optional” elements, then everything just disappears when you get to the responsive level.  I just see a blank page and no dropdown. 

        If I look at the code, I see that it shows display:none, which explains why.  But if you set this to display:block, all I see are stacked menu items, not a drop down.

        It seems the only way to get a dropdown effect using this tutorial is using the “optional” “show menu” link.

        May 20, 2016 at 10:23 am
  • Reply »
    Cheyenne

    Cheyenne

    Could someone help me with this?

    The menu pushed down everything else on my page when I hover over the drop down menu. I want the menu to just open on top of the rest of the page instead of pushing everything else down to open. Please help! I need to upload my website ASAP!

    Aug 6, 2014 at 4:25 pm
    • Reply »
      Mike

      Mike

      Did anyone get back to you on this I have same issue

      Jan 15, 2016 at 6:38 pm
  • Reply »
    Aamir

    Aamir

    HI,
    Thanks a lot for this great tutorial. Its very easy to use and working perfectly.
    I converted the drop downs to horizontal sub menu. The problem I’m facing now is that the sub menus are appearing just under its parent. I want them to appear on the left of the page.
    Can anyone please tell me how can I do that?
    Here is the link to my JSFIDDLE code http://jsfiddle.net/Bangash/871no457/

    Aug 8, 2014 at 4:24 pm
  • Reply »
    Aamir

    Aamir

    Never mind I have fixed it. Here is the fix :)
    Replace your code with this one :)

    /*Hide dropdown links until they are needed*/
    li ul {
    display: none;
    min-width:114%;
    clear: both;
    margin-left: 0;
    left: -14%;
    background: #eaf3e4;
    }

    Aug 9, 2014 at 3:42 am
  • Reply »
    Rakesh Kumar

    Rakesh Kumar

    I tried to implement your Code on my WordPress theme for the whole day but could not find out where is the problem. Everything seems to be working on full screen but whenever i resize my window only label appear and nothing happens. Do you have any idea what may be the problem. I can provide the link for you. Please do me this favour as i do not want to use jquery on my theme.

    Aug 10, 2014 at 2:03 pm
    • Reply »
      AamirName

      AamirName

      Can you share a working link Rakesh. Let me have a glance of it.

      Aug 11, 2014 at 8:40 am
  • Reply »
    Jane

    Jane

    Hello all

    I love the load speed of this menu.

    Can someone tell me how to justify the whole menu to the center of the page?

    I cant get it right. Tried to put the whole html into a new div, but it not working.

    Thank you very much.

    Aug 10, 2014 at 5:26 pm
  • Reply »
    Nicholas Stewart

    Nicholas Stewart

    Hey guys i am new to this and I have it working but I want to get rid of having to mouse over to display the menu item how do i do this

    http://www.lifeofafamilyman.com/Contact_us.php

    Aug 16, 2014 at 10:15 pm
  • Reply »
    Nicholas Stewart

    Nicholas Stewart

    I am trying to create a sumenu for a submenu I used the code that AArim gave to us but I can’t get it to look right is there another code or anyone who can help i am new to this codeing and trying to learn.  Thanks in advance

    Aug 16, 2014 at 11:43 pm
    • Reply »
      Aamir

      Aamir

      Hi Nicholas
      Change line no 59 on your menu css from

      li ul li {
      display: block;
      }

      to

      li ul li {
      display: inline;
      }

      hope this will fix your issue.

      Aug 17, 2014 at 1:43 am
      • Reply »
        Nick

        Nick

        AAmir

        I changed the code but the submenu is still blocking the next menu item here is a link and now I have some white spaces :(  sorry for all the questions and problems I do love your menu

        http://www.lifeofafamilyman.com/avg.php

        Aug 17, 2014 at 5:00 pm
  • Reply »
    nick

    nick

    HEy guys I am still having some issues with the menu.  I have it built the way i want it with all th submenus but they are overlapping the next item and the menu keeps falling befind the page content anybody know how i can fix this quick and easy
    a good example is my homepage   http://lifeofafamilyman.com

    Aug 18, 2014 at 11:19 am
  • Reply »
    Ashra Ismail

    Ashra Ismail

    Really helpful..thanks :)

    Aug 19, 2014 at 7:37 am
  • Reply »
    Dennis

    Dennis

    The demo works nicely on my desktop.
    It does not work on my Samsung Galaxy 3.
    On the Galaxy, it shows the green “Show Menu” line at the start of the demo.
    I cannot click on the green “Show Menu” link.  If I double-click, it magnifies the screen a little bit.  Another double-click reduces the screen back to normal size. 
    I cannot get the menu to do anything by using a single click.

    Aug 20, 2014 at 12:02 pm
  • Reply »
    steph

    steph

    Thank you this was very helpful. There is one flaw in the mobile design however. When tapping on a link to reveal the drop down menu, the drop down can not be hidden again by re-clicking the parent link. I would like the links with drop downs to work like the “show menu” bar with a tap on/off function. Could this be done by turning a ul li into a button somehow? If anyone has been able to accomplish this I would love to know as it is a major usability issue on mobile devices.

    Aug 20, 2014 at 7:37 pm
    • Reply »
      Aamir

      Aamir

      Hi Steph,
      It works fine. You may have done something wrong. Can you please provide a live link so that I can check it.

      Aug 29, 2014 at 8:52 am
  • Reply »
    Barry

    Barry

    hello i have used your tutorial to help improve my website but i am having a problem i have a few more links than you used in the tutorial and it has set my menu on to two lines i need to have it all one line what part of the css do i change or do i need to add a line of css to make the links a bit closer together instead of how they set out on this tutorial

    link to my test page showing what i mean http://slchandy.co.uk/test/menu.html

    Aug 29, 2014 at 5:58 am
    • Reply »
      Aamir

      Aamir

      Hi Barry,
      Change your li a to the given below.

      li a {
      display:block;
      height: 50px;
      color: #fff;
      background: #000000;
      text-decoration: none;
            font-size: 18pt;
            font-weight: bold;
            padding-right: 15px;
      min-width:150px;
      text-align: center;
      line-height: 50px;
      }

      Aug 29, 2014 at 8:51 am
  • Reply »
    steph

    steph

    Hi Aamir,
    Thanks for replying. It’s not that I’ve done something wrong but more like I’m trying to use this in a slightly different way then it was designed. Even the demo works the same way. Eg, in the demo “portfolio” has a drop down and is a link itself. Can the link on portfolio be removed so portfolio when taped on a mobile device simply displays and hides it’s drop down child elements? This would make it function in the same way the menu button does. Currently when you tap “portfolio” on a mobile device it will display the drop down, but there is no way of hiding the drop down again unless you go to a different link or close the full menu. I think it would be a persons natural instinct to tap again on “portfolio” to close the drop down, but in the current code it would merely direct them to the link for portfolio, which in the demo of course is a #. Unfortunately I am not so masterful at html/css that I can modify it to this degree. Though I do wonder if anyone knows if it actually can be done? It would require a li to have the functions of the checkbox button and I do not know if such a combination is possible.

    Aug 29, 2014 at 11:17 am
  • Reply »
    Shahbaz Ahmed Bhatti

    Shahbaz Ahmed Bhatti

    Very Gooooooooooooooooooood
    U r So Nice Tony
    Love your Sharing

    Sep 10, 2014 at 3:34 pm
  • Reply »
    arnolfo

    arnolfo

    Hi,

    I’m really trying to implement this menu but cannot get the mobil menu to show upon click. Any chance someone could give me an idea of what I am doing wrong?

    html code:
    <nav>
    <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>
      <li>HISTORY</li>
      <li>FULL SPECTRUM SERVICE</li></ul></li>
    <li>COLORS
    <ul>
      <li>DRY COLOR</li>
      <li>LIQUID COLOR
      <li>CONCENTRATES</li>
      <li>PRE-COLOR COMPOUNDS</li>
      <li>STOCK CONCENTRATES</li>
    </ul></li>
    <li>SERVICE SOLUTIONS
    <ul>
      <li>TESTING</li>
      <li>TRAINING</li>
    </ul></li>

    <li>TECH TEAM</li>
    <li>PLACE ORDER</li>
    <li>REQUEST MSDS</li>
    <li>CONTACT</li></ul>

    </nav>

    CSS:

    /*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: #1b1a18;
    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;
    }

    @media screen and (max-width : 760px){
    /*Make dropdown links appear inline*/
    nav ul {
      position: static;
      display: none;
    }
    /*Create vertical spacing*/
    nav li {
      margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    nav ul li, li a {
      width: 100%;
    }


      /*Display ‘show menu’ link*/
    .show-menu {
      display:block;
    }

    nav { background-color:#1b1a18;
    width:auto;
    text-align:center;
    }

    nav ul ul {
    display: none;
    }

    nav ul li:hover > ul {
      display: block;
      width:150px;
      box-shadow:2px 2px 3px #666666;
    -webkit-box-shadow:2px 2px 3px #666666;
     
    }

    nav ul {
    margin-left:60px;
    margin-right:auto;
    padding:0px;
    position:relative;
    }

    nav ul:after {
      content: “”; clear: both;
      display: block;
     
    }

    nav ul li {
    padding: 0;
    list-style: none;
    float:left;
    }

    nav ul li:hover {
    background-color: #3d4146;
    }

    nav ul li:hover a {
      color: #fff;
    }

    nav ul >li > a {
    font-family:‘robotoregular’, sans-serif;
    font-size: 16px;
    color: #FFF !important;
    font-weight: normal;
    text-decoration: none !important;
    padding: 8px 24px 10px 24px;
    display:block;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
    transition: all .25s;
    }

    nav ul ul {
    background: #3d4146;
    padding: 0;
    position: absolute;
    margin-left:0;
    top: 100%;
    z-index:10000;
    }

    nav ul ul li {
      float: none;
      border-top: 1px solid #6b727c;
      border-bottom: 1px solid #575f6a;
      position: relative;
      }

    nav ul ul li a {
      padding: 15px 40px;
      color: #fff;
      font-size: 14px;
      padding: 8px 6px 10px 6px;
     
      }

    nav ul ul li a:hover {
      background: #4b545f;
      }

    Sep 11, 2014 at 2:35 pm
    • Reply »
      arnolfo

      arnolfo

      My apologies for dumping code and questions onto your site. I really like your solutions but just cannot make it work for my site even though I have made it work in jsFiddle. I understand it works for a great many users but after 12 hours of trying my lack of a full understanding of CSS has won the day.

       

      Sep 12, 2014 at 11:57 am
  • Reply »
    Paul

    Paul

    This menu does not work under Android. When clicking on the “show menu” button the menu does not expand and show. Even the demo on this page is not working at all. I’m using the nativ Android browser with a Samsung Galaxy S2. Does anybody know a workaround? Anybody know hod to fix this?

    Sep 14, 2014 at 4:44 am
  • Reply »
    will

    will

    Tried all the tutorials mentioned on here but just can’t get the menu to sit centered on the page, getting it centred as a desktop version breaks the stacked version for mobiles and vice versa.

    Any help appreciated as it’s a great little menu!

    Thanks

    Will.

    Sep 15, 2014 at 12:56 pm
  • Reply »
    Mansi

    Mansi

    Thank you for posting this. Its easy to understand. I was able to implement this into my code but I am not able to make a small change to this. So hoping you could help me.
    On small screens, the menu is visible when the show-menu option is clicked, but how do I make the menu disappear after a list item has been clicked. How do we collapse it back ?

    Sep 15, 2014 at 5:34 pm
  • Reply »
    ezequiel

    ezequiel

    how to collapse it back once an element is clicked ?

    Sep 17, 2014 at 12:05 am
    • Reply »
      Aamir

      Aamir

      Just click again the same element that you clicked.

      Sep 17, 2014 at 1:33 am
      • Reply »
        Mansi

        Mansi

        That was not my question. Let me phrase it properly .....
        (On a mobile device) After I click a list item, my page scrolls down to the respective section. So ideally, I want the menu to collapse back in place after a list item is clicked. The user should not have to click the ‘show menu’ link after he clicks the list item link. The menu should collapse automatically.

        Sep 17, 2014 at 2:53 pm
  • Reply »
    Genius Amigos

    Genius Amigos

    Nice work! It’d be more nicer if it contained another break point for medium size screen such as tablets.  And I’d like to know if it can always show dropdown menu parts on the browsers like opera mini.

    Sep 18, 2014 at 3:12 am
  • Reply »
    Eskem Studio

    Eskem Studio

    /* Fix for Android */
    body {
      -webkit-animation: bugfix infinite 1s;
    }
    @-webkit-keyframes bugfix {
      from { padding: 0; }
      to { padding: 0; }
    }

    /* default checkbox */
    input[type=checkbox] {
      position: absolute;
      top: -9999px;
      left: -9999px;
    }

    label {
      cursor: pointer;
      user-select: none;
    }

    Sep 18, 2014 at 3:39 pm
  • Reply »
    Ezequiel

    Ezequiel

    I was more than happy !
    It was working on my galaxy s4 mini.

    But when i try on galaxy Y (young) and motorola flip it doesn’t work.
    This device have android 2.2.XX and small screen.

    The punctually is: the show menu green button is displayed but i can`t click on it and display the list.

    Tested with this site live demo.

    Could you give me a hand with this issue please ?

    Sep 21, 2014 at 2:17 pm
  • Reply »
    reza

    reza

    hi i need html and css cod for this nav bar pleas help tomarow i have exam :

    http://www.freeuploadsite.com/do.php?img=54186

    Sep 22, 2014 at 4:46 am
    • Reply »
      Bangash

      Bangash

      Reza,
      The easiest way is to download the whole page and extract the required html and css.

      Sep 22, 2014 at 4:50 am
    • Reply »
      Shahbaz Ahmed Bhatti

      Shahbaz Ahmed Bhatti

      Dear Reza,

      Share your email id with me, or you can download the example from here according to your requirement. it took a lot much my time to make like this
      http://bewefa.nl/projects/Bhatti/Dranken_11_09_2014/menu.html

      Take your mouse on Celeberty Choice Last 3rd menu and see the drop down menu


      any question please ask

      shahbazahmedbhattii ( at) gmail ( dot) com

      Sep 22, 2014 at 5:04 am
      • Reply »
        sunita

        sunita

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset=“UTF-8”>
        <title>CSS Only Navigation Menu</title>
        <meta name=“viewport” c initial-scale=1”>
        </head>

        <body>
        <style>
        #btn { display:none;}
        #n10 ul {list-style-type:none;margin:0;padding:0;position:absolute;}
        #n10 li{display:inline-block;float: left;margin-right: 1px; margin-bottom: 1px;}
        #n10 li a{display:block;min-width:100px;height: auto;text-align: center;line-height: 30px;font-family:tahoma;color: #fff;background: green;text-decoration: none; font-size:14px;}
        #n10 li a:hover{color: white;background-color: pink; transition:all 0.8s ease-out;}
        #n10 li ul {display:none;position:absolute;}
        #n10 li:hover ul {display:block;margin-top:1px; }
        #n10 li ul li {clear:both; display : block;}
        #n10 li ul li a {display:block;width:100%;height: auto;text-align: center; font-family:tahoma;color: #fff;background:#0cf;text-decoration: none; font-size:12px;}
        #n10 li ul li a:hover {color: white;background-color:pink; transition:all 0.8s ease-out; }

        @media screen and (max-width : 622px){
        #btn {padding:7px;text-align: center;background:gray; color:white; cursor:pointer; transition:all 0.8s ease-in;font-family: tahoma;font-size:14px; display:block;margin-bottom:1px;}
        #panel{display: none;}
        #n10 ul {list-style-type:none;margin:0;padding:0;position: static;}
        #n10 li{width:100%; float:left;}
        #n10 li a{display: block;color: white;text-align: center;line-height: 30px;text-decoration: none; heigt:auto; background-color: green;}
        #n10 li a:hover{color: white;background-color: pink; transition:all 0.8s ease-out;}

        #n10 li ul {display:none;position:relative;}
        #n10 li:hover ul {display:block;}
        #n10 li ul li {clear:both; display : block;}
        #n10 li ul li a {display:block;width:100%;height: auto;text-align: center; font-family:tahoma;color: #fff;background:#0cf;text-decoration: none; font-size:12px;}
        #n10 li ul li a:hover {color: white;background-color:pink; transition:all 0.8s ease-out; }
        }
        </style>
        [removed][removed]
        [removed]
        $(document).ready(function(){
          $(”#btn”).click(function(){
              $(”#panel”).slideToggle(“slow”);
          });
        });
        [removed]
        <div id=“btn”>MENU ≡</div>
        <div id=“panel”>
            <ul id=“n10”  outside none none; margin: 0px ! important; padding: 0px ! important;”>
              <li>Home</li>
              <li>
                About Us ↓
                  <ul>
                    <li>Who We Are</li>
                    <li>What We Do</li>
                  </ul> 
              </li>
              <li>
                Services ↓
                  <ul>
                    <li>Who We Are</li>
                    <li>What We Do</li>
                  </ul> 
              </li>
              <li>Gallery</li>
              <li>Career</li>
              <li>Contact us</li>
          </ul>
        </div>

        </body>
        </html>

        Jun 16, 2015 at 7:24 am

 1 2 3 > 

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all