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 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Drop down menus and flared edges - CSS

    Hi all,

    Ive been working on this menu for a little while now, and Ive made some progress that more or less works with my original vision:

    http://www.users.on.net/~plaedien/Sc...19.43%20PM.png

    I have a couple of questions though, as I cant figure out a way to implement some elements.
    Here is the test site

    http://www.users.on.net/~plaedien/PD_test/index.htm


    1. So far Ive managed to do it all with background images and css, no JS in site (i would like to keep it that way if possible). I cant seem to get the top of the sub menu to marry up properly with the bottom of the tabs. Ive tried changing the sub-menu-top.png so it is thicker where it would join the tab, but this breaks if the tab is wider. Any suggestions on how to make this dynamic?

    2. It seems to work fine in all browsers - except IE6 (big surprise). My knowledge of IE6 hacks is limited. Any suggestions? JS would be fine for this little problem if that works.

    3. Finally - you will see on the mockup that the rollover on the submenus has a background colour that goes all the way to the edge of the submenu block. Ive tried to make this work, but the padding seems to break it. Any ideas how I could do this?


    This has definitely been the most frustrating part of the site so far! but it seems almost there Just need help from some experts!


    cheers,
    Karl

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    1. Seems to work if you add a margin-top: -5px; to the .nav li .sub style rule.


    Checking out the other points.
    Teed

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    17
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks Teed, that seems to work. It looks like i might have to ignore the one rounded corner, but thats fine i think


  •  

    Posting Permissions

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