Dropdown Menu using CSS3 - Part2

Dropdown Menu using CSS3 - Part2

meNight Fury
2:25 PM
0 comments
It is really important and essential to give an abstract view of your blog to your blog reader. This not only increases your blog traffic but also show your sophistication level to your reader. To give an abstract view of your blog to reader, you have to implement various blog widget among which dropdown menu is an essential one. I have written quite a few posts about this dropdown menu using CSS and jQuery (and obviously HTML).
Only CSS (and HTML) code of various dropdown menus are discussed in this post. To know how to implement these codes in blogger, you have to read my previous post, Dropdown Menu using CSS3 - Part1.
This menu is compatible with most of modern and classic browsers (undoubtedly supported in latest version of all major browsers) .
Before you make any changes in your blogger template, it is recommended to backup your blog in case something goes wrong.
1. Copy both CSS and HTML code within the same 'HTML/Javascript' widget.
2. Don't forget to replace '#' in html anchor link with your original anchor link.
Let's move on.
❝ Style 1 ❞
    Codes
  1. CSS

    2. <style type="text/css">
    .menu {
    margin: 0; padding: 0;
    font: normal normal 16px Droid Serif;
    float: left; clear: both;
    white-space: nowrap; width: 100%;
    }
    .menu ul { list-style: none; margin: 0; padding: 0; border: 0; background: #343434; }
    .menu li { list-style: none; }

    /*--- Main Menu style ----------------------*/
    .menu ul#navig {
    float: left; clear: both; display: block;
    border-bottom: 2px solid #b7b7b7;
    width: 100%; overflow: visible;
    }
    .menu li.hori {
    padding: 0.4em 1.5em 0.7em;
    float: left; position: relative;
    border-top: 0.3em solid transparent;
    }
    .menu li.hori:hover { border-top: 0.3em solid #b7b7b7; }

    /*--- Submenu Style -------------------------*/
    .menu ul.sub {
    display: none; z-index: 9998;
    position: absolute; left: 0; top: 100%;
    }
    .menu li.hori:hover ul.sub { display: block; }
    .menu li.hori li {
    display: block; float: none; z-index: 9999;
    padding: 0.8em 5em 0.8em 0.8em;
    border-left: 0.3em solid transparent;
    }
    .menu li.hori li:hover { border-left: 0.3em solid #b7b7b7;}

    .menu a { color: #eee; display: block; text-decoration: none; line-height: 1em; }
    .menu li.hori>a { text-align: center; }
    .menu ul.sub a { font-size: 0.75em; text-align: left; }
    .menu li:hover>a, .menu1 ul.sub li:hover a { color: #ff0; text-decoration: none; }
    </style>
  2. HTML

    3. <div class="menu">
      <ul id="navig">
        <li class="hori"><a href="#" >Home</a></li>  <!-- Main Menu -->
        <li class="hori"><a href="#" >Softwares</a>  <!-- Main Menu -->
          <ul class="sub">
            <li><a href="#">Windows</a></li>  <!-- Sub Menu -->
            <li><a href="#">Linux</a></li>
          </ul>
        </li>
        <li class="hori"><a href="#" >Contacts</a></li>
      </ul>
    </div>
❝ Style 2 ❞
    Codes
  1. CSS

    2. <style type="text/css">
    .menu {
    margin: 0; padding: 0;
    font: normal normal 16px Droid Serif;
    float: left; clear: both;
    white-space: nowrap; width: 100%;
    }
    .menu ul {
    list-style: none; overflow: visible;
    margin: 0; padding: 0; border: 0;
    background-color: #111;
    background-image: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background-image: -webkit-linear-gradient(#444, #111);
    background-image: -o-linear-gradient(#444, #111);
    background-image: -ms-linear-gradient(#444, #111);
    background-image: linear-gradient(#444, #111);
    }
    .menu li { list-style: none; }

    /*--- Main Menu style--------------------------*/
    .menu ul#navig {
    width: 100%; overflow: visible;
    padding: 0.5em 0.2em;
    float: left; clear: both; display: block;
    border: 1px solid #232323;

    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;

    -webkit-box-shadow: 0 1px 1px #777;
    -moz-box-shadow: 0 1px 1px #777;
    -ms-box-shadow: 0 1px 1px #777;
    box-shadow: 0 1px 1px #777;
    }
    .menu li.hori {
    margin: 0 10px; padding: 0.5em 1em;
    float: left; position: relative; 
    border-right: 1px solid #222;

    -moz-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    -ms-box-shadow: 0 1px 1px #777;
    box-shadow: 1px 0 0 #444;
    }
    .menu li.hori:last-child {
    border-right: 0;

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none;
    }

    /*----Submenu Style---------------------------*/
    .menu ul.sub {
    position: absolute;
    z-index: 9999; opacity: 0; visibility: hidden;

    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    -webkit-box-shadow: 0 -1px 0 rgba(255, 255, 255,.3);
    -ms-box-shadow: 0 -1px rgba(255,255,255,.3);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;

    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    }
    .menu ul.sub li {
    display: block; float: none; z-index: 9999;
    margin: 0; padding: 18px 25px 18px 15px;

    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -ms-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }
    .menu ul.sub li:first-child { border-radius: 3px 3px 0 0; position: relative; }
    .menu2 ul.sub li:last-child {
    border-radius: 0 0 3px 3px;

    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    .menu2 ul.sub li:hover {
    background-color: #2580a2;
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#004e6c), to(#00b1f4));
    background-image: -webkit-linear-gradient(bottom, #004e6c, #00b1f4);
    background-image: -moz-linear-gradient(bottom, #004e6c, #00b1f4);
    background-image: -ms-linear-gradient(bottom, #004e6c, #00b1f4);
    background-image: -o-linear-gradient(bottom, #004e6c, #00b1f4);
    }

    /*---First submenu ------------------------*/
    .menu ul.one { left: 0; top: 160%; }
    .menu li.hori:hover ul.one { opacity: 1; visibility: visible; top: 100%; overflow: visible; }
    .menu ul.one>li:first-child:before {
    content: "";
    height: 0; width: 0;
    position: absolute; left: 20%; top: -6px;

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    }
    .menu ul.one>li:first-child:hover:before { border-bottom: 6px solid #00b1f4; }

    /*---Second Submenu ------------------------*/
    .menu ul.two { left: 130%; bottom: -20px; }
    .menu ul.one>li:hover ul.two { opacity: 1; visibility: visible; left: 95%; overflow: visible; }
    .menu ul.two li:first-child:before {
    content: "";
    height: 0; width: 0;
    position: absolute; left: -6px; top: 12px;

    border-right: 6px solid #444;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    }
    .menu ul.two li:first-child:hover:before { border-right: 6px solid #0092b9; }

    /*---Anchor or Link--------------------------*/
    .menu a { color: #888; display: block; text-decoration: none; line-height: 1em; }
    .menu li.hori>a { text-align: center; text-transform: uppercase; }
    .menu ul.sub a { font-size: 0.9em; font-style: normal; }
    .menu li:hover a { text-decoration: none; }
    .menu ul li.hori:hover>a, .menu ul.one>li:hover>a,  .menu ul.two li:hover a { color: #fff; text-decoration: none; }
    </style>
  2. HTML

    3. <div class="menu">
      <ul id="navig">
        <li class="hori"><a href="#">Home</a></li>  <!-- Main Menu -->
        <li class="hori"><a href="#">Music</a>  <!-- Main Menu -->
          <ul class="sub one">
            <li><a href="#">English</a></li>  <!-- First Sub Menu -->
            <li><a href="#">Hindi</a>
              <ul class="sub two">
                <li><a href="#">Album</a></li>  <!-- Second Sub Menu -->
                <li><a href="#">Movie</a></li>  <!-- Second Sub Menu -->
              </ul>
            </li>
            <li><a href="#">Bengali</a></li>  <!-- First Sub Menu -->
          </ul>
        </li>
        <li class="hori"><a href="#">Contacts</a></li>  <!-- Main Menu -->
      </ul>
    </div>
❝ Style 3 ❞
    Codes
  1. CSS

    2. <style type="text/css">
    .menu {
    width: 100%; white-space: nowrap;
    margin: 0; padding: 0;
    font: normal normal 16px Droid Serif;
    float: left; clear: both;
    }
    .menu ul {
    list-style: none;
    margin: 0; padding: 0; border: 0;
    background: #343434;
    }
    .menu li { list-style: none; }
    .menu a {
    color: #888; text-decoration: none; line-height: 1em;
    display: block;
    }
    /*---- Main Menu style----------------------------*/
    .menu ul#navig {
    float: left; clear: both; display: block;
    width: 100%; overflow: visible;
    }
    .menu li.hori {
    padding: 0;
    float: left; position: relative;
    }
    .menu li.hori>a {
    text-align: center;
    padding: 0.7em 1.2em;
    }
    .menu li.hori:hover>a, .menu ul.sub li:hover a {
    color: #fff; text-decoration: none;
    background: #2580a2;
    }
    /*----Submenu Style---------------------------*/
    .menu ul.sub {
    display: none; z-index: 9998;
    position: absolute; left: 0; top: 100%;
    }
    .menu li.hori:hover ul.sub { display: block; }
    .menu li.hori li {
    display: block; float: none; z-index: 9999;
    }
    .menu ul.sub a {
    font-size: 0.85em; text-align: left; 
    padding: 0.8em 2em 0.8em 1em;
    }
    </style>
  2. HTML

    3. <div class="menu">
      <ul id="navig">
        <li class="hori"><a href="#">Home</a></li>  <!-- Main Menu -->
        <li class="hori"><a href="#">Products</a>  <!-- Main Menu -->
          <ul class="sub">
            <li><a href="#">Drop Down CSS Menus</a></li>  <!-- Sub Menu -->
            <li><a href="#">Horizontal CSS Menus</a></li>  <!-- Sub Menu -->
          </ul>
        </li>
        <li class="hori"><a href="#">Contacts</a>  <!-- Main Menu -->
      </ul>
    </div>
❝ Style 4 ❞
    Codes
  1. CSS

    2. <style type="text/css">
    .menu {
    margin: 0; padding: 0;
    font: bold normal 16px Droid Serif;
    float: left; clear: both;
    white-space: nowrap; width: 100%;
    }
    .menu ul { list-style: none; margin: 0; padding: 0; border: 0; }
    .menu li { list-style: none; }

    /*---- Main Menu style-------------------------------*/
    .menu ul#navig {
    margin: 0; padding: 0.5em 0.2em; float: left; clear: both; display: block;
    overflow: visible; width: 100%;

    background-color: #888;
    background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, from(#fff4bb), to(#e4cb69));
    background-image: -webkit-linear-gradient(left, #fff4bb, #e4cb69);
    background-image: -moz-linear-gradient(left, #fff4bb, #e4cb69);
    background-image: -ms-linear-gradient(left, #fff4bb, #e4cb69);
    background-image: -o-linear-gradient(left, #fff4bb, #e4cb69);

    -webkit-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
    -ms-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
    -o-box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
    box-shadow: 1px 1px 3px rgba(10, 10, 10, 0.6);
    }
    .menu li.horizon { margin: 0 10px; padding: 0.8em 1em; float: left; position: relative; }
    .menu li.horizon:hover {
    background: #f0f0f0;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 1px 0 1px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 1px 0 3px rgba(10, 10, 10, 0.6);
    -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -o-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    box-shadow: 1px 0 1px rgba(10, 10, 10, 0.6);
    }
    .menu li.horizon a { color: #1213f0; display: block; text-decoration: none; line-height: 1em; }
    .menu li.horizon>a { text-align: center; }
    .menu li.horizon:hover>a { color: #222; text-decoration: none; }

    /*---Submenu style --------------------------------------*/
    .menu ul.sub {
    display: none; z-index: 9998;
    height: auto; width: 16em;  padding: 0.6em; background: #f0f0f0;
    position: absolute; left: 0; top: 80%;

    -webkit-border-radius: 0 0.5em 0.5em 0.5em;
    -moz-border-radius: 0 0.5em 0.5em 0.5em;
    -ms-border-radius: 0 0.5em 0.5em 0.5em;
    border-radius: 0 0.5em 0.5em 0.5em;

    -webkit-box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -o-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.6);
    }
    .menu li.horizon:hover ul.sub { display: block; }
    .menu li.horizon li { 
    display: block; float: none; z-index: 9999;
    margin: 0px; padding: 0.5em 0; background: #fff0b0;
    border-top: 1px solid #ececec; border-bottom: 1px solid #bfbfbf;
    }
    .menu li.horizon li:first-child { border-radius: 0.5em 0.5em 0 0; border-top: 0; }
    .menu li.horizon li:last-child { border-radius: 0 0 0.5em 0.5em; border-bottom: 0; }

    .menu ul.sub a {
    display: block;
    font-size: 0.9em; font-style: normal; line-height: 0.9em; color: #33a;
    padding: 1em 1.5em; margin: 0;
    position: relative;

    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -ms-border-radius: 6px;
    border-radius: 6px;

    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .1s ease-in-out;
    }
    .menu ul.sub li:hover a {
    line-height: 1.1em; font-size: 1.1em; color: #222; text-decoration: none; letter-spacing: 0.1em;
    padding: 0.6em 0.9em;
    }
    </style>
  2. HTML

    3. <div class="menu">
      <ul id="navig">
        <li class="horizon"><a href="#" >Home</a></li>
        <li class="horizon"><a href="#" >Explore</a>
          <ul class="sub">
            <li><a href="#">Academic Support</a></li>
            <li><a href="#">The Great Show</a></li>
          </ul>
        </li>
        <li class="horizon"><a href="#">Contact</a></li>
      </ul>
    </div>
❝ Style 5 ❞
    Codes
  1. CSS
    2. <style type="text/css">
    .menu {
    margin: 0; padding: 0;
    font: normal normal 16px Droid Sans;
    float: left; clear: both;
    white-space: nowrap; width: 100%;
    }
    .menu ul { list-style: none; margin: 0; padding: 0; border: 0; }
    .menu li { list-style: none; }

    /*---- Main Menu style-------------------------------*/
    .menu ul#navig {
    padding: 0 0.2em;
    width: 100%; overflow: visible;
    float: left; clear: both; display: block;
    border: 1px solid #555;
    text-shadow: 0 1px 0px #000;

    background-color: #888;
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#656565), to(#b2b2b2));
    background-image: -webkit-linear-gradient(bottom, #656565, #b2b2b2);
    background-image: -moz-linear-gradient(bottom, #656565, #b2b2b2);
    background-image: -ms-linear-gradient(bottom, #656565, #b2b2b2);
    background-image: -o-linear-gradient(bottom, #656565, #b2b2b2);

    -moz-border-radius: 1.5em;
    -webkit-border-radius: 1.5em;
    -ms-border-radius: 1.5em;
    border-radius: 1.5em;

    -webkit-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    }
    .menu li.first { margin: 0 10px; padding: 0.5em 1em; float: left; position: relative; }
    .menu li.first a { color: #eee; display: block; text-align: center; text-decoration: none; line-height: 1em; }
    .menu li.first>a { padding: 0.5em 1em;}
    .menu ul li.first:hover>a { color: #222; text-decoration: none; text-shadow: 0 1px 0 #f2f2f2; 
    background-color: #cdcdcd;
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#a4a4a4), to(#f8f8f8));
    background-image: -webkit-linear-gradient(bottom, #a4a4a4, #f8f8f8);
    background-image: -moz-linear-gradient(bottom, #656565, #b2b2b2);
    background-image: -ms-linear-gradient(bottom, #656565, #b2b2b2);
    background-image: -o-linear-gradient(bottom, #656565, #b2b2b2);

    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    border-radius: 2em;

    -webkit-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -ms-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    -o-box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    box-shadow: 0 1px 3px rgba(10, 10, 10, 0.6);
    }

    /*----Submenu Style---------------------------*/
    .menu ul.sub {
    display: none; position: absolute; z-index: 9998;
    height: auto; width: 16em;

    background-color: #dedede;
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#cfcfcf), to(#fefefe));
    background-image: -webkit-linear-gradient(bottom, #cfcfcf, #fefefe);
    background-image: -moz-linear-gradient(bottom, #cfcfcf, #fefefe);
    background-image: -ms-linear-gradient(bottom, #cfcfcf, #fefefe);
    background-image: -o-linear-gradient(bottom, #cfcfcf, #fefefe);

    -webkit-border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -ms-border-radius: 0.8em;
    border-radius: 0.8em;

    -webkit-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
    -moz-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
    -ms-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
    -o-box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
    box-shadow: 0 2px 6px rgba(10, 10, 10, 0.6);
    }
    .menu ul.one { left: -20px; top: 100%; }
    .menu li.first:hover ul.one { display: block; overflow: visible; }
    .menu li.first li { display: block; float: none; margin: 0px; padding: 8px 0; z-index: 9999; }
    .menu li.first li:first-child { border-radius: 0.8em 0.8em 0 0; }
    .menu li.first li:last-child { border-radius: 0 0 0.8em 0.8em; }
    .menu ul.one a { display: block; font-size: 13px; font-style: normal; color: #333; }
    .menu li.first li:hover {
    background-color: #2580a2;
    background-image: -webkit-gradient(linear, 0% 100%, 0% 0%, from(#0186ba), to(#04acec));
    background-image: -webkit-linear-gradient(bottom, #0186ba, #04acec);
    background-image: -moz-linear-gradient(bottom, #0186ba, #04acec);
    background-image: -ms-linear-gradient(bottom, #0186ba, #04acec);
    background-image: -o-linear-gradient(bottom, #0186ba, #04acec);
    }
    .menu li.second:hover>a { color: #fff; text-decoration: none; }

    .menu ul.two { left: 100%; top: 30%; }
    .menu li.second:hover ul.two { display: block;  overflow: visible; }
    .menu li.second li:hover a { color: #fff; text-decoration: none; }
    </style>
  2. HTML
    3. <div class="menu">
      <ul id="navig">
        <li class="first"><a href="#" >Home</a></li>
        <li class="first"><a href="#" id="current">Products</a>
          <ul class="sub one">
            <li class="second"><a href="#">Menus</a>
              <ul class="sub two">
                <li><a href="#">Drop Down CSS </a></li>
                <li><a href="#">Horizontal CSS Menus</a></li>
                <li><a href="#">Vertical CSS Menus</a></li>
              </ul>
            </li>
            <li class="second"><a href="#">Links</a>
          </ul>
        </li>
        <li class="first"><a href="#">Contact</a></li>
      </ul>
    </div>
I have tried my best to keep things as simple as possible. If you have any questions on this, please let me know. It will be my pleasure.
Enjoy !
Labels:
URL:
https://bloganalyzer-mirror.blogspot.com/2013/05/dropdown-menu-using-css3-part2.html
Code For Forum:
[URL=https://bloganalyzer-mirror.blogspot.com/2013/05/dropdown-menu-using-css3-part2.html]Dropdown Menu using CSS3 - Part2[/URL];
HTML Code:
<a href='https://bloganalyzer-mirror.blogspot.com/2013/05/dropdown-menu-using-css3-part2.html' target='_blank'>Dropdown Menu using CSS3 - Part2</a>
Related Stories
Start the Conversation

Comments left on this site will be moderated. Note that all comments with abusive, disruptive or explicit content and comments with links will be deleted immediately.

0 comments so far on 'Dropdown Menu using CSS3 - Part2'

Subscribe to: Post Comments (Atom)

© 2015 Bloganalyzer | Mirror. All rights Reserved. Designed By meNight Fury.