css menu horizontal drop down

Do you have a book or article that would describe how to create a CSS navigational menu that's "drop down" goes horizontally? (Similar to MSN site) I have created something however I cannot lock it in to fall beneath the main navigational bar in all screen resolutions

Thank you so much

Love your CSS Cookbook - have recommended this to dozens of people

Jeanne at jh@pw2.com
1 person has
this question
+1
Reply
  • Hi Jeanne,

    Sorry for the delay in getting back to you. I wasn't able to find a book or article that has an example of exactly what you're looking for. CSS: The Missing Manual has some good menu examples, but they're not for horizontal dropdowns.

    I would recommend looking at websites with the kind of menu you're trying to build and using a tool like Firebug in Firefox or Chrome's inspector tool to see how it works.

    From your description, it sounds like you're floating the two rows of your menu. To stop the second row from floating to the side of the first row, a few things I would try would be:
    • Make sure both rows are inside of a container that is your desired width and set both rows to "width: 100%;" (if that's how you want things to look).

    • Add "clear: both;" to each row.

    I hope that helps!

    Regards,

    Rachel James
    O'Reilly Media
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Hi Jeanne,
    There is also a great website, http://www.w3schools.com that has some great tools to learn CSS. For specific help with CSS you can find some here:
    http://www.w3schools.com/css/

    Cheers,
    Tai Hake
    Customer Service Rep,
    O'Reilly Media
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited

  • Thank you for the information all - I will give a few things a try. If O'Reilly Media comes out with more books about CSS, please add me to the email list. I teach adult ed for HTML/Dreamweaver and have been suggesting to all my students to purchase the CSS Cookbook. I feel if you are going to create a web site - the CSS Cookbook is your "bible"!

    Jeanne H
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. sad, anxious, confused, frustrated kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited