CSS Menu Assistance

[firefly-21]

Hi Everyone,

Having a few issues with my CSS menus that need resolving.

At present you can see how the menus are rendering by browsing to http://www.pccredibility.com.au/ . It seems that they are positioning themselves underneath the right location, where they should be dropping down from.

However, the menu items should drop directly down when the mouse hovers over the menu item.

Im pretty sure there is a tag i need to reference within my stylesheet but i cannot remember which one. My stylesheet is located at http://www.pccredibility.com.au/index_files/styles.css

Can anyone help?

[passiondance]

Maybe you forgot to include the external javascript (or Jquery) for dropdown menu in the section... What I saw there is only external css file included.

[Zero13]

You need to hide the sub menu until hover on it's parent 'li' tags. And show when the cursor over 'li' tags. Like:

/*need hide*/
ul ul {
display: none;
position: absolute;
width: 124px;
height: auto;
left: 0;
top: /*it parent's height, li tag*/ px
}
/*show when hover it*/
ul li:hover ul {
display: block
}

Try above codes. It should work on IE(above 7 and later), FF, Safari, Opera. For IE older, you need a script for the 'li:hover' statement.
Note that the child 'ul' is position absolute, and it will appear when you hover on it's parent 'li', 'li' tag was not relative to it's child. You need the 'li' tags relative to it's child 'ul' and appear start from it when hover.

ul li {
position: relative
}

And don't forget doctype for your html. 'Strict' mode is better. Sorry for my language skill.