html - Menu appears in reverse order -


i've been trying build navbar website using foundation. however, after i've tried items in menu bar appearing in reverse order. on right hand side, rather saying "portfolio contact" says "contact portfolio". ideas?

html:

<div id="header-container">         <div id="header" class="row">                <nav class="nav-bar">                 <ul class="left">                     <li data-slide="1" class="andrewgu"><a href="">andrewgu</a></li>                 </ul>                 <ul class="right">                     <li data-slide="2" class="portfolio"><a href="">portfolio</a></li>                     <li data-slide="3" class="about"><a href="">about</a></li>                     <li data-slide="4" class="contact"><a href="">contact</a></li>                  </ul>             </nav>         </div><!--end header-->     </div><!--end header-container-->        

css:

div#header ul{     height: 128px;     list-style-type: none; } div#header ul li {     background-color: #003264;       text-align: center;     height: 128px;     line-height: 128px;              transition: background-color 1s;     -webkit-transition: background-color 1s;     display: inline;     padding: 0;     margin: 0; } li.andrewgu {     width: 200px;     font-size: 60px; } li.portfolio {     float: right;     font-size: 30px;     width: 140px; } li.about {     float: right;     font-size: 30px;     width: 110px; } li.contact {     float: right;     font-size: 30px;     width: 130px; } 

website: http://andrewgu12.kodingen.com/ appreciated, thanks!

cahnge float:right; float:left

li.portfolio {     float: left;     font-size: 30px;     width: 140px; } li.about {     float: left;     font-size: 30px;     width: 110px; } li.contact {     float: left;     font-size: 30px;     width: 130px; } 

and add float:right ul

div#header ul{float:right;} 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

css - Firefox for ubuntu renders wrong colors -