Professional Simple DropDown Menus for Blogger/Websites

In this tutorial of web codes we will learn to create simple professional looking drop-down menus for our websites. The menus are Mashable Classic site top menus inspired. The menus look simple and beautiful for all kinds of websites and blogs. We will also include a submenu box with further links for some of the menu items. The menus displayed in Yellow+orange colors do not have sub menus, and the one with white has drop-down menus. Lets see the code-:


 If you want to add this in your blogger then yon open your template editor.and place the below code before ]]></b:skin>

nav#network,nav#local-sub{
    line-height:11px
}

nav#network ul,nav#local-sub ul{
    z-index:10000;
    list-style:none;
    margin:0;
    padding:0
}

nav#network ul a,nav#local-sub ul a{
    display:block;
    text-decoration:none
}

nav#network ul li,nav#local-sub ul li{
    display:inline-block;
    zoom:1;
    *display:inline;
    vertical-align:top
}

nav#network ul li .sub,nav#local-sub ul li .sub{
    display:none;
    position:absolute;
    z-index:99999;
    top:100%;
    left:0;
    box-shadow:rgba(0,0,0,0.3) 0 2px 3px;
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    -ms-border-bottom-left-radius:3px;
    -o-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    -ms-border-bottom-right-radius:3px;
    -o-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
    padding-bottom:8px
}

nav#network ul li .sub li,nav#local-sub ul li .sub li{
    display:block
}

nav#network ul li .sub li a,nav#local-sub ul li .sub li a{
    white-space:nowrap;
    display:block;
    padding:8px 20px 8px 12px
}

nav#network ul li.ch:hover .sub,nav#network ul li.visible .sub,nav#local-sub ul li.ch:hover .sub,nav#local-sub ul li.visible .sub{
    display:block
}

nav#network ul li.hr,nav#local-sub ul li.hr{
    padding:2px 12px
}

nav#network ul li.hr hr,nav#local-sub ul li.hr hr{
    border:0;
    border-top:1px solid #111;
    margin:0;
    padding:0;
    background-color:#3a3a3a
}

nav#network{
    background:#2a2a2a;
    padding:1px 0 0;
    font-size:11px;
    font-weight:bold;
    position:relative;
    -webkit-box-shadow:#333 0 0 2px;
    -moz-box-shadow:#333 0 0 2px;
    box-shadow:#333 0 0 2px
}

nav#network a{
    color:#fff !important
}

nav#network #quick-nav{
    margin-left:8px
}

nav#network #user-nav{
    position:absolute;
    right:8px;
    top:1px
}

nav#network #user-nav li ul{
    right:0!important;
    left:auto!important
}


nav#network ul a{
    display:block;
    padding:8px 17px 9px 12px;
    text-decoration:none;
    text-shadow:#1e1e1e 1px 1px;
    transition:background .1s ease;
    -moz-transition:background .1s ease;
    -webkit-transition:background .1s ease;
    -o-transition:background .1s ease
}

nav#network ul a.dd:after{
    content:&quot;&quot;;
    position:absolute;
    top:12px;
    right:4px;
    width:0;
    height:0;
    border-top:4px solid #7f7f7f;
    border-right:4px solid transparent;
    border-left:4px solid transparent
}

nav#network ul a.dd:hover:after{
    border-top-color:#fff !important
}

nav#network ul a.avatar{
    padding:2px 14px 0 4px
}

nav#network ul a.avatar figure img{
    height:25px;
    width:25px
}

nav#network ul a:hover{
    background:#4e4e4e;
    text-shadow:none
}

nav#network ul a.s span{
    display:inline-block;
    zoom:1;
    *display:inline;
    margin-left:4px;
    padding:3px 6px;
    text-shadow:none;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
    line-height:14px;
    font-size:11px;
    min-width:10px;
    text-align:center;
    background:#ee4a38;
    background-image:-webkit-gradient(linear,50% 0,50% 100%,color-stop(0%,#ee4a38),color-stop(100%,#cd3d1c));
    background-image:-webkit-linear-gradient(#ee4a38,#cd3d1c);
    background-image:-moz-linear-gradient(#ee4a38,#cd3d1c);
    background-image:-o-linear-gradient(#ee4a38,#cd3d1c);
    background-image:-ms-linear-gradient(#ee4a38,#cd3d1c);
    background-image:linear-gradient(#ee4a38,#cd3d1c);
    box-shadow:#000 1px 1px
}

nav#network ul a.c{
    height:28px;
    line-height:28px;
    padding:0 15px 0 12px
}

nav#network ul li{
    position:relative
}

nav#network ul li.o a{
    color:#f89100 !important
}

nav#network ul li.section{
    color:#aaa;
    font-weight:normal;
    padding:8px 15px 9px 8px
}

nav#network ul li ul{
    background:#2a2a2a
}

And the HTML part just below the <Body> tag or the your choose where you want to place.

<nav id='network'>
<ul id='quick-nav'>
<li class='ch '>
<a class='dd' href='#'>Top Stories</a>
<ul class='sub'>
<li><a href='#'>Photo  Video Galleries</a></li>
<li><a href='#'>Top Lists</a></li>
</ul>
</li>
<li class='ch '>
<a class='dd' href='#'>Trending Topics</a>
<ul class='sub'>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>YouTube</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>iPhone</a></li>
<li><a href='#'>Google</a></li>
<li><a href='#'>Video</a></li>
<li class='hr'><hr/></li>
<li><a href='#'>More Topics...</a></li>
</ul></li><li class='ch '><a class='dd' href='#'>People</a>
<ul class='sub'><li><a href='#'>Recommended</a></li>
<li><a href='#'>Mashable Staff</a></li>
<li class='hr'><hr/></li>
<li><a href='#'>More people...</a></li>
</ul></li>
<li class='o'><a class='s' href='#'>Jobs</a></li>
<li class='o'><a class='s' href='#'>Events</a></li>
</ul>
</nav>

Customize as per your awn menus structure respectively. 
and Save template (In case of Blogger).
thanks.