Beautiful Lavalamp DropDown Menu Css3 With Lighting Slider

Live Demo
Featured:

  • Pure Css3
  • Beautiful Slider
  • Multi Level
  • Easy To Customize

How To Add This CSS3 Drop Down Menu:

for blogger:

  1. Go to Blogger Dashboard > Layout.
  2. Click on Add a Gadget link present at just below of header
  3. Paste the code after replacing links with your links
  4. Finally save your menu
 <head><style>
 #nav,#nav ul {
 list-style: none outside none;
 margin: 0;
 padding: 0;
 }
 #nav {
 background: url('menu_bg.png') no-repeat scroll 0 0 transparent;
 clear: both;
 font-size: 12px;
 height: 58px;
 padding: 0 0 0 9px;
 position: relative;
 width: 957px;
 }
 #nav ul {
 background-color: #222;
 border:1px solid #222;
 border-radius: 0 5px 5px 5px;
 border-width: 0 1px 1px;
 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
 left: -9999px;
 overflow: hidden;
 position: absolute;
 top: -9999px;
 z-index: 2;

-moz-transform: scaleY(0);
 -ms-transform: scaleY(0);
 -o-transform: scaleY(0);
 -webkit-transform: scaleY(0);
 transform: scaleY(0);

-moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;
 -ms-transition: -ms-transform 0.1s linear;
 -o-transition: -o-transform 0.1s linear;
 -webkit-transition: -webkit-transform 0.1s linear;
 transition: transform 0.1s linear;
 }
 #nav li {
 background: url('menu_line.png') no-repeat scroll right 5px transparent;
 float: left;
 position: relative;
 }
 #nav li a {
 color: #FFFFFF;
 display: block;
 float: left;
 font-weight: normal;
 height: 30px;
 padding: 23px 20px 0;
 position: relative;
 text-decoration: none;
 text-shadow: 1px 1px 1px #000000;
 }
 #nav li:hover > a {
 color: #00B4FF;
 }
 #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
 background: none repeat scroll 0 0 #121212;
 outline: 0 none;
 }
 #nav li:hover ul.subs {
 left: 0;
 top: 53px;
 width: 180px;
-moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
 }
 #nav ul li {
 background: none;
 width: 100%;
 }
 #nav ul li a {
 float: none;
 }
 #nav ul li:hover > a {
 background-color: #121212;
 color: #00B4FF;
 }
 #lavalamp {
 background: url('http://2.bp.blogspot.com/-N1gJvWYUZ9k/ULBwIlkOb8I/AAAAAAAABQE/xua4IYixZ6s/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
 height: 16px;
 left: 13px;
 position: absolute;
 top: 0px;
 width: 64px;
-moz-transition: all 300ms ease;
 -ms-transition: all 300ms ease;
 -o-transition: all 300ms ease;
 -webkit-transition: all 300ms ease;
 transition: all 300ms ease;
 }
 #lavalamp:hover {
 -moz-transition-duration: 3000s;
 -ms-transition-duration: 3000s;
 -o-transition-duration: 3000s;
 -webkit-transition-duration: 3000s;
 transition-duration: 3000s;
 }
 #nav li:nth-child(1):hover ~ #lavalamp {
 left: 13px;
 }
 #nav li:nth-child(2):hover ~ #lavalamp {
 left: 90px;
 }
 #nav li:nth-child(3):hover ~ #lavalamp {
 left: 170px;
 }
 #nav li:nth-child(4):hover ~ #lavalamp {
 left: 250px;
 }
 #nav li:nth-child(5):hover ~ #lavalamp {
 left: 330px;
 }
 #nav li:nth-child(6):hover ~ #lavalamp {
 left: 410px;
 }
 #nav li:nth-child(7):hover ~ #lavalamp {
 left: 490px;
 }
 #nav li:nth-child(8):hover ~ #lavalamp {
 left: 565px;
 }
 #nav,#nav ul {
 list-style: none outside none;
 margin: 0;
 padding: 0;
 }
 #nav {
 background: url('http://4.bp.blogspot.com/-b_kqzqXLogE/ULBwO06hv7I/AAAAAAAABQM/96CBcgjpm8w/s1600/menu_bg.png') no-repeat scroll 0 0 transparent;
 clear: both;
 font-size: 12px;
 height: 58px;
 padding: 0 0 0 9px;
 position: relative;
 width: 957px;
 }
 #nav ul {
 background-color: #222;
 border:1px solid #222;
 border-radius: 0 5px 5px 5px;
 border-width: 0 1px 1px;
 box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
 left: -9999px;
 overflow: hidden;
 position: absolute;
 top: -9999px;
 z-index: 2;

-moz-transform: scaleY(0);
 -ms-transform: scaleY(0);
 -o-transform: scaleY(0);
 -webkit-transform: scaleY(0);
 transform: scaleY(0);

-moz-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 -o-transform-origin: 0 0;
 -webkit-transform-origin: 0 0;
 transform-origin: 0 0;

-moz-transition: -moz-transform 0.1s linear;
 -ms-transition: -ms-transform 0.1s linear;
 -o-transition: -o-transform 0.1s linear;
 -webkit-transition: -webkit-transform 0.1s linear;
 transition: transform 0.1s linear;
 }
 #nav li {
 background: url('http://2.bp.blogspot.com/-t-O5_u6AtPA/ULBwVyqzr4I/AAAAAAAABQU/fy0dP-qACyA/s1600/menu_line.png') no-repeat scroll right 5px transparent;
 float: left;
 position: relative;
 }
 #nav li a {
 color: #FFFFFF;
 display: block;
 float: left;
 font-weight: normal;
 height: 30px;
 padding: 23px 20px 0;
 position: relative;
 text-decoration: none;
 text-shadow: 1px 1px 1px #000000;
 }
 #nav li:hover > a {
 color: #00B4FF;
 }
 #nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
 background: none repeat scroll 0 0 #121212;
 outline: 0 none;
 }
 #nav li:hover ul.subs {
 left: 0;
 top: 53px;
 width: 180px;

-moz-transform: scaleY(1);
 -ms-transform: scaleY(1);
 -o-transform: scaleY(1);
 -webkit-transform: scaleY(1);
 transform: scaleY(1);
 }
 #nav ul li {
 background: none;
 width: 100%;
 }
 #nav ul li a {
 float: none;
 }
 #nav ul li:hover > a {
 background-color: #121212;
 color: #00B4FF;
 }
 #lavalamp {
 background: url('http://2.bp.blogspot.com/-N1gJvWYUZ9k/ULBwIlkOb8I/AAAAAAAABQE/xua4IYixZ6s/s1600/lavalamp.png') no-repeat scroll 0 0 transparent;
 height: 16px;
 left: 13px;
 position: absolute;
 top: 0px;
 width: 64px;

-moz-transition: all 300ms ease;
 -ms-transition: all 300ms ease;
 -o-transition: all 300ms ease;
 -webkit-transition: all 300ms ease;
 transition: all 300ms ease;
 }
 #lavalamp:hover {
 -moz-transition-duration: 3000s;
 -ms-transition-duration: 3000s;
 -o-transition-duration: 3000s;
 -webkit-transition-duration: 3000s;
 transition-duration: 3000s;
 }
 #nav li:nth-child(1):hover ~ #lavalamp {
 left: 13px;
 }
 #nav li:nth-child(2):hover ~ #lavalamp {
 left: 90px;
 }
 #nav li:nth-child(3):hover ~ #lavalamp {
 left: 170px;
 }
 #nav li:nth-child(4):hover ~ #lavalamp {
 left: 250px;
 }
 #nav li:nth-child(5):hover ~ #lavalamp {
 left: 330px;
 }
 #nav li:nth-child(6):hover ~ #lavalamp {
 left: 410px;
 }
 #nav li:nth-child(7):hover ~ #lavalamp {
 left: 490px;
 }
 #nav li:nth-child(8):hover ~ #lavalamp {
 left: 565px;
 }
 </style>
 </head>
 <div>

<ul id="nav">
 <li><a href="#">Home</a></li>
 <li><a href="#">Menu 1</a>
 <ul>
 <li><a href="#">Submenu 1</a></li>
 <li><a href="#">Submenu 2</a></li>
 <li><a href="#">Submenu 3</a></li>
 <li><a href="#">Submenu 4</a></li>
 <li><a href="#">Submenu 5</a></li>
 </ul>
 </li>
 <li><a href="#">Menu 2</a>
 <ul>
 <li><a href="#">Submenu 2-1</a></li>
 <li><a href="#">Submenu 2-2</a></li>
 <li><a href="#">Submenu 2-3</a></li>
 <li><a href="#">Submenu 2-4</a></li>
 <li><a href="#">Submenu 2-5</a></li>
 <li><a href="#">Submenu 2-6</a></li>
 <li><a href="#">Submenu 2-7</a></li>
 <li><a href="#">Submenu 2-8</a></li>
 </ul>
 </li>
 <li><a href="#">Menu 3</a>
 <ul>
 <li><a href="#">Submenu 3-1</a></li>
 <li><a href="#">Submenu 3-2</a></li>
 <li><a href="#">Submenu 3-3</a></li>
 <li><a href="#">Submenu 3-4</a></li>
 <li><a href="#">Submenu 3-5</a></li>
 </ul>
 </li>
 <li><a href="#">Menu 4</a></li>
 <li><a href="#">Menu 5</a></li>
 <li><a href="#">Menu 6</a></li>
 <li><a href="#">Back</a></li>
 <div id="lavalamp"></div>
 </ul>
 </div>

For Website: Put above code in html body

Now replace # with your own links and replace the texts with your texts with your own text which you want to appear on menu.

Hit Comments If You Like My Work !

* Do you like this story? Then why not share it with your Friends *
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Himanshu is a young engineer living in India. Currently working at LiveCareer as a software engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!"

One comment: On Beautiful Lavalamp DropDown Menu Css3 With Lighting Slider

  • Clementina Lasure

    dear friend- I've arrive into the conclusion that-contrary towards the image you project listed here of becoming a republican- you will be a Democrat troll. Have you At any time brought us any great news on this website? You constantly uncover a thing to wring your hands about- this really is not very good, that is definitely not fantastic. the applicant is bad...the message is mixed..blah.blah.blah...you have got a really sober column by Jonathan and a logical approach (2008 was an exceptionally special yr) and you still obtain fault with it...in spite of the column basically accepting your premise that Romneyy is at the rear of now.. nWell, I'll not engage in your constant pessimism and negativity- especially if the fact is staring you inside the facial area. 2008 was indeed special and I'll bet you a nickel to the dollar the turnout (percentage wise) shall be significantly less than in 2008. This does not suggest that Romney will win or that he's ahead now, but it really does suggest the vast majority of polls are skewed.

    http://www.6cfzsP4cu9c6cfzsP4cu9.com/6cfzsP4cu96cfzsP4cu9c

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page