title: CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options
body: <p>I have a menu working fairly well but can't figure out how to make the 2nd level submenu display horizontally instead of vertically. The whole menu needs to be only 2 rows, so hovering over the top row should display the submenu options horizontally on the 2nd row. See it <a href="http://amritanet.com/CSSMenu/test2.aspx" rel="nofollow noreferrer">here</a> live.</p>
  
  <p>desired:</p>
  
  <pre><code>option1    option2    option3  
                |
             submenu_option1 submenu_option2
  </code></pre>
  
  <p>instead of:</p>
  
  <pre><code>option1    option2    option3
                |
             submenu_option1
                |
             submenu_option2
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul.AspNet-Menu 
  {
      position: relative;
  }
  
  
  ul.AspNet-Menu, 
  ul.AspNet-Menu ul
  {
      margin: 0;
      padding: 0;
      display: block;
  
  }
  
  ul.AspNet-Menu li
  {
      position: relative;
      list-style: none;
      float: left;
  }
  
  ul.AspNet-Menu li a,
  ul.AspNet-Menu li span
  {
      display: block;
      text-decoration: none;
  }
  
  ul.AspNet-Menu ul
  {
      visibility: hidden;   
      position: absolute;
  }
  
  ul.AspNet-Menu li:hover ul ul,
  ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
  {
      visibility: hidden;
  }
  
  ul.AspNet-Menu li:hover ul,
  ul.AspNet-Menu li li:hover ul,
  ul.AspNet-Menu li li li:hover ul,
  ul.AspNet-Menu li.AspNet-Menu-Hover ul,
  ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
  ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
  {
      visibility: visible;
  }
  
  ul.AspNet-Menu li
  {
      padding:2px 2px 2px 2px;
  }   
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="main-nav2" id="MainMenu"&gt; 
      &lt;div class="AspNet-Menu-Horizontal"&gt; 
              &lt;ul class="AspNet-Menu"&gt; 
                  &lt;li class="AspNet-Menu-Item"&gt; 
                      &lt;a href="/CSSMenu/default.aspx"&gt; 
                          &lt;span&gt; Main&lt;/span&gt;&lt;/a&gt; 
                  &lt;/li&gt; 
                  &lt;li class="AspNet-Menu-Item"&gt; 
                      &lt;a href="/CSSMenu/Reports.aspx"&gt; 
                          &lt;span&gt; Reports&lt;/span&gt;&lt;/a&gt; 
                      &lt;ul&gt; 
                          &lt;li class="AspNet-Menu-Item"&gt; 
                              &lt;a href="/CSSMenu/Snapshot.aspx"&gt; 
                                  Snapshot&lt;/a&gt; 
                          &lt;/li&gt; 
                          &lt;li class="AspNet-Menu-Item"&gt; 
                              &lt;a href="/CSSMenu/Dashboard.aspx"&gt; 
                                  Dashboard&lt;/a&gt; 
                          &lt;/li&gt; 
                      &lt;/ul&gt; 
                  &lt;/li&gt; 
                  &lt;li class="AspNet-Menu-Item"&gt; 
                      &lt;a href="/CSSMenu/Customer.aspx"&gt; 
                          &lt;span&gt; Customer&lt;/span&gt;&lt;/a&gt; 
                  &lt;/li&gt; 
              &lt;/ul&gt; 
      &lt;/div&gt; 
  &lt;/div&gt; 
  </code></pre>
  
  <p>I think it starts to fall apart here:</p>
  
  <pre><code>ul.AspNet-Menu ul
  {
      visibility: hidden;   
      position: absolute;
  }
  </code></pre>
  
  <p>where position is set to absolute. BTW, I'm using Asp.Net Menu control with CSSFriendlyAdapters. </p>
  
  <p>Any tips or help would be greatly appreciated!</p>
  
  <p>Thanks,</p>
  
  <p>Terry</p>