Question

我希望我的第二级菜单直接放在第一级菜单之下，然后在此级别之下的级别向右打开。

我有第二个嵌套菜单正常工作，但我无法弄清楚如何让第三级整齐地向右移动。我现在拥有它的方式重叠。

这是片段，如果有人可以解雇我，我会很感激，谢谢：

#menu-main-menu-container {
  width: 100%;
  position: relative;
  font: 300 16px/16px Lato, Arial; }
  #menu-main-menu-container ul {
    position: relative;
    text-align: center;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0; }
    #menu-main-menu-container ul ul {
      position: absolute;
      display: none;
      margin-top: 15px; }
      #menu-main-menu-container ul ul ul {
        position: absolute;
        right: 0;
        top: 0; }
  #menu-main-menu-container ul li {
    right: 50%;
    background-color: #f4f4f4; }
  #menu-main-menu-container li {
    list-style: none;
    position: relative;
    float: left;
    padding: 15px;
    margin: 0;
    text-transform: uppercase; }
    #menu-main-menu-container li:hover > ul {
      display: block; }
  #menu-main-menu-container a {
    white-space: nowrap;
    text-decoration: none;
    color: blue; }
  #menu-main-menu-container li:hover {
    background-color: blue;
    transition: 1s; }
  #menu-main-menu-container li:hover > a {
    color: white; }

/*# sourceMappingURL=top-nav-menu.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="top-nav-menu.css">
</head>
<body>
<div id="menu-main-menu-container">

    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a>
                    <ul class="sub-menu">
                        <li><a href="#">Hidden Sub Item 1</a></li>
                        <li><a href="#">Hidden Sub Item 2</a></li>
                        <li><a href="#">Hidden Sub Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Item 2</a></li>

                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
</body>
</html>

Answer 1

＆＃13;

#menu-main-menu-container {
  width: 100%;
  position: relative;
  font: 300 16px/16px Lato, Arial; }
  #menu-main-menu-container ul {
    position: relative;
    text-align: center;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0; }
    #menu-main-menu-container ul ul {
    position: absolute;
    display: none;
    margin-top: 15px;
    float: none;
    left: 0px;
    right: 6px;
    }
      #menu-main-menu-container ul ul ul {
            /* position: absolute; */
    /* top: 0; */
    float: none;
    /* left: 0px; */
    left: 0px;
    margin-top: -30px;
    left: 120px;
      
      
      }
  #menu-main-menu-container ul li {
    right: 50%;
    background-color: #f4f4f4; }
  #menu-main-menu-container li {
    list-style: none;
    position: relative;
    float: left;
    padding: 15px;
    margin: 0;
    text-transform: uppercase; }
    #menu-main-menu-container li:hover > ul {
      display: block; }
  #menu-main-menu-container a {
    white-space: nowrap;
    text-decoration: none;
    color: blue; }
  #menu-main-menu-container li:hover {
    background-color: blue;
    transition: 1s; }
  #menu-main-menu-container li:hover > a {
    color: white; }

＆＃13;

<div id="menu-main-menu-container">

    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a>
                    <ul class="sub-menu">
                        <li><a href="#">Hidden Sub Item 1</a></li>
                        <li><a href="#">Hidden Sub Item 2</a></li>
                        <li><a href="#">Hidden Sub Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Item 2</a></li>

                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

＆＃13;

查看此Jsfiddle code了解演示：http://jsfiddle.net/naya4ahs/

将嵌套菜单对齐父嵌套菜单的右侧

1 个答案: