ThemeKings Blog

CSS Horizontal Dropdown Navigation Menu

Posted by:

CSS Navigation Menu

CSS Navigation Menu

 I thought it would be nice to share a basic CSS navigation menu with our community. This works and looks very well in many browsers and very easy to setup, even for someone who has very little experience with CSS navigation menus.

See Horizontal CSS Menu Demo

 This is a pure CSS horizontal navigation menu that allows up to 3 dropdown sub-menus. Experienced CSS users will be able to quickly adjust the associated CSS navigation file to embed it within their own theme, as all aspects of the design can be easily adjusted.

 Here is the CSS used to design this menu (Download CSS File Here):

/* Some stylesheet reset */
.nav, .nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
}

/* The main container */
.nav {
	/* Layout and positioning */
	display: block;
	position: relative;
	height: 34px;
	width: 750px; /* CHANGE this if you want another width or remove it if you want the width of the container */
	border-radius: 3px;
	border: 1px solid #c1c1c1;

	/* Background and effects */
	background: #eaeaea; /* Background for IE9 and older browsers */
	background: -webkit-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Chrome & Safari */
	background: -moz-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Firefox */
	background: -o-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Opera */
	background: -ms-linear-gradient(bottom, #e1e1e1, #f4f4f4); /* Background for Internet Explorer 10 */
	box-shadow: inset 0 1px 0 #fff;
}

.nav>li {
	display: block;
	position: relative;
	float: left;
	margin: 0;
	padding: 0 1px 0 0;
}

/* The main navigation links */
.nav>li>a {
	/* Layout */
	display: block;
	padding: 11px 20px;

	/* Typography */
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: normal;
	text-decoration: none;
	color: #9a9a9a;
	text-shadow: 0 1px 0 #fff;

	/* Effects */
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-ms-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
}

/* The hover state of the navigation links */
.nav>li>a:hover, .nav>li:hover>a {
	background: #fff;
	background: rgba(255, 255, 255, .6);
	color: #999;
}

.nav>li:first-child>a {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.nav>.dropdown>a {
	padding-right: 26px;
}

/* The arrow indicating a dropdown menu */
.nav>.dropdown>a::after {
	 content: "";
	 position: absolute;
	 top: 14px;
	 right: 11px;
	 width: 4px;
	 height: 4px;
	 border-bottom: 1px solid #9a9a9a;
	 border-right: 1px solid #9a9a9a;
	 -webkit-transform: rotate(45deg);
	 -ms-transform: rotate(45deg);
	 -moz-transform: rotate(45deg);
	 -o-transform: rotate(45deg);
	}

/* Changing the color of the arrow on hover */
.nav>.dropdown>a:hover::after, .nav>.dropdown:hover>a::after {
	border-color: #999;
}

.nav ul {
	position: relative;
	position: absolute;
	left: -9999px;
	display: block;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

/* Level 1 submenus */
.nav>li>ul {
	padding-top: 0px;
	z-index: 99;
	border-top: 1px solid #c9c9c9;
	top: 34px;
}

/* Making the level 1 submenu to appear on hover */
.nav>li:hover>ul {
	left: -1px;
}

/* Level 2+ submenus */
.nav ul ul {
	left: -9999px;
	top: 0px;
	z-index: 999;
}

/* Making the level 2+ submenu to appear on hover */
.nav ul>li:hover>ul {
	left: 120px;
	top: -1px;
}

/* The submenu link containers */
.nav ul li {
	position: relative;
	display: block;
	border-left: 1px solid #c1c1c1;
	border-right: 1px solid #c1c1c1;

	/* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */
	height: 0px;
	-webkit-transition: height .3s;
	-moz-transition: height .3s;
	-o-transition: height .3s;
	-ms-transition: height .3s;
}

/* Expanding the list elements which contain the links */
.nav li:hover>ul>li {
	height: 25px;
}

.nav ul li:hover>ul>li:first-child {
	height: 26px;
}

/* The links of the submenus */
.nav ul li a {
	/* Layout */
	display: block;
	width: 90px;
	padding: 6px 10px 6px 20px;
	border-bottom: 1px solid #e1e1e1;

	/* Typography */
	font-size: 12px;
	color: #a6a6a6;
	font-family: Helvetica, Arial, sans-serif;
	text-decoration: none;
	
	/* Background & effects */
	background: #fff;
	-webkit-transition: background .3s;
	-moz-transition: background .3s;
	-ms-transition: background .3s;
	-o-transition: background .3s;
	transition: background .3s;
}

/* The hover state of the links */
.nav ul li>a:hover, .nav ul li:hover>a {
	background: #e9e9e9;
	color: #a1a1a1;
}

.nav ul ul>li:first-child>a {
	border-top: 1px solid #c1c1c1;
}

.nav ul>li:last-child>a {
	border-bottom: 1px solid #c1c1c1;
}


/* The arrow indicating a level 2+ submenu */
.nav ul>.dropdown>a::after {
	content: "";
	 position: absolute;
	 top: 10px;
	 right: 8px;
	 width: 4px;
	 height: 4px;
	 border-bottom: 1px solid #a6a6a6;
	 border-right: 1px solid #a6a6a6;
	 -webkit-transform: rotate(-45deg);
	 -ms-transform: rotate(-45deg);
	 -moz-transform: rotate(-45deg);
	 -o-transform: rotate(-45deg);
}

.nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after {
	border-color: #a1a1a1;
}
 
 And here is the HTML code placed obviously within the body tags:

<ul class="nav">
	<li><a href="#">Home</a></li>
	<li class="dropdown"><a href="#">Link 2</a>
	<ul>
		<li><a href="#">Level 1</a></li>
		<li><a href="#">Level 1</a></li>
		<li class="dropdown"><a href="#">Level 1</a>
		<ul>
			<li><a href="#">Level 2</a></li>
			<li><a href="#">Level 2</a></li>
			<li><a href="#">Level 2</a></li>
			<li class="dropdown"><a href="#">Level 2</a>
			<ul>
				<li><a href="#">Level 3</a></li>
				<li><a href="#">Level 3</a></li>
				<li><a href="#">Level 3</a></li>
				<li><a href="#">Level 3</a></li>
				<li><a href="#">Level 3</a></li>
			</ul>
			</li>
			<li><a href="#">Level 2</a></li>
		</ul>
		</li>
		<li><a href="#">Level 1</a></li>
		<li><a href="#">Level 1</a></li>
	</ul>
	</li>
	<li><a href="#">Link 2</a></li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
	<li><a href="#">Link 5</a></li>
</ul>

 And that’s it! Simple to use, and works on every browser. IE8 unfortunately does not render the drop down arrows (BLAH!) but every other browser looks and works just fine. If you have any comments about the use or revisions on this menu please post a comment below. Thanks again!

See This CSS Menu In One Of My Latest Projects

 
 
10
  Related Posts
  • No related posts found.

Comments

  1. Bob  August 4, 2013

    Todd, sorry for the late response I was on vacation.

    • Todd  August 5, 2013

      OK, I see what you’ve done 🙂

      You close the li to soon for “B” and “D” 2nd level menu.

      here is what it should look like. (B Menu Section Example)

      <li class="dropdown"><a href="#" rel="nofollow">Form B</a>
          <ul>
              <li><a href="#" rel="nofollow">Group B1</a></li>
      
              <li class="dropdown"><a href="#" rel="nofollow">Group B2</a>
                  <ul>
                      <li><a href="#" rel="nofollow">B2 List 1</a></li>
                      <li><a href="#" rel="nofollow">B2 List 2</a></li>
                  </ul>
              </li>
      
              <li><a href="#" rel="nofollow">Group B3</a></li>
              <li><a href="#" rel="nofollow">Group B4</a></li>
              <li><a href="#" rel="nofollow">Group B5</a></li>
              <li><a href="#" rel="nofollow">Group B6</a></li>
              <li><a href="#" rel="nofollow">Group B7</a></li>
          </ul>
      </li>
      
      

      You’ll see that I’ve keep that entire 2nd level sub menu contained within the “B2” li area. (I separated that area I’m talking about with white spaces)

      See what I mean?

  2. Bob  July 19, 2013

    Todd, I did the same thing David did to make this work including the link to the css location. However, on my page the level 2 dropdown will not appear. Level 1 works just fine and the arrow appears indicating a level 2 list but the list does not shows up. What should I be looking for?
    Thanks
    Bob

  3. DavidP  June 8, 2013

    Pleased disregard last enquiry, have sorted it.
    You also need to add a few lines to the header of the page:-

    Works nice
    Thanks
    David

    • Todd  June 18, 2013

      Good… I never mentioned about linking to the CSS file as I should have. Nice work. 🙂

  4. DavidP  June 5, 2013

    Hi ThemeKings,
    firstly so sorry to be a pain, but I would dearly love to get your CSS Horizontal Dropdown Navigation Menu working and I am struggling.
    I have downloaded the CSS file, copied and pasted it into notepad and saved it as nav.css and then placed that new file in the same folder as my test.html file, then uploaded it.
    I then copied the HTML code and placed it within the body tags of my test.html page.
    I see the page displayed as shown below with bullet marks and not as shown in your demo.
    I am not used to working with CSS and am obviously doing something very stupid, please can you advide me.
    David
    ——– Displayed result (but with bullet marks included)——–
    Home
    Link 2
    Level 1
    Level 1
    Level 1
    Level 2
    Level 2
    Level 2
    Level 2
    Level 3
    Level 3
    Level 3
    Level 3
    Level 3
    Level 2
    Level 1
    Level 1
    Link 2
    Link 3
    Link 4
    Link 5

    • Todd  June 7, 2013

      You have a link I can look at? I’m thinking you have not linked to the CSS file because the URLS are not structured correctly as shown above.

      Add this line of code within HEAD section of your HTML file:

      <link href="nav.css" rel="stylesheet" type="text/css" />
      

      Within the href statement above between the quotes add the direct path to your nav.css file.

      It should work from there.

      Sorry took so long to reply. Let me know if that worked.

You must be logged in to post a comment.