I've had quite a search through forums looking for a solution for this, but since I don't know coding I'm not sure what applies to me and what doesn't. So, apologies if this is an often solved problem, but I'll greatly appreciate your help!

After much trial and error, I've managed to get a drop down list of pages on my navigation bar; however, when I go to click on a sub-page, the entire menu disappears. I've read through other similar problems where there has been an issue with a margin that's too big, but I think my margins are set to '0'.

The blog is at: http://swirlstwirlsblog.blogspot.com.au/

I haven't got content in the sub pages but there are there and linked in the html/javascript widget.

I've also looked at it in Chrome, Mozilla, and Safari and it's the same issue.

I'm also not sure if this is a javascript, css, or html problem, so please be kind in your responses--I'm only new!

Thanks so much to anyone able to help me on this.

Here's the script I used in the Widget:

<ul id="jsddm">
<li><a href="http://swirlstwirlsblog.blogspot.com.au/">Home</a>
<li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/sparkles">Sparkles</a>
</li>

<li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/friendship">Friendship</a>
</li>

<li><a href="http://swirlstwirlsblog.blogspot.com.au/search/label/humour">Humour</a>
</li>

<li><a href="">About</a>
<ul>
<li><a href="http://swirlstwirlsblog.blogspot.com.au/p/about_16.html">Us</a></li>
<li><a href="http://swirlstwirlsblog.blogspot.com.au/p/contributers.html">Contributors</a>    </li>
<li><a href="http://swirlstwirlsblog.blogspot.com.au/p/advertising.html">Advertising</a>  </li>
<li><a href="http://swirlstwirlsblog.blogspot.com.au/p/privacy-policies.html">Privacy</a></li>
<li><a href="http://swirlstwirlsblog.blogspot.com.au/p/contact.html">Contact</a></li>
</ul>
</li>
</li></ul> 

And here's the html code I put in the template:

<pre>#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
padding: 5px 10px;
border-right: 1px color: eeeeee;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: crushed;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #ffffff;
}

#jsddm li ul li a:hover {
background: #eeeeee;

}</pre>