Grow your CSS skills. Land your dream job.

[Solved] CSS Drop Down Menu Driving Me Crazy!

  • # February 20, 2010 at 9:54 am

    Hi Guys

    I’m working on a website, and I would like to have a CSS Drop Down Menu on the Personal Development in the Nav Bar.

    I’ve managed to put something up, but as you can see it is wrong ! when you hover over Personal Development, you get the Menu appearing in the far left ! and it is green ! when I want it to be the same colour as the Nav !

    I’d greatly appreciate any help in fixing this.

    Thank You.

    # February 20, 2010 at 10:23 am

    OK to make things easier, I went and removed all the CSS that was related to the submenu, now all I have is a styled list, with another list within it. Here is the HTML.

    How do I create a drop down menu under Personal Development ?

    I’d greatly appreciate any help :(

    # February 20, 2010 at 9:53 pm

    anyone ? :(

    # February 21, 2010 at 6:14 am

    Google is your best friend when it comes to tutorials, here is a link which you could have found yourself
    http://www.evolt.org/article/How_to_mak … /17/52030/

    # February 21, 2010 at 9:24 am

    believe me virtual I’ve tried so many, like you said google is full of them.

    But none of them work for me ! I don’t knkow what I’m doing wrong :( the one you linked me to didn’t work either !

    Check it out :(

    # February 21, 2010 at 1:09 pm

    Well for one thing it seems that you are just adding css markup to already existing markup which is going to cause problems. When you install one of these menus and there are loads of them as you say, you need to start from scratch not add more css to previous css which will probably override the new css.

    So scrap everything you already have for the menu navigation, including the html and the css and start over with this one.
    http://www.cssplay.co.uk/menus/drop_examples.html

    # February 21, 2010 at 7:26 pm

    Thank you Virtual

    You were right > I was wrong.

    It is now looking MUCH better, thanks to your advice. However there is still one small problem.

    Check this out. Now hover over the [ Personal Development ] and you see how the drop-down gets hidden behind the content !

    How can I solve this problem ?

    Thank you.

    # February 22, 2010 at 7:54 am

    Give .menu5 a z-index of 100.

    # February 23, 2010 at 2:54 pm

    Thank You So Much Virtual :)

    That DID IT :) I have been using CSS for a while, but I had never come across this z-index thing !

    I shall google it to see what it does.

    Thank you Very Much. you’re GREAT.

    # February 23, 2010 at 3:32 pm

    Glad to be of help, I know how frustrating it can be… :roll:

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".