title: Trying to make a navigation bar with an Inline UL
body: <p>Basically I am trying to make navigation bar in topNav div which has the website banner set as the background, so I need my nav bar to go on the bottom of the div. I have searched for a way to do this but everything I see says for the containing div have position:relative and the div with the UL position:absolute; bottom:0px; left:0px;. But what happens is all of my links get piled up. Here is my current Code</p>
  
  <p>CSS</p>
  
  <pre><code>.topNav{
      background-image:url(includes/media/banners/hwarang_banner.gif);
      backface-visibility:visible;
      height:135px;
      width:100%;
      background-size:50%;
      background-repeat:no-repeat;
      position:relative;
  }
  .topNav ul{
      position:relative;
  }
  .topNav li{
      position:absolute;
      bottom:0px;
      left:0px;
      display:inline;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="topNav"&gt;
  &lt;a href="#login" id="login"&gt;Login&lt;/a&gt;
  &lt;span style="color:rgba(238,255,0,1.00); bottom:0; right:0; position:absolute"&gt;Alpha Version 0..3&lt;/span&gt;
  &lt;ul class="topNav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#calendar"&gt;&lt;span&gt;Calendar&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#classes"&gt;&lt;span&gt;Your Classes&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#event"&gt;&lt;span&gt;Event&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#insurance"&gt;&lt;span&gt;Insurance&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#purchase"&gt;&lt;span&gt;Purchase&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#family"&gt;&lt;span&gt;Family&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks in Advance</p>