How to Create Drop Down Menu Widget In Blogger With CSS & HTML Codes
Hello!
Dear friends my name is ARYA KHAN today I am going to show you! How to create a horizontal Drop Down Menu Widget . May exist between
blogger friends who find difficulty in putting the CSS code in the template editing stages, for it to post this time I tried to give a mild solution of horizontal CSS drop down menus. Here is a list of horizontal CSS drop down menus, adding drop down menus in blogger can benefit your readers to find out the intended posts of the blog with ease. There is nothing like widget for blogger menus, you suppose to add the menu with your own. To add drop down menu in blogger you need is just a little bit of CSS and HTML code and put that code at the right place in your blog and done.
Simply follow these steps carefully, All Navigation Menus below uses two pieces of codes. One is The HTML code which is responsible for positioning the menus and the second is the CSS code which is responsible for the look and feel of the menus.
Note:
Go to Blogger Dashboard than go to Template/Theme than click on the Edit HTML button than find this highlighted code ]]></b:skin> than Paste the CSS code for your selected Menu just above the ]]></b:skin> code.
CSS Code:
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii574p84HGFURCJVCOx9ZqBzKoqnk_6Gu-H5ZZU_rFcg5djKQAev6Pnug1z2XhfS8E6vyVd3aU8F5IRMvx5SsLwQTvA3lIdC2Wts-FFsqTcGrlkM55cm3g0prvRUkzZOikTsygbxSTYHI1/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEqX5mjEhwgAJtUpiHlAYA2Xbw_3i0ngGOKDrdrOP4DwluaFsiAqpOmkg_LNJvlo5WHTHda_Dra5JAXL3XDwJfWydEIrXOSlLkqzkrFhQWrKUWRE5AYN6exSHeZlkiNjePgZTFepZMfTIT/s1600/hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcUW-m3MfYi8jCIa9yPZKeVDP-MbIcxJgmXLDxVt-XVuJvhOZR7h_zHbn83hIuoTTHoCurIBWpgnvXtCUMRQBy4TkKDxEJZSTNX_K0IH6ajOwF71AiTbHqvujkq6M4wIoHCxKhXjklwkx/s1600/sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjx3jyBsc2RRpoTSyGX9bfNIr4gWQgrOHaT4OeJKG2tTGoL6IAFDIStuLc2t4LUKYu9fMkWqCQeDtj36aeaSzVKgBwzyCVEKgexdFZJY73qm2Rn_pIJ6sDm4ZZDyfbeazXxOoUK-9fXQhx/s1600/hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
Note:
Go to Blogger Dashboard than go to Layout than click on Add Gadget button than add the HTML/JavaScript gadget than place the HTML is here.
HTML Code:
<div class="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" id="current">Products</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/faq.php">FAQ</a>
<ul>
<li><a href="#">Drop Down CSS Menus</a></li>
<li><a href="#">Horizontal CSS Menus</a></li>
<li><a href="#">Vertical CSS Menus</a></li>
<li><a href="#">Dreamweaver Menus</a></li>
</ul>
</li>
<li><a href="/contact/contact.php">Contact</a></li>
</ul>
</div>
Now your menu is ready please don't forget to Save the theme.
