You are here:Home » Blogger Guide » Drop Down CSS Navigation for Websites

Drop Down CSS Navigation for Websites

When dealing with large quantities of content, the critical importance of navigation cannot be overestimated. Content that can’t be found can’t be read. If content can’t be found and read, this means that there’s a lot of cost but zero value and you can't get more traffic and you will get less response from your readers and visitors. Most important thing for blogger user and websites they need visitors and readers wanted to read new content every time, navigation will help them for the better experience of visiting.

Drop Down CSS Navigation

Navigation is the website’s “table of contents”. In traditional publication, you have page numbering to help you navigate. You can hold the publication in your hands and flick through it. If it’s a large publication, there is usually an index at the back that can be used. However, you can’t hold a website in your hands.

How to Add to Your Blog:

Step 1: Add CSS Code to Your Blog.

  • Go to Template.
  • Edit HTML.
  • Find ]]></b:skin> and copy below CSS code and paste above it.
#navigation {  float: right;  width: auto;  text-align: right;  margin: 40px 0 0 !important;  z-index: 999; }.nav-menu ul{  margin: 0;  padding: 0;  z-index: 999;  }.nav-menu ul li {  display: inline-block;  padding: 0px;  text-align: left;   background: #8B8B8B;}.nav-menu li a {  color: #222;  display: block;  padding: 6px 15px 5px;  position: relative;  text-decoration: none; background: #0399D4;  background: linear-gradient(top,  #EBEBEB,  #A1A1A1);  background: -ms-linear-gradient(top,  #EBEBEB,  #A1A1A1);  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1); }.nav-menu li a:hover, .nav-menu ul li li a:hover {  color: #D05353; }.nav-menu ul li ul {  box-shadow: 0 1px 3px #CCCCCC;  width: 180px;  margin: 0px;  position:absolute;  visibility:hidden;  display: inline;  padding:0px;  height:auto;  }.nav-menu ul li:hover ul {  visibility:visible;  }.nav-menu ul ul ul {  left: 180px;  position: absolute;  top: 0;  visibility:hidden !important;  }.nav-menu li li a {  background-color: #F5F5F5;  border-bottom: 1px solid #DDDDDD;  border-top: 1px solid #FFFFFF;  color: #222222;  font-size: 14px;  padding: 10px 15px;  position: relative;  text-align: left;   text-shadow: 1px 1px #FFFFFF; }.nav-menu ul ul li:hover ul {  visibility:visible !important;  }.nav-menu li li {  float:none !important;  display:block;  }

Step 2: Add HTML Code to Your Blog.

  • Go to Layout.
  • Click on Add Gadget [Below Header].
  • Go HTML/JavaScript.
  • Copy the HTML Code and Paste it.
<div class='nav-menu'>
            <ul class='sf-menu'>
  <li><a href=''>Home</a></li>
  <li><a href=''>Tutorials</a>
      <li><a href=''>Blogging Guide</a>
      <li><a href='#'>SEO</a></li>
<li><a href='#' id='dix'>Templates</a></li>
<li><a href='#'>Blogger Guide</a></li>
<li><a href='#'>Blogger Widget</a></li>
<li><a href='#'>Increase Traffic</a></li>
<li><a href='#'>Adsense</a></li>
<li><a href='#'>Money Making</a></li>
<li><a href='#'>Alexa Ranking</a></li>
      <li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>JavaScript</a></li>
<li><a href='#'>MySql</a></li>
<li><a href='#'>C</a></li>
<li><a href='#'>C++</a></li>
<li><a href='#'>MS-DOS</a></li>
<li><a href='#'>Notepad</a></li>
<li><a href='#'>Wordpad</a></li>
   <li><a href='#'>Mobile</a></li>
 <li><a href='#'>Networking</a></li>
 <li><a href='#'>Computer</a></li>
<li><a href='#'>Security</a></li>
<div class='clr'/>