www.webdeveloper.com
Results 1 to 5 of 5

Thread: Pure CSS drop downs

  1. #1
    Join Date
    Jun 2004
    Posts
    91

    Pure CSS drop downs

    I have finally decided to bite the bullet and create a Pure CSS drop down menu system. I've spent countless hours trying to convert existing designs such as Suckerfish and Hybrid drop downs to suit my needs, only to fail miserably.

    So I decided to start from scratch and write the code myself. I've gotten the furthest I ever have with this method, but have 2 hang ups.

    Here is what I have so far:

    http://www.hakanai.net/dd/index.htm
    http://www.hakanai.net/dd/style.css

    The drop downs work, but when you hover over the parent menu, it leaps over to the left for some reason. I've tried adjusting every margin and padding I can think of, but have yielded no results. Obviously, the jumping is intolerable. Does anyone know what is going on and/or have suggestions to fix it?

    Also, is there a dynamic way to center the sub menu underneath its particular parent menu? I can achieve this with absolute positioning and fixed font sizes, but I want to avoid absolutes if at all possible.

    I should also note that if I do use absolute position to force the sub menu further left than it's parent, the parent still leaps left.

    As a final reference, I am aiming for something similar to Design Snack's 'hungry' menu. Rather instead of displaying the sub menu above the parent menu, I want it below. Also, I'd like to keep everything semantic. The 'hungry' menu is only one list item. I'd like to keep all of my sub menus individual list items if possible.

    Thanks in advance

  2. #2
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    Put this at the top of your stylesheet:
    Code:
    * {
    margin:0;
    padding:0;
    }
    and this at the bottom:
    Code:
    #topnav {
    margin-right:5em;
    }
    #topnav li:hover ul{
    display: block;
    position:absolute;
    margin-top:1.5em;
    margin-left:-3em;
    }
    and you'll be getting somewhere.

    By the way, you do realise that IE6 only supports :hover on the 'a' tag, don't you?

  3. #3
    Join Date
    Jun 2004
    Posts
    91
    Yeah, but I figured that I'd at least get the CSS right before I start working on the JavaScript.

    Those said changes did fix the most problematic 'leaping text' issue. However, dynamically centering the drop down still will not cooperate.

  4. #4
    Join Date
    Jul 2004
    Location
    Sendai, Japan
    Posts
    1,273
    You don't seem to have updated your page. Can we see what you have now?

  5. #5
    Join Date
    Jun 2004
    Posts
    91
    Reuploaded. I made a few minor changes in your suggestions to better suit my needs.

    As for the dynamic centering, I can't figure out a way to do it at all, and I'm starting to think that there isn't a way to do it with purely modern CSS. Since the size of the parent and sub menus are variable, it isn't possible to hardcode values. Since CSS can't process equations (whatever happened to PSL anyway?) I'm at a loss.

    What I can do is simply align the left margins of the parent and sub menus. It doesn't provide the same visual effect, however it retains the functionality while minimizing the breakage at large text sizes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles