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;
}