Navigation menu items spacing need to be solved - html

Question

I have designed a menu.
HTML code is give
<div class="navi">
<ul class="menu">
<li class="current_page_item">Women</li>
<li>Men</li>
<li>Junior</li>
<li>Accessories</li>
<li>Collections
<ul class='children'>
<li>Year</li>
<li>2014
<ul class='children'>
<li>SUMMER</li>
<li>AUTUMN</li>
<li>WINTER</li>
<li>SPRING</li>
</ul>
</li>
<li>2013</li>
</ul>
</li>
<li>Sale</li>
<li class="last"><a href='#'>MY ACCOUNT</a>
</li>
</ul>
<br style="clear:both;" />
</div>
The CSS is give bellow
.navi {
width:1000px;
margin:0 auto;
border-bottom:5px solid #000;
height:50px;
}
.menu {
width:1000px;
margin:0 auto;
}
.menu, .menu ul {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
border: 0 none;
display: block;
float: left;
margin: 0;
padding: 0;
position: relative;
z-index: 5;
}
.menu li:hover {
white-space: normal;
z-index: 10000;
}
.menu li li {
float: none;
}
.menu ul {
left: 0;
position: absolute;
top: 0;
visibility: hidden;
z-index: 10;
}
.menu li:hover > ul {
top: 100%;
visibility: visible;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu:after, .menu ul:after {
clear: both;
content: ".";
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.menu, .menu ul {
min-height: 0;
}
.menu ul {
margin: -10px 0 0 -30px;
padding: 10px 30px 30px;
}
.menu ul ul {
margin: -30px 0 0 -10px;
padding: 30px 30px 30px 10px;
}
.menu ul li a:hover, .menu li li a:hover {
color: #484848;
text-decoration: none;
}
.menu ul {
min-width: 15em;
width: auto;
}
.menu a.arrow
{
background: url(arrow.gif) no-repeat right center;
}
.menu ul a.arrow
{
background: url(right.gif) no-repeat 97% center;
}
.menu .menuRight
{
float: right;
margin-right: 0px;
}
.menu a {
font-family:Harvest;
color: #314350;
display: block;
height:55px;
line-height:55px;
margin: 0 0px 0 0;
padding: 0 1em;
position: relative;
text-decoration: none;
font-size:18px;
}
.menu a:hover {
background-color: #1c2b36;
color: #ffffff;
box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
}
.menu .current_page_item a {
background-color:#1c2b36;
color: #ffffff;
box-shadow:#000 0 0 0, inset #3cc0c4 0 -5px 0;
}
.menu li li {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #FFFFFF;
border-color: -moz-use-text-color #B2B2B2 #B2B2B2;
border-image: none;
border-right: 1px solid #B2B2B2;
border-style: none solid solid;
border-width: medium 1px 1px;
color: #444444;
filter: none;
width: auto;
}
.menu li li a {
background-position: 50% 50%;
background-repeat: no-repeat;
border: medium none;
color: #444444;
font-size: 12px;
font-weight: 400;
height: 20px;
line-height: 20px;
padding: 5px 10px;
text-shadow: none;
white-space: nowrap;
}
.menu li li a:hover {
background:#E5E4E4;
border: medium none;
color: #333;
filter: none;
}
.menu ul > li + li {
border-top: 0 none;
}
.menu li li:hover > ul {
left: 100%;
top: 0;
}
.menu > li:first-child > a {
border-left: medium none;
}
.menu > li:first-child > a, .menu li + li + li li:first-child > a {
}
.menu ul.children a, .menu .current_page_ancestor, .menu .current_page_ancestor ul a {
background: none;
filter: none;
}
.menu ul.children a{background:url(images/arrow.png) no-repeat 93% 70%;}
.menu ul.children a:hover{background:url(images/arrow.png) no-repeat 93% 70% #999;}
ul.sub-menu .current_page_item a {
background:none;
}
.footer-box-last {
width:420px;
float:left;
background:#b6c2c9;
height:150px;
}
.footer_outer {
background:url(mail-icon.png) repeat:none;
width:400px;
border-radius:5px;
margin:5px;
background-color:#fff;
}
.footer-box-last h2 {
color:#e8ecee;
font-size:20px;
font-weight:lighter;
margin:15px 15px 15px 7px;
}
.footer-box-last label {
color:#9B9B9A;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.icon {
width:20px;
height:30px;
float:left;
margin:11px 0 0 5px;
}
.field-2 {
border: medium none;
width:220px;
height:30px;
border-radius:5px;
border:none;
color:#4c565f;
margin:5px;
}
.form_btn {
background-color:#3bc0c3;
color:#ffffff;
float:right;
border-radius:5px;
height:34px;
width:120px;
border:none;
margin:4px;
}
.last {
float:right;
padding-left:60px;
font-style:italic;
}
</style>
I want to move the last li item to the left. then it will look like this n pic
I need a space between SALES and MY ACCOUNT
please help me in this.
Thank you in advance

Answer 1

Try adding this:
.menu li.last {
float:right;
}
You had the right CSS in your code (.last), but you need to give it more authority as it is being overwritten by #menu li code. So on your last declaration change it to ".menu li.last" instead of ".last"

Answer 2

Try This
.menu li.last {
float:right;
}
OR
.menu li:last-child {
float:right;
}

Answer 3

Try this
.menu li:last-child {
float:right;
}

Answer 4

Try this:
.last{
position: relative;
left: -50px;
}