I have absolutely no idea why this isn't working, so I'll just show you the code:

<div class="banner"><p>
<ul class="lavaLampWithImage" id="1">
<li class="current"> <a href="index.php">Home</a></li> <li><a href="page.php">Page</a></li> <li><a href="page.php">Page</a></li> </ul></p></div>

I had been following the tutorial on this website (http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/?cp=50#comment-173209) in order to build a "lavalamp" menu. I'm simply running this on my server without having downloaded any "plugins" (I'm not even sure what they are) or installing any files.

Any suggestions on how to fix this?

Well, first, a ul doesn't go inside a p. Other than that, assuming you have pages index.php and page.php in the same directory as whatever page this is part of, then the links should work - assuming it's not something else that's wrong. I know this snippet won't validate, but will the rest of it?

Likely be z-index, some element is sitting ontop of the a tag - so no click!

no css with it so can't say for sure

Likely be z-index, some element is sitting ontop of the a tag - so no click!

no css with it so can't say for sure

Hmm, since there is a sort of a box which hovers ontop of the link which the mouse comes over, that's possibly the element sitting on top of the tag.

Here's the css:

.lavaLampWithImage {
            position: relative;
            height: 29px;
            width: 421px;
            background: url("bg.gif") no-repeat top;
            padding: 15px;
            margin: 10px 0;
            overflow: hidden;
        }
                .lavaLampWithImage li {
                    float: left;
                    list-style: none;
                }
                    .lavaLampWithImage li.back {
                        background: url("lava.gif") no-repeat right -30px;
                        width: 9px; height: 30px;
                        z-index: 8;
                        position: absolute;
                    }
                        .lavaLampWithImage li.back .left {
                            background: url("lava.gif") no-repeat top left;
                            height: 30px;
                            margin-right: 9px; /* 7px is the width of the rounded shape */
                        }
                    .lavaLampWithImage li a {
                        font: bold 14px arial;
                        text-decoration: none;
                        color: #fff;
                        outline: none;
                        text-align: center;
                        top: 7px;
                        text-transform: uppercase;
                        letter-spacing: 0;
                        z-index: 10;
                        display: block;
                        float: left;
                        height: 30px;
                        position: relative;
                        overflow: hidden;
                        margin: auto 10px;    
                    }
                        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
                            border: none;
                        }

Did you add JQuery libraries to it as in the tutorial? I'm not sure about the version, but it may not be relevant. I did mine in pure JavaScript though... But not with a little tween effect. :P

Did you add JQuery libraries to it as in the tutorial? I'm not sure about the version, but it may not be relevant. I did mine in pure JavaScript though... But not with a little tween effect. :P

Hmm well I didn't quite understand the part about JQuery libraries, I downloaded the whole package in a zip file but didn't download/add anything on top of that... Not exactly sure on how a library is added either...

OK, what JQuery files you need are...
- jquery.js
- jquery.lavalamp.js
- jquery.easing.js (optional)

If you place all .js files in the same location of your HTML file, then you could simply add this in the "head" tag.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.lavalamp.js"></script>
<!-- Optional -->
<script type="text/javascript" src="jquery.easing.js"></script>

Then at the bottom of the page, you would also need to call the function.

<script type="text/javascript">
    $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

That's all. I guess you may need to be careful when you read a tutorial. Go after it step-by-step. Hope this help.

The reply above is good, make sure that's in.

Looking at the tutorial you have one small difference

<li class="current">
should be 
<li>

the class is set in the code and that is likely overwriting it, you could set it yourself manually by changing your css entry

.lavaLampWithImage li.back {

change to

.lavaLampWithImage li.current {

but will likely mess up the hover effects

I didn't know what you meant by JQuery libraries but I had already added those files in Tayyim. And I tried to change the css like you said Biiim and still no luck :/

The thing is that even if I download the tutorial which is on that website and try to add href links around the words, it still doesn't seem to work. and that's the original document!

I really do need this fixed though so any other suggestions are welcome

ah i just downloaded the files to see and you need this as your jquery

<script type="text/javascript">
$(function() {
 $("#1, #2, #3").lavaLamp({
  fx: "backout",
  speed: 700
 });
});
</script>

the "$("#1, #2, #3")" refers to the id's of the 3 div's (id=1, id=2 and id=3) so put in the id's or classes of all the menus in that ("#1, .lavaLampWithImage, #myid").


If it's still continuing a live example of it would be good so me or someone could just debug it straight as i'm off for the day soon

Wow, that worked great :) ^^

I think I understand it too now. Thanks a lot to every single person that contributed, appreciate it!