0

I am trying to recreate this nav menu in css - but I am having a hard time with getting bit rows to justify to each other correctly.

I'm not sure is formatting it as an li element is best - or should I try JS Buttons.

Any advice is appreciated.

I tried to put a picture up - but it doesn't look like a have enough reputation ponts - but just imagine all the buttons aligned justified.

I have a JS fiddle up here

<nav id="access" class="group" role="navigation">
<ul id="two">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">EDUCATION</a></li>
<li><a href="">HISTORY</a></li>
<li><a href="">ALUMNI</a></li>
</ul>


<ul id="one">
<li><a href="">THE PHILLAPINES</a></li>
<li><a href="">INFORMATION</a></li>
<li><a href="">GERMANY</a></li>
<li><a href="">LONDON</a></li>
<li><a href=" ">Contact Us</a></li>
</ul>
</nav>


http://jsfiddle.net/mjkessel/jK26n/2/
Michael K.
  • 3
  • 1
  • 6

1 Answers1

0

For #access ul li add float: left; and for #one li and #two-li replace margin-right with margin-left and now try to combine. If you want to have all li with the same width set width for #access ul li

sylwia
  • 381
  • 1
  • 8
  • I tried what you suggested - but it is still not justified. I am trying to match a picture - the picture looks like each element is a different width. – Michael K. May 19 '13 at 18:47
  • I really researched this - but couldn't find a solution. I wound up measuring each button in photoshop and have each button a separate id with it's own width and height. A pain - but at least it look justified now. – Michael K. May 29 '13 at 22:49