www.webdeveloper.com
Results 1 to 3 of 3

Thread: problem with positioning elements

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    problem with positioning elements

    I have created a simple nav bar using css. The problem is that the sub menu's disappear when I try to click on them.

    Here is the css code that I used;

    #menu ul {
    margin: 5px;
    padding: 5px;
    font-family: Arial,Verdana;
    font-size: 1.5em;
    list-style: none;
    }

    #menu ul li {
    display: block;
    float: left;
    position: relative;
    }

    #menu li ul {
    display: none;
    }

    #menu ul li a {
    display: block;
    margin-left: 5px;
    padding: 5px 10px 5px 10px;
    border-top: 1px solid #fff;
    text-decoration: none;
    white-space: nowrap;
    color: #1107C7;
    background: #fffff0;
    }

    #menu ul li a:hover {
    background: #fffff0;
    }

    #menu li:hover ul {
    display: block;
    position: absolute;
    }

    #menu li:hover li {
    z-index: 200;
    float: none;
    font-size: 0.5em;
    }

    #menu li:hover a {
    background: #ff7f50;
    }

    menu li:hover li a:hover {
    background: #fffff0;
    }

    I don't fully understand it but have made a few color and text changes to a copied nav bar from a book.
    What do I need to do to get the sub menu to stay in place when you roll on it and then disappear when you roll off?

    You can see what happens by clicking here. I've just tested the nav bar again. Sometimes it stays and sometimes it doesn't.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,111
    The problem is you're hovering off the menu when you try to go to the dropped menu. Try removing the top margin:

    #menu ul {
    margin: 0 5px 5px;
    padding: 5px;
    font-family: Arial,Verdana;
    font-size: 1.5em;
    list-style: none;
    }
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thanks for the reply.

    It's done the trick.

    In the words of Alex the meerkat "simples" when you know how!

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