如何在垂直CSS菜单的左侧或右侧放置一个下拉菜单？

Question

我已经写了一个基本的CSS菜单-垂直的导航栏，旨在放置在侧面。 但是，除了当前的设计之外，我还希望能够将项目2.0的下拉列表放到父对象的左侧或右侧。

做到这一点的最佳方法是什么？

我还包括当前代码的JSFiddle链接： https ://jsfiddle.net/eagqxnaz/1/

<ul class="navbar">
  <li><a href="#">1.0</a></li>
  <li><a href="#">2.0</a>
    <ul>
      <li><a href="/?">2.1</a></li>
      <li><a href="/?">2.2</a></li>
      <li><a href="/?">2.3</a></li>
      <li><a href="/?">2.4</a></li>
    </ul>         
  </li>
</ul>

.navbar li  {
    width: 150px; 
    text-align: center;
    list-style: none;
    background-color: #a1a0a5;
}

.navbar a {                         
    color: #FFF;
    display: block;
    padding: 8px 4px;
}

.navbar a:hover {
    background-color: #5a5775;
}

.navbar li ul {
    display: none;
}               

.navbar li:hover ul     {
    position: absolute;
    display: block;
    left: 0;
}

Answer 1

尝试将顶部和左侧放置到“ .navbar li：hover ul ”，它将显示以下屏幕截图所示的值

码：

   .navbar li   {
    width: 150px; 
    text-align: center;
    list-style: none;
    background-color: #a1a0a5;
    position: relative;
}

.navbar a   {                           
        color: #FFF;
        display: block;
    padding: 8px 4px;
}

.navbar a:hover {
    background-color: #5a5775;
}

.navbar li ul   {
  position: absolute;
    display: none;
  left: 100%;
  padding: 0;
  top: 0;
}               

.navbar li:hover > ul   {
    display: block;
}

希望能帮助到你。

Answer 2

I think this would be a better solution:

Just update your css as given below :

.navbar {
  margin: 0;
  padding: 0;
}

.navbar li {
  width: 150px;
  text-align: center;
  list-style: none;
  background-color: #a1a0a5;
  position: relative;
}

.navbar a {
  color: #FFF;
  display: block;
  padding: 8px 4px;
}

.navbar a:hover {
  background-color: #5a5775;
}

ul.navbar li ul {
  margin: 0;
  padding: 0;
  top: 0;
  left: 100%;
  position: absolute;
  display:none;
}

.navbar li:hover ul {
  display:block;
}

Hope this is helpful.