title: css dropdown menu alignment
body: <p>I have created a dropdown menu using CSS based, however when you hover over the parent list item, the unordered list displays anchored to the left of the parent item. I would like it to be central to them, but I cant figure out how.</p>
  
  <p><a href="http://jsfiddle.net/jspring/LtVaq/" rel="nofollow">http://jsfiddle.net/jspring/LtVaq/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;ul class="ulRight"&gt;
  &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;This Is&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Your Account&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Sub Menu&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Now!&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.ulRight {
      /*To float UL List to right*/
      list-style:none outside none !important;
      position:absolute;
      right:10px;
      top:0px;
      display:inline-table;
      z-index:1000;
  }
  .ulRight ul:after {
      content:"";
      clear:both;
      display:block;
  }
  .ulRight &gt; li {
      display:inline;
      color:#BBBBBB;
      width:auto;
  }
  .ulRight li &gt; ul {
      vertical-align:middle;
      z-index:1001;
      display:none;
      position:relative;
      margin:auto;
      top:40px;
      width:inherit;
  }
  .ulRight li:hover &gt; ul {
      display:block;
  }
  .ulRight &gt; li {
      margin:0 5px 0 5px;
  }
  .ulRight &gt; li {
      float:left;
  }
  .ulRight &gt; li:hover {
      background:#FFF;
      border:1px solid #CCCCCC;
  }
  .ulRight a {
      text-decoration:none;
      font-weight:normal;
      display:block;
      padding:10px;
  }
  .ulRight li:hover a {
      font-weight:bold;
      color:#80B5E9;
      text-align:center;
  }
  .ulRight li &gt; ul {
      background:#FFF;
      border-radius:0px;
      padding:0px;
      position:absolute;
      box-shadow:0px 0px 9px rgba(0, 0, 0, 0.15);
      border:1px solid #CCCCCC;
  }
  .ulRight li &gt; ul &gt; li {
      list-style:none;
      float:none;
      border-top:1px solid #CCCCCC;
      border-bottom:1px solid #CCCCCC;
      position:relative;
  }
  .ulRight li &gt; ul a {
  }
  .ulRight li &gt; ul a:hover {
      color:#FFF;
      background:#303030;
  }
  </code></pre>
  
  <p>Any help would be much appreciated!</p>