CSS Top Menu Navigation Tutorial

Top menu navigation plays an important role in overall look and feel of a website. Today i made a CSS top menu navigation which is purely made from CSS. I kept this minimal and clean so that space can be used for content and navigation means only for navigation and not for placing a header ad. A big header ad ruins readers' reading experiance and it adversly effects your sales numbers. I have used royal blue color, you may change the color as required. I have also used Sprites to make it load faster, also gave image hover effects. You may also place search box widget in this navigation bar in the empty space at right, but in case you have lot of pages to be linked on menu then there would be no space left for top menu. In case yo feel any problem in using this navigation menu in any platform, then comment below, i will solve your problems asap. The  below demo is from my own blogger blog.

[button-red url="http://www.thegoodblogger.com/" target="_self" position="left"] Demo [/button-red]

[button link="http://raman.googlecode.com/files/source_files.zip" target="_blank" color="default" shape="rounded" size="small" align="left"]Source files[/button]

Give a look to my prevoius tutorials on same same subject :-

• CSS3 Dropdown Menu Tutorial


• Subscribe by Email Widget for WordPress and Blogger


• Design Rapid Free Blogger Template

 

Html

<header id='header-wrapper'>
<div id='topLimiter'>
<div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
</div>
</div></div>
<a href='http://www.your_link/' id='logo'><img alt='Blogging tips' height='96' src='http://raman.googlecode.com/files/thegoodblogger.png' title='Back to Home CSS Design' width='294'/></a>
<ul id='navigation'>
<li><div><a class='level0' href='http://www.your_link/'>Blogging</a>
<ul class='level1'>
<li><div><a class='level1' href='http://www.your_link/'>Blogging Tips</a></div></li>
<li><div><a class='level1' href=''>SEO</a></div></li>
<li><div><a class='level1' href='http://www.your_link'>Internet Marketing</a></div></li>
<li><div><a class='level1' href='http://www.your_link'>Tutorials</a></div></li>
</ul>
<span class='topMenuIcon'/></div></li>
<li><div><a class='level0' href=''>Make Money</a>
<ul class='level1'><li><div><a class='level1' href='http://www.your_link/'>PPC</a></div></li>
<li><div><a class='level1' href='http://www.your_link/'>Affiliate</a></div></li>
<li><div><a class='level1' href='http://www.your_link/'>Social Media</a></div></li>
<li><div><a class='level1' href='http://www.your_link/'>Misc</a></div></li>
</ul>
<span class='topMenuIcon'/></div></li>
<li><div><a class='level0' href='http://www.your_link/'>Downloads</a>
<ul class='level1'>
<li><div><a class='level1' href='http://www.templategrid.com'>Blogger Templates</a></div></li>
</ul>
<span class='topMenuIcon'/></div></li>
<li><div><a class='level0' href='http://www.your_link/'>About Me</a>
<ul class='level1'>
<li data-alt='Find us on Google+'><div><a class='level1' href='https://plus.google.com/109783772548428705949' rel='nofollow'>Google+</a></div></li>
<li><div><a class='level1' href='http://www.facebook.com/designrapid' rel='nofollow'>Facebook</a></div></li>
<li><div><a class='level1' href='https://twitter.com/raman2572' rel='nofollow'>Twitter</a></div></li>
<li><div><a class='level1' href='http://www.your_link/p/about-us.html'>More About</a></div></li>
<li><div><a class='level1' href='http://www.your_link/p/write-for-us.html'>Write Here</a></div></li>
<li><div><a class='level1' href='http://www.your_link/p/contact-us.html'>Contact Us</a></div></li></ul>

<span class='topMenuIcon'/></div></li>
</ul></header>

[showmyads]

CSS

 

#navigation div:hover ul.level1,
#navigation div ul li {
  display:block;
}
#header-wrapper {
  background-color:#022F42;
  postion:absolute;
  top:0;
  left:0;
  width:100%;
  height:68px;
  border-bottom:1px solid #FFF;
  z-index:1000;
}
#topLimiter {
  max-width:1024px;
  position:relative;
  height:70px;
  margin:0 auto;
}
#logo img {
  position:absolute;
  top:-8px;
  left:0;
}
#logo {
  z-index:1;
  color:transparent;
  display:block;
  font:0/0 arial;
  height:83px;
  left:0;
  overflow:hidden;
  position:absolute;
  text-shadow:none;
  top:0;
  width:290px;
}
#navigation {
  left:320px;
  position:absolute;
  z-index:1000;
  font-family:'Arial','nunito',Tahoma,Arial,sans-serif;
padding-top:16px;
}
#navigation div span {
position: absolute;
right: 10px;
top: 50%;
width: 14px;
height: 14px;
background-position: -200px -101px;
margin-top: -7px;
}
.read-logo, .css-tutorial a, #sidebarSubscribe .icon, #navigation div span {
background-image: url(http://raman.googlecode.com/files/css_sprite.png);
background-repeat: no-repeat;
}
#navigation li {
  list-style:none;
  display:inline;
}
#navigation ul {
  display:none;
  position:absolute;
  top:30px;
  left:0;
}
#navigation div div:hover>ul {
  display:block;
  left:120px;
  top:0;
  background-color:#14303a;
  z-index:10000;
}
#navigation div div ul div {
  border-bottom-color:#11252c;
  border-top-color:#1b3c48;
}
#navigation div {
  float:left;
  position:relative;
}
#navigation div div {
  float:none;
  border-top:1px solid #183540;
  border-bottom:1px solid #081418;
}
#navigation div li:first-child>div {
  border-top:none;
}
#navigation div li:last-child>div {
  border-bottom:none;
}
#navigation a {
  text-decoration:none;
  border:1px solid transparent;
  font-size:15px;
  display:block;
  font-weight:700;
  color:#FFF;
  text-shadow:1px 1px 0 #333;
  padding:4px 30px 4px 11px;
}
#navigation div ul {
  background-color:#102831;
  width:155px;
  border:1px solid #0d2129;
  border-top:none;
  z-index:1000;
  padding:10px;
}
#navigation div li a {
  font-size:12px;
  font-weight:400;
}
#navigation div li div:hover>a {
  background:#183641;
  border:1px solid #1d3e4b;
}
#navigation div span {
  position:absolute;
  right:10px;
  top:50%;
  width:14px;
  height:14px;
  background-position:-200px -101px;
  margin-top:-7px;
}
#navigation a.active,
#navigation div:hover a.level0,
#navigation a:hover {
  background-color:#102831;
  text-shadow:1px 1px 0 #000;
  border:1px solid #0d2129;
}
#navigation div:hover .topMenuIcon {
  background-position:-200px -81px;
}
#searchForm {
  height:31px;
  position:absolute;
  right:0;
  top:18px;
  width:245px;
}
#outer-wrapper {
  overflow:hidden;
  text-align:left;
  font:13px Lora,Oxygen,Helvetica,trebuchet MS,sans-serif;
  margin:0 auto;
  padding:0;
}
#content-wrapper {
  width:1024px;
  position:relative;
  margin:0 auto;
}
#main-wrapper {
  width:670px;
  float:left;
  word-wrap:break-word;
  padding:0;
}
#sidebar-wrapper,
#sidebar-r {
  padding-top:6px;
  float:right;
  max-width:325px;
  overflow:hidden;
  text-align:left;
  height:100%;
  word-wrap:break-word;
}
#sidebar-wrapper h3 {
  letter-spacing:0;
  font:16px Oswald,helvetica,
arial,serif;
  color:#000;
  margin:0;
  padding:5px 10px;
}
#sidebar-wrapper .widget-content {
  margin:0;
  padding:.3em;
}

#search {
    float: right;
    height: 27px;
    width: 310px;
    margin: 3px 0 0 !important;
    padding: 0 !important;
}
* html #search {
    margin-right: 8px;
}
#search input {
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
    float: left;
    font-size: 11px;
    width: 223px;
    margin: 1px 0 0;
    padding: 3px 4px 4px;
}
#search .btn {
    padding: 0;
    height: 22px;
    width: 69px;
    margin: 1px 0 0 5px !important;
    border: none;
}
#header {
    height: 100px;
    margin: 0 0px;
    padding: 0;
    background: #484848;
}
#headerlogo {
    float: left;
    display: inline;
    line-height: 100px;
    font-size: 24px;
    width: 280px;
    height: 100px;
    overflow: hidden;
}
#header h1 {
    float: left;
    display: inline;
    line-height: 100px;
    font-size: 24px;
}
#header h1 a {
    display: block;
    height: 93px;
    width: 280px;
    color: #000;
    font-size: 28px;
}