Click here to Skip to main content

Nuha IT asked:

Open original thread
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;
    }
    
Tags: menu

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the The Code Project Open License (CPOL).



Advertise | Privacy | Mobile
Web04 | 2.8.141030.1 | Last Updated 26 Mar 2009
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