Geekzone: technology news, blogs, forums
Guest
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.

http://imageshack.us/photo/my-images/535/failcss.png

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
http://pastebin.com/B7sr22iU

and this is the CSS im using
http://pastebin.com/YhTbGB1x


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
8025 posts

Uber Geek
+1 received by user: 387

Trusted
Subscriber

  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:





News »

Targus set sights on enterprise and consumer growth in New Zealand
Posted 13-Aug-2018 13:47


Huawei to distribute nova 3i in New Zealand
Posted 9-Aug-2018 16:23


Home robot Vector to be available in New Zealand stores
Posted 9-Aug-2018 14:47


Panasonic announces new 2018 OLED TV line up
Posted 7-Aug-2018 16:38


Kordia completes first live 4K TV broadcast
Posted 1-Aug-2018 13:00


Schools get safer and smarter internet with Managed Network Upgrade
Posted 30-Jul-2018 20:01


DNC wants a safer .nz in the coming year
Posted 26-Jul-2018 16:08


Auldhouse becomes an AWS Authorised Training Delivery Partner in New Zealand
Posted 26-Jul-2018 15:55


Rakuten Kobo launches Kobo Clara HD entry level reader
Posted 26-Jul-2018 15:44


Kiwi team reaches semi-finals at the Microsoft Imagine Cup
Posted 26-Jul-2018 15:38


KidsCan App to Help Kiwi Children in Need
Posted 26-Jul-2018 15:32


FUJIFILM announces new high-performance lenses
Posted 24-Jul-2018 14:57


New FUJIFILM XF10 introduces square mode for Instagram sharing
Posted 24-Jul-2018 14:44


OPPO brings advanced technology to the smartphone market with new device
Posted 24-Jul-2018 09:20


Hawaiki Transpacific cable ready-for-service
Posted 20-Jul-2018 11:29



Geekzone Live »

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



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.