Geekzone: technology news, blogs, forums
Welcome Guest.
You haven't logged in yet. If you don't have an account you can register now.

147 posts

Master Geek

Topic # 88744 22-Aug-2011 22:30
Send private message

So for school we have to construct a website and we have been taught how to do all the basics, but I being the ambitious individual i am tried making drop-down menus using only CSS, and im failing to figure out something.

The First part of the image is the mouse over the catagory, it then stays as a drop-down at the first item in the menu like in the second part, but then when i try move to the 2nd item it disappears and appears as the 3rd part.
the basis of the page is in there

and this is the CSS im using

My knowledge of CSS spans about 2 online tutorials, and this free example I gutted and reused (which may be where the problem liesFrown)

Thanks in advance for any help that can be given.

edit: also the bar doesn't sit on top of the image (which should be ignored its from an old test) but that's easy to fix with me just playing around

Create new topic
8027 posts

Uber Geek
+1 received by user: 387


  Reply # 510593 23-Aug-2011 13:32
Send private message

Sounds like you need to uncomment the z-index property for the #nav css so that the menu is in front of the aminated gif image.

Also to get rid of the 40px padding on the nested (2nd level) ul, consider adding a class to target the ul (rather than too much hierarchy like #nav ul li {....} ).

eg: class="menu-2nd-level"

Then in the css:

.menu-2nd-level { padding: 0; }
.menu-2nd-level li { padding: 0; }

147 posts

Master Geek

  Reply # 510796 23-Aug-2011 17:39
Send private message

:D thank you very much

Create new topic

Twitter »

Follow us to receive Twitter updates when new discussions are posted in our forums:

Follow us to receive Twitter updates when news items and blogs are posted in our frontpage:

Follow us to receive Twitter updates when tech item prices are listed in our price comparison site:

Geekzone Live »

Try automatic live updates from Geekzone directly in your browser, without refreshing the page, with Geekzone Live now.

Geekzone Live »

Our community of supporters help make Geekzone possible. Click the button below to join them.

Support Geezone on PressPatron

Are you subscribed to our RSS feed? You can download the latest headlines and summaries from our stories directly to your computer or smartphone by using a feed reader.

Alternatively, you can receive a daily email with Geekzone updates.