SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Thread: drop down menu

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    drop down menu

    ARGHH! Drop down menus are very hard! Mainly its how each browser interprets the CSS and my lack of CSS knowledge as i'm just starting out.

    Iv been trying to get this basic css suckerfish based drop down to work but to no avail, used different browsers and all of them interprets the CSS differently.

    Can some some point me in the right direction? It would be much appreciated. The nav bar is located in the links below.

    http://nwe.co.nz/test/template.html
    http://nwe.co.nz/test/navbar.css

  2. #2
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is it me or did you mean Unordered Lists rather than Dropdowns...as that link you are showing us is NOT a dropdown...

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    umm its got a drop down function, the html shows it i just cant get it to drop manily because i think i'm using <SPAN> , in opera9 and IE7 it shows the supposdely droped down items, but its position is not relative to the hovered item, but some wierd place, IE6 just doesnt even show anything when hovering over "Products" & "Services".

  4. #4
    SitePoint Evangelist
    Join Date
    Oct 2005
    Posts
    415
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    look at this...ignore the nastyness of the style, but the principle is the same...look at the code and see what you think..

    http://www.pmob.co.uk/temp/disjointedcssrollover5.htm

  5. #5
    SitePoint Addict
    Join Date
    Mar 2005
    Location
    Toronto
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a better example of css drop down list to be here:

    http://www.cssplay.co.uk/menus/dd_valid.html

  6. #6
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi iv done a bit more fiddling and it now works, sort of the drop now works, it actually drops down!

    now if u have a look at the link, the drop down boxes is inheriting the background-img prperties when I was defining the <li> for the 1st level menu. How do i differentiate the 1st level menu, so that i can style the 2nd properly?

    http://nwe.co.nz/test/template.html

    the services and products items are drop down on hover.

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there,

    Looks like im not the one only having trouble with those drop downs,
    iv done more editing to my code and added a layout, my Opera 9 displays the site almost perfectly, but its not obeying text decoration:none. Firefix is interpreting the CSS perfect.

    But the drop down function is still impaired in IE7 & 6. What am I doing wrong? I'v implemented the java script, and its not working.

    I was also reading up on CSS positioning, and to achieve the layout that i'm after (attached pic), can someone tell me if I'm heading in the right direction? Every browser except IE6 is not displaying my layout correctly.

    Thanks in advance!

  8. #8
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To get your menus to line up under the item they've dropped down from, change the li to float: left and add float: right to the ul.

  9. #9
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks tyssen, did what u told me, it doesnt work, made it worse.

    It also seems like IE6 does not like me Using <span>, to create those tabs. I'v uploaded the most recent css and template files, so once again much appreciated for whoever is taking a look for me,

  10. #10
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to remove the default margin/padding on the sub-list:

    Code:
    ul ul { margin: 0; padding: 0; }
    Also, your menu won't work in IE because your javascript is wrong. The JS searches for a ul with an ID of 'nav' - you don't have that. You either need to edit your JS file or your HTML file.

  11. #11
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    looks like iv got firefox and opera covered. IE7 is doinf my layouts fine, but the drop downs are still not right, IE6 is just not doing anything right. Checked my java script, added a few IE conditionals in my CSS, still didnt do the trick.

  12. #12
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you tell if IE conditional statements are working?

  13. #13
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put * { display: none; } in your IE-only stylesheet - if your page goes blank, you know it's working.


Bookmarks

Posting Permissions

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