Treehouse: Grow your CSS skills. Land your dream job.

CSS Drop down menu; how to align right edge instead of left?

  • # July 26, 2010 at 4:37 pm

    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:

    The menu currently drops like this (aligned along the left edge): … n-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): … tvmenu.JPG

    Here is my code:

    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 ######### */

    top: 0;
    border: 1px solid #BBB; /*THEME CHANGE HERE*/
    border-bottom-width: 0;
    font:normal 12px Verdana;
    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;

    # July 26, 2010 at 5:21 pm

    Here is a graphic for clarification of what I want to do:

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

You must be logged in to reply to this topic.