View Full Version : Menu Hover Dropdown

04-07-2011, 04:00 PM
Hi all, I'm Mick & new here with a relatively straight forward (I think) issue that I'm sure some coding wizard can help me with. ;)

Basically I've been making myself a dropdown menu and me being a novice, I'm pretty pelased with myself, however it's not exactly how I'd like it yet.

Upon dropdown it moves all the content below further down the page. I don't want that to be the case, I merely want it to display over the top of the content.

I was hoping that someone here (after a quick look at my code) maybe able to point me in the right direction. However if you have a solution, I hope that you can tell me the error of my ways too. I'm excited to learn better ways of doing things, rather than fixing without knowing what exactly I am doing wrong.

Here is the page in question, I'm sure from that you'll be able to get all the code required to take a look. http://www.divasofdestruction.co.uk/refurb/

Thanks very much in advance for any help, hints, tips or solutions.


P.S - I'm sure this will be the first of many times I'll be picking your knowledgable brains. :D

04-07-2011, 05:03 PM
Hi Mick, and welcome. I applaud you for learning on your own and the progress you've made so far.

I'd like to point out a couple of things. Your navigation links should really be in lists as they're intended to be. I would guess you could get it working as is, but seems to be so much more work AND you've created a bad case of divitis (http://csscreator.com/divitis).

I would recommend having a look at this tutorial (http://www.htmldog.com/articles/suckerfish/dropdowns/)on CSS based multi level drop down menus.

Finally, you've done a great job with creating valid code, but do have a few validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.divasofdestruction.co.uk%2Frefurb%2F&charset=%28detect+automatically%29&doctype=Inline&group=0)errors you can fix to ensure semantic cross browser compliant documents.

If you do decide to create a more conventional css drop down menu like the one I linked, do that first before you validate.

Hope that helps and good luck!

04-07-2011, 05:18 PM
Thanks for your swift response Teed, it's muchly appreciated, also thanks for the kind words about my coding & progress.

I had came across listed nav's before, but couldn't find a good one where setting a width wasn't an issue, however the linked example seems to let me do just that. :thumbsup:

I begun to play around (as I do with most of the modules I create) and come up with something I liked the look of, but then always seem to find there's a better way to do it. The live site is example of this. I've taught myself along the way, however realise now that this time it needs to be coded cleaner with valid code.

Another problem I had come across using these types of nav's were that upon using something with 'float:left' I can't center align the text inside it. I assume this will be the case here plugin too? Is there a work around or is it something I'd have to live with? :(

Sorry for asking such a question before even trying, just I'm not able to roll my sleeves up and work with this until later this evening, so was wondering whether this will be a stumbling block when i come to it.

Thanks again.

04-07-2011, 05:47 PM
Not sure what issues you were running into. You float the <li> elements, then you can text-align: center; the <a> elements to center the text in your nav lists.

04-07-2011, 05:50 PM
Brilliant, it would seem that I can achieve everything I want to achieve with this tutorial then. :D

I'm sure I'll post back with progress later! :thumbsup:

04-07-2011, 05:55 PM
Brilliant, it would seem that I can achieve everything I want to achieve with this tutorial then. :D

I'm sure I'll post back with progress later! :thumbsup:

Hundreds of thousands web designers cant be wrong...lol Its a good bit of code and works with every browser.

Play around with it, especially the styles to style it the way you like....ie colors, widths, borders, and such.

If you have any more questions post back here.

04-08-2011, 06:59 PM
Just an update, I;ve managed to get this up & working no problem.

Example Here: http://www.divasofdestruction.co.uk/refurb/

Thanks again Teed, much appreciated. Now to validate! :D

04-08-2011, 07:06 PM
Awesome! Glad you got it working.