#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    1
    Rep Power
    0

    Unhappy CSS Drop down menu; how to align the right edge of drop down and parent menu?


    Hello everyone,

    I have a drop-down menu that is currently working well.

    The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned.

    I want the menu to "drop" down and to the left, so the right edges are aligned.

    I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed.

    Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use.

    Thank you!

    Here is the page: http://www.littlebuddymedia.com/site05/012.html



    The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif



    I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG

    Here is my code:

    Code:
    .chromestyle{
         width: 100%;
         font-weight: bold;
         float: left;
         height: 29px;
    }
    
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .chromestyle ul{
    border: 0px solid #BBB;
    width: 100%;
    background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
    padding: 4px 0;
    margin: 0;
    text-align: right; /*set value to "left", "center", or "right"*/
    }
    
    .chromestyle ul li{
    display: inline;
    }
    
    .chromestyle ul li a{
    color: #000000;
    padding: 4px 7px;
    margin: 0;
    text-decoration: none;
    border-left: 1px solid #DADADA;
    }
    
    .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
    background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    position:absolute;
    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    line-height:18px;
    z-index:100;
    background-color: white;
    width: 200px;
    visibility: hidden;
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 5px;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #0000ff;
    color: #fff200;
    }
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, timmaciejewski.

    That's not a CSS drop down menu. It does not use "li:hover". It's using JavaScript to set the CSS for the positioning of the drop-downs, not just CSS.

    *** Thread Moved to JavaScript forum ***
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo