Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: menu
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
     
    /* 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 8-Oct-12 8:06am
Nuha IT654

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

  Print Answers RSS
0 OriginalGriff 274
1 Sergey Alexandrovich Kryukov 255
2 Shweta N Mishra 216
3 PIEBALDconsult 200
4 BillWoodruff 174
0 OriginalGriff 7,630
1 Sergey Alexandrovich Kryukov 7,022
2 DamithSL 5,586
3 Manas Bhardwaj 4,946
4 Maciej Los 4,525


Advertise | Privacy | Mobile
Web03 | 2.8.1411023.1 | Last Updated 8 Oct 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100