SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css drop down issues

    hi all, I have a css menu in my site which I have wanted to put a drop down box simply under one heading. A couple of issues tho, firstly is that I've created graphical tabs for the menu options which are now being reciprocated in the dropped down menu which I do not want, and am unable to remove, and also, cannot find a way of setting it to display under the right menu option unless i use an absolute position, which is not good seeing as ive centralised the page!!
    here is the link to the web page http://www.alite.co.uk/new/index.html and here is the link to the css [URL="http://www.alite.co.uk/new/style.css"[/URL]

    any help would be greatly appreciated!

    thankks =]

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    You just need to cancel out the styles you don't want on the nested items which can be done simply by being more specific. e.g. to reset a nested image to its default then use the shorthand background and set it to transparent or a solid colour. (#nav ul ul li a{background:#fff})

    Code:
    #nav a:link,#nav a:active,#nav a:visited{
        color: #ffffff;
        font-weight: bold;
    }
    #nav li:hover ul { display: block; }
    #nav li{position:relative;}
    #nav li ul {
        position: absolute;
        left: 0;
        top: 2em;
        display: none;
        background: #FFF;
        border: 1px solid #666666;
        }
    #nav li ul li {
        background:#fff;
        border-bottom:1px solid #000;
        width:100%;
        padding:0;
        margin:0;
    }
    #nav li ul li a{
        background:#fff;
        color:#000;
        text-align:left;
    }
    #nav li ul li a:link,#nav li ul li a:visited{color:#000}
    #nav li ul li a:hover{background:#ffffcc;color:#fc0}
    #nav a:hover{
        color: #FFCC00;
    }
    /* ooo */
    /*aaa*/
    /*end nav*/
    If you set the parent list to position:relative then that creates a local stacking context for further positioned elements and they will remain in context with that parent.

    You will need to add javascript to cater for ie6 so look at the suckerfish drop downs which explain all these issues.

    There are also issue in placing drop downs over flash elements so look at the sticky in the flash forum as it explains what you need to do.

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Windsor, Berkshire
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank u very much, that's just what i was looking for! Has also teached me a lot about relative and absolute positioning! ure a gem!


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
  •