如何创建纯 CSS（垂直）下拉菜单？

Question

下午好，

我当前的任务是为网站创建几个样式表。其中一种网站样式要求我创建一个下拉菜单，但是我根本不允许更改 HTML 代码，所以基本上我被要求仅使用 CSS 创建一个类似下拉菜单的菜单。

以下是我必须以下拉菜单形式显示的 HTML 代码：

<div id="global-nav">
<ul>
<li><a href="#products">Products</a>
  <ul>
  <li><a href="#widgets">Widgets</a></li>
  <li><a href="#sites">Sites</a></li>
  <li><a href="#gadgets">Gadgets</a></li>
  </ul>
</li>
</ul>

但也有不同的要求： 每个列表项前面不应有任何点或圆圈。

我想知道是否可以仅使用 CSS 来完成此任务。 有什么办法可以用 CSS 做到这一点吗？

Answer 1

水平扩展的垂直菜单

jsBin demo

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  width:200px;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  background:#667;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  position:absolute;
  left:0%;
  top:0;
  width:100%;
  visibility:hidden;
  opacity:0;
  transition: transform 0.2s;
  transform: translateX(50px);
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  left:100%;
  visibility:visible;
  opacity:1;
  transform: translateX(0px);
}

<nav class="vertical">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

垂直菜单（仅限移动设备）

此菜单可能最适合移动设备（较小屏幕的 CSS），否则显示/隐藏会影响用户体验

jsBin 演示

*{padding:0;margin:0;}
body{font:16px/1 sans-serif}


/*VERTICAL MENU*/
nav.vertical{
  position:relative;
  background:#667;
}

/* ALL UL */
nav.vertical ul{
  list-style: none;
}
/* ALL LI */
nav.vertical li{
  position:relative;
}
/* ALL A */
nav.vertical a{
  display:block;
  color:#eee;
  text-decoration:none;
  padding:10px 15px;
  transition:0.2s;
}
/* ALL A HOVER */
nav.vertical li:hover > a{
  background:#778;
}

/* INNER UL HIDE */
nav.vertical ul ul{
  background:rgba(0,0,0,0.1);
  padding-left:20px;
  transition: max-height 0.2s ease-out;
  max-height:0;
  overflow:hidden;
}
/* INNER UL SHOW */
nav.vertical li:hover > ul{
  max-height:500px;
  transition: max-height 0.25s ease-in;
}

<nav class="vertical">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services +</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Products +</a>
      <ul>
        <li><a href="#">Widgets</a></li>
        <li>
          <a href="#">Sites +</a>
          <ul>
            <li><a href="#">Site 1</a></li>
            <li><a href="#">Site 2</a></li>
          </ul>
        </li>
        <li><a href="#">Gadgets +</a>
          <ul>
            <li><a href="#">Gadget 1</a></li>
            <li><a href="#">Gadget 2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Answer 2

只是上述出色解决方案的稍微增强版本。

<style type="text/css">

#global-nav {
    width: 121px;
    float: left;
    background: #e8eef4;
}

#global-subnav {
    width: 121px;
    background: #09C;
}

#global-nav a {
    color: #034af3;
    cursor: pointer;
    display: block;
    height: 40px;
    line-height: 40px;   
    text-indent: 10px;               
    text-decoration:none;
    font-weight: bold;
    width: 100%;
}

#global-nav ul{
    background: yellow;
    padding: 0;
    margin: 0;
}

#global-subnav ul{
    background: orangered;
    position: relative;
    top: -10px;
    left: 40px;
}

#global-nav li{
    list-style: none;   
    border-bottom: #5C87B2 solid;
    border-width: 3px;
}

#global-nav ul ul li{
    display:none;
}

#global-nav li:hover {
    background: #fff;
}

#global-nav li:hover ul li{
    display:block;
}

</style>





<div id="global-nav">
    <ul>
        <li><a href="#One">One</a>
            <div id="global-subnav">
                <ul>
                    <li><a href="#A">A</a></li>
                    <li><a href="#B">B</a></li>
                    <li><a href="#C">C</a></li>
                </ul>
            </div>
        </li>
        <li><a href="#Two">Two</a>
            <div id="global-subnav">
                    <ul>
                        <li><a href="#1">1</a></li>
                        <li><a href="#2">2</a></li>
                        <li><a href="#3">3</a></li>
                    </ul>
            </div>
        </li>
    </ul>
</div>

Answer 3

上一篇文章的代码是错误的。

文档中不能有超过 1 个同名 ID，因此如果使用上面的代码，则需要将

ID="global-subnav" 更改为 class ="global-subnav"

，然后将 CSS 从

#global-subnav 更改为 .global-subnav