html - menu links not floating to right -

i making custom responsive menu. , have 2 links logout , website front on menu need float right. when in desktop mode other side. have tried float right can not them both aligned.

when mobile view need floated right links normal vertical.

you can view here example: http://codepen.io/riwakawebsitedesigns/pen/ggljml , http://codepen.io/riwakawebsitedesigns/full/ggljml/

what best way.

html

<div class="container-menu"> <a class="togglemenu" href="#">menu</a> <ul id="menu">     <li><a href="">dashboard</a></li>     <li><a href="#">catalog</a>         <ul>             <li><a href="">categories</a></li>             <li><a href="">categories</a></li>         </ul>     </li>     <li><a href="#">extensions</a>         <ul>             <li><a href="">modules</a></li>         </ul>     </li>     <li><a href="#">sales</a>         <ul>             <li><a href="#" class="top">customers</a>                 <ul>                     <li><a href="#">customers</a></li>                     <li><a href="#">customer group</a></li>                 </ul>             </li>         </ul>     </li>     <li><a href="#">system</a>         <ul>             <li><a href="">setting</a></li>             <li><a href="#" class="top">design</a>                 <ul>                     <li><a href="#">layouts</a></li>                     <li><a href="#">banners</a></li>                 </ul>             </li>             <li><a href="#" class="top">users</a>                 <ul>                     <li><a href="#">user</a></li>                     <li><a href="#">user group</a></li>                 </ul>             </li>         </ul>     </li>     <li><a href="">website front</a></li>     <li><a href="">logout</a></li> </ul> </div>  <div class="container-fluid"> <div class="row" style="margin-top: 10px;"> <div class="col-lg-12"> <div class="alert alert-danger">test</div> </div> </div> </div> 

css

body,  #menu,  ul,  li,   {     margin: 0;      padding: 0; }  body {     font-family: "helvetica neue", helvetica, arial, sans-serif;  }  {     text-decoration: none; }  .container-menu {     width: 100%;     margin: 0 auto; }  .right {     float: right; }  .togglemenu {     display:  none;     background: #666;     padding: 10px 15px;     color: #fff; } #menu {     list-style: none;     *zoom: 1;     background: rgba(0,0,0,1);     background: rgba(19,19,19,1);     background: -moz-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(19,19,19,1)), color-stop(0%, rgba(17,17,17,1)), color-stop(0%, rgba(102,102,102,1)), color-stop(0%, rgba(43,43,43,1)), color-stop(2%, rgba(44,44,44,1)), color-stop(4%, rgba(71,71,71,1)), color-stop(27%, rgba(61,61,61,1)), color-stop(100%, rgba(28,28,28,1)));     background: -webkit-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -o-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: -ms-linear-gradient(top, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     background: linear-gradient(to bottom, rgba(19,19,19,1) 0%, rgba(17,17,17,1) 0%, rgba(102,102,102,1) 0%, rgba(43,43,43,1) 0%, rgba(44,44,44,1) 2%, rgba(71,71,71,1) 4%, rgba(61,61,61,1) 27%, rgba(28,28,28,1) 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#131313', endcolorstr='#1c1c1c', gradienttype=0 ); }  #menu:before, #menu:after {     content: " ";      display: table;  }  #menu:after {     clear: both; }  #menu ul {     list-style: none; }  #menu {     padding: 10px 15px;     color:#fff;     text-decoration: none }  #menu li {     position: relative; }  #menu > li {     float: left; }  #menu > li > {     display: block; }  #menu li  ul {     position: absolute;     left: -9999px; }  #menu > li.hover > ul {     left: 0; } #menu li li.hover ul {     left: 100%;     top: 0; }  #menu ul .top {     background-image: url('./images/arrow-right.png');      background-position: 95% center;     background-repeat:no-repeat; }  #menu li li {     display: block;     background: black; /* grey background */     opacity: 0.7; /* 80% opacity */     position: relative;     z-index:100;     width: 147px; }  #menu li li li {     background: black; /* grey background */     opacity: 0.7; /* 80% opacity */      z-index:200; }  @media screen , (max-width: 768px) {     .active {         display: block;     }     #menu > li {         float: none;     }      #menu li li {         width: 100%;     }      #menu ul {         display: block;         width: 100%;     }     #menu > li.hover > ul , #menu li li.hover ul {         position: static;     }  } 

you can following:

html

  <li class='float-right'><a href="">website front</a></li>     <li class='float-right'><a href="">logout</a></li> 

css

.float-right{    float:right!important; } 

example: http://codepen.io/anon/pen/yyraqx