Member Avatar for 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?

  • 3 Contributors
  • 2 Replies
  • 80 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for passiondance

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

Member Avatar for ko ko

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.