title: Right align menu control inside a div tag
body: <p>When a new web application project in ASP.NET created, it comes with a NavigationMenu in site.master page which has 2 elements (Home &amp; About), Please let me know how to align this menu to the right. </p>
  
  <p>Here it's screenshot &amp; code:</p>
  
  <p><img src="https://i.stack.imgur.com/85VS6.jpg" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="clear hideSkiplink"&gt;
      &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false"
          IncludeStyleBlock="False" Orientation="Horizontal"&gt;
          &lt;Items&gt;
              &lt;asp:MenuItem NavigateUrl="~/Default.aspx" Text="AnaSayfa"/&gt;                 
              &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="Hakkında" /&gt;
          &lt;/Items&gt;
      &lt;/asp:Menu&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the rendered html code:</p>
  
  <pre><code>&lt;div style="float: left;" id="NavigationMenu" class="menu"&gt;
      &lt;ul style="width: auto; float: left; position: relative;" class="level1 static" role="menubar"
          tabindex="0"&gt;
          &lt;li style="float: left; position: relative;" class="static" role="menuitem"&gt;&lt;a class="level1 static"
              tabindex="-1" href="Default.aspx"&gt;Ana Sayfa&lt;/a&gt;&lt;/li&gt;
          &lt;li style="float: left; position: relative;" class="static" role="menuitem"&gt;&lt;a class="level1 static"
              tabindex="-1" href="About.aspx"&gt;Hakkında&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.hideSkiplink
  {
      background-color:#3a4f63;
      width:100%;
  }
  
  div.menu
  {
      padding: 4px 0px 4px 8px;
      text-align: right;
  }
  
  div.menu ul
  {
      list-style: none;
      margin: 0px;
      padding: 0px;
      width: auto;
  }
  
  div.menu ul li a, div.menu ul li a:visited
  {
      background-color: #465c71;
      border: 1px #4e667d solid;
      color: #dde4ec;
      display: block;
      line-height: 1.35em;
      padding: 4px 20px;
      text-decoration: none;
      white-space: nowrap;
  }
  
  div.menu ul li a:hover
  {
      background-color: #bfcbd6;
      color: #465c71;
      text-decoration: none;
  }
  
  div.menu ul li a:active
  {
      background-color: #465c71;
      color: #cfdbe6;
      text-decoration: none;
  }
  </code></pre>