Click here to Skip to main content
15,881,882 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I have a menu and I need to move the last list in it to the right corner, while the rest are in their left positions.

But I could not move the last to right corner, where tried to put all the
  • to float:left;

    and the last item to float:none; this is also havn't worked!

    Currently, I am using margin-left property to the last list, but this is not an ideal solution due to different resolutions.

    What other solution can be done to make the last item float to the right corner?

    This is the menu

    http://im29.gulfup.com/3mun1.png[^]


    This is the code

    HTML
    /* menus::base */
    div#menus {
        height:41px;
        background:url(images/main-bg.png) center repeat-x;
    }
    
    div#menus ul {
        margin: 0;
        padding: 0;
        list-style: none;
        float: left;
    }
    div#menus ul.menus {
        padding-left: 0px;
    }
    
    div#menus li {
        position: relative;
        z-index: 9;
        margin: 0;
        padding: 0 5px 0 0;
        display: block;
        float: left;
    }
    div#menus li:hover>ul {
        left: -2px;
    }
    
    div#menus a {
        position: relative;
        z-index: 10;
        height: 41px;
        display: block;
        float: left;
        line-height: 41px;
        text-decoration: none;
        font: normal 12px Trebuchet MS;
    }
    div#menus a:hover, div#menus a:hover span { color: #fff; }
    div#menus li.current a {}
    
    div#menus span
    {
        display: block;
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: 95% 0;
    }
    div#menus ul ul a.parent span {
        background-position:95% 8px;
        background-image: url(images/item-pointer.gif);
    }
    div#menus ul ul a.parent:hover span {
        background-image: url(images/item-pointer-mover.gif);
    }
    
    /* menus::level1 */
    div#menus a {
        padding: 0 10px 0 10px;
        line-height: 30px;
        color: #e5e5e5;
    }
    div#menus span {
        margin-top: 5px;}
        /**@replace#1*/
    div#menus li { background: url(images/main-delimiter.png) 98% 4px no-repeat; }
    div#menus li.last { background: none;margin-left:260px;}
    
    /* menus::level2 */
    div#menus ul ul li { background: none; z-index: 9;}
    div#menus ul ul {
        position: absolute;
        top: 38px;
        left: -999em;
        width: 163px;
        padding: 5px 0 0 0;
        background: rgb(4,57,123);
        margin-top:1px;
        z-index: 9;
    }
    div#menus ul ul a {
        padding: 0 0 0 15px;
        height: auto;
        float: none;
        line-height: 24px;
        color: rgb(169,169,169);
        z-index: 9;
    }
    div#menus ul ul span {
        margin-top: 0;
        padding-right: 15px;
        _padding-right: 20px;
        color: rgb(169,169,169);
        z-index: 9;
    }
    div#menus ul ul a:hover span {
        color: #fff;
    }
    div#menus ul ul li.last { background: none; z-index: 9;margin-left:260px;}
    div#menus ul ul li {
        width: 100%;
        z-index: 9;
    }
    
    /* menus::level3 */
    div#menus ul ul ul {
        padding: 0;
        margin: -38px 0 0 163px !important;
        margin-left:172px;
        z-index: 9;
    }
    
    /* colors */
    div#menus ul ul ul { background: rgb(4,67,142);z-index: 9; }
    div#menus ul ul ul ul { background: rgb(5,70,150);z-index: 9; }
    div#menus ul ul ul ul { background: rgb(5,81,173); z-index: 9;}
    
    /* lava lamp */
    div#menus li.back {
        background: url(images/lava.png) no-repeat right -44px !important;
        background-image: url(images/lava.gif);
        width: 13px;
        height: 44px;
        z-index: 8;
        position: absolute;
        margin: -1px 0 0 -5px;
    }
    div#menus li.back .left {
        background: url(images/lava.png) no-repeat top left !important;
        background-image: url(images/lava.gif);
        height: 44px;
        margin-right: 8px;
    }
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900