Grow your CSS skills. Land your dream job.

Dropline CSS issue

  • # February 20, 2010 at 9:17 am

    On my site beautyidentified.com.

    The navigation has a dropline of subcategories.

    If I wanted the subnav to start under home. Instead of its parent. How would i do this?

    So the subnavs would move over to the left.

    Code:
    #nav ul {margin-left: 175px ; width: 930px;}

    #nav, #nav ul {
    padding: 0;
    list-style: none;
    line-height: 1;
    float:left;
    clear: both;
    }
    #nav { background:#765B57 ;width: 100%;}
    #nav ul ul {margin-left: 0px; }
    #nav a {
    font-family:Arial”Times New Roman”,Times,serif;
    font-size:14px;
    letter-spacing:1px;
    display: block;
    line-height: 28px;
    padding: 0 10px;
    }
    #nav a { color: #c0baa5; }
    #nav a:hover, #nav li.current_page_item a{ color:#fff; background:#e826d6; }

    #nav li { float: left; }

    /* Style drop down list */

    #nav li ul { position: absolute; z-index: 99999; }
    #nav li ul li { position:relative; z-index:999; background: #765B57; }
    #nav li ul li:hover { border:none; }
    #nav li ul li a { line-height: 25px; font-size: 11px; width: 110px; }
    #nav li ul ul { margin: -26px 0 0 170px; }
    #nav li ul ul li a { line-height: 25px; }
    #nav li ul li ul li a { border-width:0 1px 1px 0px; }
    #nav li:hover ul, #nav li.sfhover ul { left: auto; }
    #nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
    #nav li.current_page_item ul li a { color:#c0baa5; background:#fff; border:none;}
    #nav li.current_page_item ul li a:hover, #nav li ul li.current_page_item a:hover { color:#fff; background:#e826d6; border:none;}
    #nav li.current_page_item ul li a { color:#c0baa5; background:#fff; border:none;}

    #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }
    #nav li:hover, #nav li.hover { position: static; } /* IE7 Fix */

    # February 22, 2010 at 8:06 am
    Code:
    #nav ul {
    position: relative;
    }
    #nav li ul {
    left: 0;
    }

    ..if I understand you correctly.

    # February 22, 2010 at 8:25 am

    If you can try it now. I did apply the code you suggested.

    It does what I need after I have hovered over it.

    Basically I need any nav ul ul to be under home when you hover over it. Then you can pick the anchor.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".