Creative Blogging Tips | SeeBeeTee: Customizable free drop-down menu

Dropdown menu with the help of Html,Css,Jquery

We've not done any posts of menu since many posts.
Now going to give you full tutorial on how to make a professional and beautiful drop-down menu .

Click to view large

You may also see in image that how it'ill look...
But if you want live preview we've made it.

Live preview

http://www.cdpn.io/FLlvo

^_^ First go to your blog dashboard and click on Layout Tab.
^_^ Click on Add a Gadget , then select HTML/Javascript.
^_^ Copy below code on Content box.

<button class="abc1">
Click to open/close the menu
</button>
<div class="mn1">
<ul class="main1">
<li><a href="#">Home</a></li>
<li>Laptops
    <ul>
      <li><a href="#">APPLE</a></li>
      <li><a href="#">SONY</a>
        <ul>
          <li><a href="#">Sony VAIO</a></li>
        </ul>
      </li>
      <li><a href="#">HP</a></li>
      <li><a href="#">DELL</a></li>
      <li><a href="#">ACER</a></li>
      <li><a href="#">TOSHIBA</a></li>
      <li><a href="#">COMPAQ</a></li>
      <li><a href="#">SAMSUNG</a></li>
    </ul>
</li>
<li>Tablets
    <ul>
      <li><a href="#">SAMSUNG</a></li>
      <li><a href="#">KARBONN</a></li>
      <li><a href="#">MICROMAX</a></li>
      <li><a href="#">MOTOROLA</a></li>
      <li><a href="#">OTHER</a></li>
    </ul>
</li>
<li>Smart Phones
    <ul>
      <li><a href="">iOS</a></li>
      <li>Android
        <ul>
          <li><a href="#">Android 1.6</a></li>
          <li><a href="#">Android 2.3</a></li>
          <li><a href="#">Android 3.2</a></li>
          <li><a href="#">Android 4.0</a></li>
          <li><a href="#">Android 4.1</a></li>
          <li><a href="#">Android 4.2</a></li>
        </ul>
      </li>
      <li><a href="#">Windows Phone</a></li>
      <li>Symbian
        <ul>
          <li><a href="#">Version 3</a></li>
          <li><a href="#">Version 5</a></li>
        </ul>
      </li>
      <li><a href="#">Java</a></li>
      <li><a href="#">Bada</a></li>
    </ul>
</li>
<li><a href="#">Support</a></li>
</ul>
</div>

^_^ Change the # with your links and Change all the names which is highlighted with blue color with your names.
^_^ Then, Save. And Go to template tab and On new template editor expand <b:skin>...</b:skin> and search for ]]</b:skin> . Paste below code above it.

.abc1
{
position: fixed;
right: 0;
top: 1%;
background: #000;
color: #fff;
border: none;
}
.mn1
{
position: fixed;
left: 0;
top: 0.5%;
margin: 0;
padding: 0;
}
.main1 li,.main1 a,.mn1,.main1 ul
{
font-family: 'Arial';
font-size: 17px;
color: #fff;
font-weight: bold;
transition: .3s;
}
.main1 a
{
color: #fff;
margin: 0;
text-decoration: none;
}
.main1 li,
.main1 ul
{
list-style: none;
margin: 0;
padding: 0;
background: linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
background: -webkit-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
background: -ms-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
background: -moz-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
background: -o-linear-gradient(top,rgb(7,175,180),rgb(6,160,180),rgb(5,145,180),rgb(4,130,180));
}
.main1 li
{
top: 100%;
left: 0;
line-height: 25px;
padding: 10px;
width: 140px;
border: 1px solid #fff;
}
.main1 li:hover
{
position: relative;
cursor: pointer;
background: rgb(52,48,255);
}
.main1 ul
{
display: none;
position: absolute;
top: 0;
left: 100%;
width: 150px;
}
.main1 ul ul
{
top: 0;
left: 100%;
}
.main1 li:hover > ul
{
display: block;
}

^_^ Then search for </head> and Paste below code above it.

^_^ Now you've done just save template.
^_^ It's works using jquery toggle function.
^_^ It's with Hide and Show features and also Fixed feature.
^_^ Don't forget to bookmark our blog and our blog has now owned domain which is www.seebeetee.com.