html - float 到右 Angular (最好在光标旁边)的盒装边框的 CSS 样式

Question

根据标题，我认为我的代码几乎可以正常工作，但由于对 CSS 的了解有限，我犯了愚蠢的错误/假设。非常感谢任何解释方面的帮助。

fiddle 链接是here

ul {
  padding: 0;
  list-style: none;
  background: #ffffff;
}
ul li {
  color: #0000ff;
  display: inline-block;
  position: relative;
  line-height: 21px;
  text-align: left;
}
ul li a {
  display: inline-block;
  padding: 8px 25px;
  background-color: #FFFFFF;
  text-decoration: none;
  width: 140px;
}
ul li a:hover {
  background-color: #FFFFFF;
}
ul li ul.dropdown {
  min-width: 125px;
  /* Set width of the dropdown */
  background: #f2f2f2;
  display: none;
  position: absolute;
  z-index: 999;
  left: 500;
}
ul li:hover ul.dropdown {
  border: 2px solid #0000ff;
  display: block;
  padding-left: 50px;
  background-color: #ffffff;
}
ul li:hover a:hover ul.dropdown {}

<div id="mylinks">
  <ul id="mylists" href="#">
    <li><a href="#">MY LIST MENU</a>

      <ul class="dropdown">
        <li><a href="#"><span id="level1" onclick="location.href='http://www.google.co.uk/'" title="Go Google"> First item<span> </a> 
        </li>
        <li><a href="#"> Second item </a> 
        </li>
      </ul>
    </li>
  </ul>
</div>

Answer 1

您需要为下拉列表设置一个正确的位置:

ul li ul.dropdown {
  min-width: 125px;
  background: #f2f2f2;
  display: none;
  position: absolute;
  z-index: 999;
  left: 150px;
  top: 0;
}

请注意，left 设置为 150px，top 设置为 0。