css 带下拉菜单的水平菜单到带下拉菜单的垂直菜单

Question

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

这里是一个横向工作的例子：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>

Answer 1

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

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

nav ul > li {
  position: relative;
}

Updated Codepen

Answer 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;
}

css 带下拉菜单的水平菜单到带下拉菜单的垂直菜单

css horizontal menu with drop-down to vertical menu with drop-down

html

css

drop-down-menu