Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trouble Creating a CSS/HTML Dropdown Menu

    I've been trying to make a drop down menu for a title bar, and am running into some problems. I'm using the example in http://www.cssnewbie.com/example/css-dropdown-menu/ as a basis for all the CSS/JavaScript coding.

    Here's what I have:


    <body>
    <div id="wrap">
    <h1>Title</h1>

    <ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Item A</a></li>
    <li><a href="#">Item B</a></li><ul>
    <li><a href="#">Option A</a></li>
    <li><a href="#">Option B</a></li>
    <li><a href="#">Option C</a></li>
    </ul></li>
    <li><a href="#">Item C</a></li>
    </ul>

    Options A-C should all appear in a drop down when the mouse cursor goes over Item B. Instead, they on the navigation bar. Any idea what I'm doing wrong here?

    Sorry if I'm not giving enough info; I'm quite new to this field. Tell me what else you need to know. The CSS/JavaScript stuff can be assumed to come directly from the website.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    You have mis-matched tags, a closing li without an opening one. It would be easier to spot if you separated it a bit more. For example,

    Code:
    <li><a href="#">Item B</a></li><ul> << put this opening ul on the next line
    I assume you've closed the opening div further down the page.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello kolormatic,
    One of the best ways to learn how to correctly form a ul drop menu is to check your markup with the validator. It's a little confusing at first and the validator can point out errors and make learning that much faster. See the links about validation in my signature line.

    Also, I may have a little better example of a CSS dropdown menu here.



    AndrewGSW, did you look at the link he's following? Maybe not the best example.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    AndrewGSW, did you look at the link he's following? Maybe not the best example.
    I only looked at it fleetingly - I noticed it said 'suckerfish'.

    There is also a separate CSS validator. Oops, Excavator already refers to this in his signature.

    Menu inspirations
    Last edited by AndrewGSW; 12-10-2012 at 12:06 AM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks for the links.

    I checked out the Validator. I'm a little confused by it, however; it points out some of the errors, but when I check to see the errors, they're gone.

    For example, it said that there was an issue with one of the brackets, namely that it wasn't present. However, the bracket appears to be there when I look at the original document.

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Location
    North East England
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Indentation

    One thing I have found very helpful when coding nested lists is the use of indentation.

    My guess is that many of don't use indentation enough generally and most of the time there's no problem caused by that but with any sort of nested items then I think it's much better to indent.

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Location
    North East England
    Posts
    7
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Indentation

    One thing I have found very helpful when coding nested lists is the use of indentation.

    My guess is that many of don't use indentation enough generally and most of the time there's no problem caused by that but with any sort of nested items then I think it's much better to indent.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •