[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;
}
Pencil drawing online course - Download here
Join 40,000+ readers and get free notes in your email

Trying this.
ReplyDelete[...] CSS Top Menu Navigation Tutorial [...]
ReplyDeleteNice post... so informative and helpfull,...support u..!!! Thanks..!
ReplyDeleteThanks @Bisnis
ReplyDeletehow do I set it up on blogger.. thanks
ReplyDeleteIt is very easy to add this in blogger. First add the css code above "]]>" in blogger template. Then place the HTML code wherever you want to place the menu. Reply ask your questions in case you are unable to apply it.
ReplyDelete