带下拉菜单的 CSS 水平菜单到带下拉菜单的垂直菜单答案

【问题标题】：css horizontal menu with drop-down to vertical menu with drop-down带下拉菜单的 CSS 水平菜单到带下拉菜单的垂直菜单
【发布时间】：2015-07-07 06:30:40
【问题描述】：

我想将带有下拉菜单的水平菜单更改为带有浮动在右侧或左侧的垂直菜单以及所有子菜单。我假设这是一个简单的解决方法，但我可以弄清楚。谢谢

这是一个水平工作的工作示例：http://codepen.io/anon/pen/RPMZJV

这是 CSS：

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    margin: 0; padding: 0; border: 0;
}

body {
    background: #909eab url(bg.png);
    font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}

nav {
    margin: 100px auto; 
    text-align: center;
}

nav ul ul {
    display: none;
}

    nav ul li:hover > ul {
        display: block;
    }


nav ul {
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  
    list-style: none;
    position: relative;
    display: inline-table;
}
    nav ul:after {
        content: ""; clear: both; display: block;
    }

    nav ul li {
        float: left;
    }
        nav ul li:hover {
            background: #4b545f;
            background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
            background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
        }
            nav ul li:hover a {
                color: #fff;
            }

        nav ul li a {
            display: block; padding: 25px 40px;
            color: #757575; text-decoration: none;
        }


    nav ul ul {
        background: #5f6975; border-radius: 0px; padding: 0;
        position: absolute; top: 100%;
    }
        nav ul ul li {
            float: none; 
            border-top: 1px solid #6b727c;
            border-bottom: 1px solid #575f6a; position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;
                color: #fff;
            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

这里是html：

<html>

<head>
  <meta charset="utf-8" />
  <title>CSS Dropdown Menu</title>

  <link href="style.css" rel="stylesheet" />

</head>

<body>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Tutorials</a>
        <ul>
          <li><a href="#">Photoshop</a>
           <ul>
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>

          </li>
          <li><a href="#">Illustrator</a></li>
          <li><a href="#">Web Design</a>
            <ul>
              <li><a href="#">HTML</a></li>
              <li><a href="#">CSS</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">Articles</a>
        <ul>
          <li><a href="#">Web Design</a></li>
          <li><a href="#">User Experience</a></li>
        </ul>
      </li>
      <li><a href="#">Inspiration</a></li>
    </ul>
  </nav>

</body>

</html>

【问题讨论】：

您需要在所有级别或仅在第一级别上使用它？
所有级别。如果可能的话，我希望有一个“无限”的选择。我现在只是在几个级别上进行测试。
没问题 :) 不客气

标签： html css drop-down-menu

【解决方案1】：

如果我理解正确，您会想要从列表项中删除您的float: left，为您的导航设置一个固定的，然后将下拉菜单的位置更改为您想要的位置。

如 cmets 中所述，要使子菜单与用户悬停的菜单项对齐，您需要将其设置为 position: relative，以便子元素的绝对定位相对于 @ 987654324@元素。

nav ul > li {
  position: relative;
}

Updated Codepen

【讨论】：

谢谢。这是非常接近的。我希望在它们突出显示的按钮旁边有子菜单。这样，他们只需将鼠标滑过，子菜单就会与刚刚突出显示的按钮水平。
因此您需要将<li> 设置为相对位置，以便子菜单的位置相对于父菜单。我已经更新了我的代码笔
你明白了。砰！非常感谢。你是男人。等等..不，你是那个人！ :)

【解决方案2】：

您需要移除列表项的浮动并重新定位二级菜单：

      nav ul li {
    /*float: left;*/ <<<< removing float left
}

    ....


    Bbackground: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #757575; text-decoration: none;
    }


nav ul ul {
    background: #5f6975; border-radius: 0px; padding: 0;
    position: absolute; top: 30%;left:92%;//<<< setting new position for second ul
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a; position: relative;
    }
        nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4b545f;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

【讨论】：