CSS styled black drop down menu for blogger | Lush web
This drop down menu is created by CSS via Lush web you can add this stylish drop down menu in your blogger easily. many new bloggers searching for new blogger widgets and most popular widgets lush web introduce new blogger widgets for peoples.
add this drop down menu and be style your blog now!!!
First go to Template
Click on EDIT HTML
now search for ]]></b:skin>
now paste this code before/above
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #fff; text-decoration: underline; }
ul.dropdown a:active { color: #fff; }
/* -- level mark -- */
ul.dropdown ul {
margin-left: -6px;
width: 170px;
padding-bottom: 9px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr2MEE983krweLqrxfBwDVeOAx2ceQtLgAC5u1vQo6w9l1llx2OtPUAMJbxZ_b8uGaEWTP1lfsK4v07ZoRejHSrTtWcDf7ZIfdpEvjACbvk-GzlXEh-owB-I6KCU6WI-6ZcuCTibFLGF4/s1600/dropdown_pane.png) 0 100% no-repeat;
color: #000;
font-size: 11px;
font-weight: normal;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
}
ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul li.empty {
padding: 12px 12px 7px !important;
font-weight: bold;
}
ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #000; }
ul.dropdown ul a:hover { color: #000; text-decoration: none; }
ul.dropdown ul a:active { color: #000; }
/* -- level mark -- */
ul.dropdown ul ul {
display: none;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
Now Go to layout option
add a gadget
Click on HTML/JAVASCRIPT
paste this code in it.
/* Black and White drop Drown Menu for Blogger by lushweb.blogspot.com */
ul.dropdown li a {
display: block;
padding: 3px 8px;
}
ul.dropdown li {
padding: 0;
}
ul.dropdown li.dir {
padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
ul.dropdown ul a {
padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
padding: 3px 5px 3px 11px;
border: solid 1px #ddd;
background-color: #eee;
font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown {
font: bold 12px Arial, Helvetica, sans-serif;
}
ul.dropdown li {
padding: 3px 12px;
background-color: #000;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #222;
<ul class="dropdown dropdown-horizontal" id="nav"> <li><a href="Your Link URL">Home</a></li> <li><a class="dir" href="Your Link URL">Solutions</a> <ul> <li class="empty">Industries</li> <li><a href="Your Link URL">Broadcast and media</a></li> <li><a href="Your Link URL">Education</a></li> <li><a href="Your Link URL">Financial services</a></li> <li><a href="Your Link URL">Government</a></li> <li class="empty">Solutions</li> <li><a href="Your Link URL">Consumer photo</a></li> <li><a href="Your Link URL">Mobile</a></li> <li><a href="Your Link URL">Print publishing</a></li> <li><a href="Your Link URL">Pro photography</a></li> <li><a href="Your Link URL">Professional video</a></li> <li><a href="Your Link URL">Applications</a></li> </ul></li> <li><a class="dir" href="http://www.lushweb.blogspot.com/">Products</a> <ul> <li><a href="Your Link URL">Acrobat Connect Pro</a></li> <li><a href="Your Link URL">Acrobat family</a></li> <li><a href="Your Link URL">Adobe AIR</a></li> <li><a href="Your Link URL">After Effects</a></li> <li><a href="Your Link URL">ColdFusion</a></li> <li><a href="Your Link URL">Creative Suite family</a></li> <li><a href="Your Link URL">Dreamweaver</a></li> </ul></li> <li><a class="dir" href="http://www.lushweb.blogspot.com/">Support</a> <ul> <li><a href="Your Link URL">Support home</a></li> <li><a href="Your Link URL">Customer Service</a></li> <li><a href="Your Link URL">Knowledgebase</a></li> <li><a href="Your Link URL">Books</a></li> <li><a href="Your Link URL">Training</a></li> <li><a href="Your Link URL">Support programs</a></li> </ul></li> <li><a class="dir" href="http://www.lushweb.blogspot.com/">Communities</a> <ul> <li class="empty">By user</li> <li><a href="Your Link URL">Designers</a></li> <li><a href="Your Link URL">Developers</a></li> <li><a href="Your Link URL">Educators</a></li> <li><a href="Your Link URL">Partners</a></li> <li class="empty">By resource</li> <li><a href="Your Link URL">Adobe Labs</a></li> <li><a href="Your Link URL">Adobe TV</a></li> <li><a href="Your Link URL">Forums</a></li> </ul></li> <li><a class="dir" href="http://www.lushweb.blogspot.com/">Company</a> <ul> <li><a href="Your Link URL">About Adobe</a></li> <li><a href="Your Link URL">Press</a></li> <li><a href="Your Link URL">Investor Relations</a></li> <li><a href="Your Link URL">Corporate Affairs</a></li> <li><a href="Your Link URL">Careers</a></li> <li><a href="Your Link URL">Showcase</a></li> <li><a href="Your Link URL">More ›</a></li> </ul></li> <li><a class="dir" href="http://www.lushweb.blogspot.com/">Downloads</a> <ul> <li><a href="Your Link URL">Downloads home</a></li> <li><a href="Your Link URL">Trial downloads</a></li> <li><a href="Your Link URL">Updates</a></li> <li><a href="Your Link URL">Exchange</a></li> <li class="empty">Readers and Players</li> <li><a href="Your Link URL">Get Adobe Reader</a></li> <li><a href="Your Link URL">Get Flash Player</a></li> </ul></li> <li><a class="dir" href="http://www.lushweb.blogspot.com/">Store</a> <ul> <li><a href="Your Link URL">Store home</a></li> <li><a href="Your Link URL">Software</a></li> <li><a href="Your Link URL">Fonts</a></li> <li><a href="Your Link URL">Books</a></li> <li><a href="Your Link URL">Support programs</a></li> </ul></li> </ul> - See more at: http://lushweb.blogspot.com/2012/11/css-black-white-drop-down-menu.html#sthash.uxLMbHIZ.dpuf