[分享]css做下拉菜单在左手

CSS做下拉菜单是常见的前端开发技术，之前我们一直习惯在鼠标悬停时出现下拉菜单，但是也有一些网站会将下拉菜单放在左手边，下面我们来看一下如何实现。 Home Services Web Design...

CSS做下拉菜单是常见的前端开发技术，之前我们一直习惯在鼠标悬停时出现下拉菜单，但是也有一些网站会将下拉菜单放在左手边，下面我们来看一下如何实现。

<ul>
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">Services</a>
    <ul>
      <li><a href="#">Web Design</a></li>
      <li><a href="#">SEO</a></li>
      <li><a href="#">Social Media Marketing</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a></li>
</ul>
 
<style>
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
  }
  li ul {
    display: none;
    position: absolute;
    left: -40px; /* 定位到左边 */
    top: 20px;
  }
  li:hover ul {
    display: block;
  }
  li ul li {
    display: block;
  }
</style> 

首先，我们需要使用HTML代码构建一个标准的无序列表，然后再使用CSS对其进行样式调整。其中，我们设置了ul和li的一些基础样式，比如去除默认样式、清除边距等等。

接着，我们将每个li设置为inline-block，使其在同一行内排列。同时，我们给每个li设置了一个position: relative，这样我们就可以在其中嵌套一个子元素ul，并用position: absolute将其定位到左边。注意，我们还需要设置left: -40px，使下拉菜单与上层菜单有一定的间隔。

最后，我们使用:hover选中li，并将下拉菜单的display属性由none改为block，使其在鼠标悬停时显示。此外，我们还需要设置li ul li的display属性为block，使每一个下拉菜单项占据一行。

通过以上几步，我们就可以轻松实现下拉菜单在左手边的效果了。这种做法不仅能提升网站的视觉效果，而且还可以使用户感到更加舒适和自然。