html - Simple 2 Block Mobile Navigation -

I'm trying to create a simple navigation that will be serviced on mobile devices where it has a grid like a layout Line has two blocks and 3 rows There are 5 links, so the total number will get weird. Since the number is weird, I am trying to take the entire page instead of the existing page class instead of two links in one line.

Like some very raw drawing:

Or if link 3 is the current page:

< / P>

At this time I have a basic 5 link list. I here is HTML:

  & lt; Nav id = "primary_nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; a '. $ This- & gt; GetCurrentPage ("Contact"). 'Href = "contact" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; a '. $ This- & gt; Go to page ("Portfolio"). 'Href = "portfolio" & gt; Portfolio & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; a '. $ This- & gt; GetCurrentPage ("Resume"). 'Href = "resume" & gt; Resume & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; a '. $ This- & gt; Received page ("Bio") 'Href = "bio" & gt; Bio & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; a '. $ This- & gt; Received page ("index"). 'Href = "home" & gt; Home and lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;   
 CSS:  
  #primary_nav ul {list-style: none; Background: # 1C1C1C; Padding: 5px 0; } #primary_nav li {display: block; Color: #fff; Text-decoration: None; font-weight: bold; Text-transform: uppercase; Alphabets: 0.1em; Alphabets: 0.1em; Line-height: 2 AM; Height: 3 AM; Border bottom: 1px solid # 383838; } #primary_nav li: The last child is a {border-down: none; } #primary_nav li a: Hover, #Primary_NV li a: Focus {Color: # 1C1C1C; Background: #ccc; Forget javascript, you can do this with css alone (no fancy css3).    
 
 
 Here's the HTML ...  
 < Code> & lt; Nav id = "primary_nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "contact" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "selected" & gt; & Lt; A href = "portfolio" & gt; Portfolio & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "start over" & gt; Resume & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "bio" & gt; Bio & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "home" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; Line   
 ... and here's the CSS ...  
  # primary_nav {status: relative; Text align: center; } #primary_nav li {float: left; Width: 50%; } #primary_nav li: nth-child (-n + 3) {margin-down: 40px; / * Must match the height set on "Primary_NVA" * /} #primary_nav Selected {status: absolute; Top: 40px; / * Should set the height to "Primary_NV A" * / width: 100%; } #primary_nav {display: block; -MOZ Box-Size: border-box; Box-size: border-box; Padding: 5px 10px 6px; Limit: 1 px solid # aaaa; Height: 40px; }   
 one ???? You have to add  class = "selected"  on the link that refers to the currently selected page.  
 See it in action at