As you know that i always tried to present some thing unique there for you peoples. Today I am going to share a new and beautiful Css Drop down menu with sub menus.It really looking too pretty and awesome and Visitors attractive. You can inspire visitors using this awesome drop down menu . Its very easy to install in your blog or website. It is Css designed menu.It consists of seven menu tabs , two tabs are drop down while others ones is flat menus. It can be customized into your mode and need.
THE CSS CODE
/*--- PROBLOG WORLD COPYRIGHTED ---*/
#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}
/* Default link styling */
/* Style the list OR link hover. Depends on which browser is used */
#menu li a:hover {z-index:200; position:relative;color:#fff; background-color:#c7093e;}
#menu li:hover {position:relative; z-index:200;}
#menu li:hover > a {color:#fff; background:#c7093e;}
#menu li:hover > a.sub {color:#fff; background-color:#c7093e;}
#menu li.current a {color:#fff; background:#c7093e;}
#menu li a.sub {background: #333 url(down-arrow.gif) no-repeat right center;}
#menu li.current a.sub {color:#fff; background:#c7093e url(down-arrow.gif) no-repeat right center;;}
#menu :hover ul {left:0; top:40px; width:120px; background:#444;}
/* keep the 'next' level invisible by placing it off screen. */
#menu ul,
#menu :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#menu :hover ul :hover ul
{left:120px; top:-1px; background:#222; white-space:nowrap; width:100px; z-index:200; height:auto;}
#menu :hover ul li {margin:0; border-top:1px solid #666;}
#menu :hover ul li a {width:120px; padding:0; text-indent:10px; background:#333; color:#ccc; height:30px; line-height:30px;}
#menu :hover ul li a.fly {background:#333 url(right-arrow.gif) no-repeat right center;}
#menu :hover ul :hover {background-color:#c7093e; color:#fff;}
#menu :hover ul :hover a.fly {background-color:#c7093e; color:#fff;}
#menu :hover ul li.currentsub a {background:#c7093e; color:#fff;}
#menu :hover ul li.currentsub a.fly {background:#c7093e url(right-arrow.gif) no-repeat right center; color:#fff;}
#menu :hover ul :hover ul li a {width:100px; padding:0; text-indent:10px; background:#3e3e3e; color:#ccc;}
#menu :hover ul :hover ul :hover {background-color:#c7093e; color:#fff;}
#menu :hover ul :hover ul li.currentfly a,
#menu :hover ul :hover ul li.currentfly a:hover {background:#c7093e; color:#fff;}
/*--- PROBLOG WORLD COPYRIGHTED ---*/
THE HTML CODE
Put the code in your blog section where you want to set the menu .<ul id="menu">
<li><a href="index.html"><b>Home</b></a></li>
<li><a href="single.html"><b>Single Level</b></a></li>
<li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="fly" href="#url">Dropdown one<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 1.1</a></li>
<li><a href="#url">Dropdown 1.2</a></li>
<li><a href="#url">Dropdown 1.3</a></li>
<li><a href="#url">Dropdown 1.4</a></li>
<li><a href="#url">Dropdown 1.5</a></li>
<li><a href="#url">Dropdown 1.6</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="currentsub"><a class="fly" href="#url">Dropdown two<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 2.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
<li><a href="#url">Dropdown 2.4</a></li>
<li><a href="#url">Dropdown 2.5</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#url">Dropdown three</a></li>
<li><a href="#url">Dropdown four</a></li>
<li><a class="fly" href="#url">Dropdown five<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropdown 5.1</a></li>
<li><a href="#url">Dropdown 2.2</a></li>
<li><a href="#url">Dropdown 3.3</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="dropline.html"><b>Dropline</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Dropline one</a></li>
<li><a href="#url">Dropline two</a></li>
<li><a href="#url">Dropline three</a></li>
<li><a href="#url">Dropline four</a></li>
<li><a href="#url">Dropline five</a></li>
<li><a href="#url">Dropline six</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a class="sub" href="flyout.html"><b>Flyout</b><!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#url">Flyout one</a></li>
<li><a href="#url">Flyout two</a></li>
<li><a href="#url">Flyout three</a></li>
<li><a href="#url">Flyout four</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
<li id="contact"><a href="contact.html"><b>Contact</b></a></li>
</ul>
HOW TO ADD THIS INTO BLOGGER AS WIDGET
Put the given css codes in between style tags and after that put html codes. Then
Go to Blog Title→ Layout →Add Widget→ Html/JavaScript.Past the Code
The code will be look like that...
<style>
Given css codes
</stle>
Given HTML Codes
I hope you will find my post help full. Please comment your bright ideas.Thank you!
0 comments