cerberus478 Posted July 30, 2012 Share Posted July 30, 2012 Hi I'm trying to do a lavalamp style menu but it isn't working here is my home page <html> <head> <title>Menu</title> <script type="text/javascript" src="../jquery/lavalamp/jquery.js"></script> <script type="text/javascript" src="../jquery/lavalamp/jquery.lavalamp.js"></script> <!-- Optional --> <script type="text/javascript" src="../jquery/lavalamp/jquery.easing.js"></script> <script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })}); }); </script> <link rel="stylesheet" type="text/css" href="css/menu.css" media="screen" /> </head> <body> <ul class="lavaLamp"> <li class="back"><div class="left"></div></li> <li><a href="#">Home</a></li> <li><a href="#">Plant a tree</a></li> <li><a href="#">Travel</a></li> <li><a href="#">Ride an elephant</a></li> </ul> </body> </html> and this is my menu.css /* Styles for the entire LavaLamp menu */ .lavaLamp { position: relative; height: 29px; width: 421px; background: url("../jquery/lavalamp/bg.gif") no-repeat top; padding: 15px; margin: 10px 0; overflow: hidden; } /* Force the list to flow horizontally */ .lavaLamp li { float: left; list-style: none; } /* Represents the background of the highlighted menu-item. */ .lavaLamp li.back { background: url("../jquery/lavalamp/lava.gif") no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; } .lavaLamp li.back .left { background: url("../jquery/lavalamp/lava.gif") no-repeat top left; height: 30px; margin-right: 9px; } /* Styles for each menu-item. */ .lavaLamp li a { position: relative; overflow: hidden; text-decoration: none; text-transform: uppercase; font: bold 14px arial; color: #fff; outline: none; text-align: center; height: 30px; top: 7px; z-index: 10; letter-spacing: 0; float: left; display: block; margin: auto 10px; } Quote Link to comment Share on other sites More sharing options...
Adam Posted July 30, 2012 Share Posted July 30, 2012 Can you explain what exactly isn't working? Quote Link to comment Share on other sites More sharing options...
cerberus478 Posted July 31, 2012 Author Share Posted July 31, 2012 When I hover over the link the bubble that suppose to appear doesn't appear. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.