Results 1 to 2 of 2

Thread: pure css navigation menu help

  1. #1
    ottomated Guest

    pure css navigation menu help

    hello,

    I have been working on this website for a while now. I am slowly getting accustomed to css and javascript. Anyhow I cannot solve this problem and it has been bothering me so I am here to get your help.

    I have a pure css navigation menu on top of my website and everything works fine. however the parent menu and the submenus are not lined up correctly. Right now I am faking it with an absolute definition of where my submenu should be. Ideally, I want my submenu and my parent menu to be lined up in their centerline.

    Code:
    #navigation li ul {
    margin:8px; 
    padding:0px; 
    display:none; 
    position:absolute; 
    left: -20px; 
    top:17px; 
    line-height:30px; 
    font-size:13px;
    }
    the problem is, when ever I try messing with the style setup, the menu stops working. so I have no clue how to do it. I wanted to know if anybody on this forum knew how to line the parent menu and the submenu by their centerline. the website is this:


    WEBSITE



    any input is appreciated.

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    This is better:-
    Code:
    #navigation li ul
    {margin:8px; padding:0px; display:none; position:absolute; /*left: 
    -120px;*/ top:17px; line-height:30px; font-size:13px;  }
    
    #navigation li:hover ul
    {display:inline; width:350px;/*500px;*/ background: skyblue; margin-left: 
    -100px; }
    I edited the width to 350px because it was going beyond the right side and causing scrollbars.

    There is still a slight difference between the left alignment of the top level and the first drop down level because the width of text is different and so the starting position is slightly different. If you added widths to the top an dropdown li tags it might help, but then the total width might be too great in the drop down level creating scrollbars.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Similar Threads

  1. Dropdown menu with css and javascript...?
    By AllanH in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 14 May 2009, 02:59 AM
  2. CSS Drop down menu in IE problem..
    By mylah in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 24 Mar 2009, 08:41 AM

Posting Permissions

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