Question

我创建了一个带有ul / li标签的嵌套菜单，我想将第二个和第三个子子菜单水平对齐到第一个子菜单。

在视觉上，我有这个：http://i.imgur.com/vGtPtft.png 我想要这个：http://i.imgur.com/wcqw3TA.png

CSS / HTML：

 body {
  background-color: #000;
  font-size: 1.6vw;
  color: #FFF;
}
div#header {
  width: 65vw;
  margin-left: auto;
  margin-right: auto;
}
#nav {
  font-size: 1.4em;
  white-space: nowrap;
  position: absolute;
}
#nav ul {
  display: inline-table;
  list-style-type: none;
  margin: 0px;
  border-style: none;
  padding: 0px;
}
#nav ul li {
  display: table-cell;
}
#nav ul li a {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 5px;
  border-left-style: solid;
  border-left-width: 7px;
  border-color: #FFF;
  color: #FFF;
  text-decoration: none;
}
#nav ul li .active {
  color: #F00;
  border-left-color: #F00;
}
#nav ul li a:hover {
  color: #F00;
  border-color: #F00;
}
#nav ul li ul {
  position: absolute;
  display: none;
}
#nav ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
  display: none;
}
#nav ul li:hover ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 0.85em
}

<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div id="header">
    <div id="nav">
      <ul>
        <li><a href="#" class="active">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>

          <ul>

            <li><a href="#">Submenu 1</a>

              <ul>
                <li><a href="#">Subsubmenu 1</a>
                </li>
                <li><a href="#">Subsubmenu 2</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 2</a>

              <ul id="sub2">
                <li><a href="#">Subsubmenu 3</a>
                </li>
                <li><a href="#">Subsubmenu 4</a>
                </li>
                <li><a href="#">Subsubmenu 5</a>
                </li>
                <li><a href="#">Subsubmenu 6</a>
                </li>
                <li><a href="#">Subsubmenu 7</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 3</a>

              <ul id="sub3">
                <li><a href="#">Subsubmenu 8</a>
                </li>
                <li><a href="#">Subsubmenu 9</a>
                </li>
                <li><a href="#">Subsubmenu 10</a>
                </li>
              </ul>

            </li>

          </ul>

        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
        </li>
        <li><a href="#">Menu 5</a>
        </li>
        <li><a href="#">Menu 6</a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

我想出的唯一想法是通过添加以下内容手动移动边距：

#nav ul li:hover ul li:hover ul#sub2  {
	margin-left: -10.8vw
}

#nav ul li:hover ul li:hover ul#sub3 {
	margin-left: -21.5vw
}

我认为使用“vw”作为单位是一个好主意，因为我有一个16：9的显示器（分辨率：1366x768），我认为它可以在其他16：9显示器上进行缩放，但是对其他分辨率的测试表明该子显示器-submenu's更左侧或者仍然位于第一个子菜单的右侧。是否可以通过微小的修改来处理这个问题，或者我是否必须通过使用重写整个事物，例如像素的固定大小？

Answer 1

您可以尝试添加此内容：

#nav ul li ul li ul {
  left: 0;
}

演示 - http://jsfiddle.net/d8hrcxmr/2/

如果您需要所有子菜单显示在最左侧，请查看此演示 - http://jsfiddle.net/d8hrcxmr/1/

#nav ul li ul {
  left: 0;
}

我认为这样可以更好地解决子菜单在右侧被切断的问题（想象一下，菜单上有很长的子菜单）。

Answer 2

您已使用left将子菜单移动到其包含元素的左边缘。以下是您所需结果的工作示例

＆＃13;

body {
  background-color: #000;
  background-position: center;
  background-repeat: repeat;
  font-family: 'Open Sans Condensed', Calibri, sans-serif;
  font-size: 1.6vw;
  color: #FFF;
}
div#header {
  width: 65vw;
  margin-left: auto;
  margin-right: auto;
}
#nav {
  font-size: 1.4em;
  white-space: nowrap;
  position: absolute;
}
#nav ul {
  display: inline-table;
  list-style-type: none;
  margin: 0px;
  border-style: none;
  padding: 0px;
}
#nav ul li {
  display: table-cell;
}
#nav ul li a {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 5px;
  border-left-style: solid;
  border-left-width: 7px;
  border-color: #FFF;
  color: #FFF;
  text-decoration: none;
}
#nav ul li .active {
  color: #F00;
  border-left-color: #F00;
}
#nav ul li a:hover {
  color: #F00;
  border-color: #F00;
}
#nav ul li ul {
  position: absolute;
  display: none;
}
#nav ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
  display: none;
}
#nav ul li:hover ul li:hover ul {
  display: block;
  left: 0;
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 0.85em
}

＆＃13;

<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

  <div id="header">
    <div id="nav">
      <ul>
        <li><a href="#" class="active">Menu 1</a>
        </li>
        <li><a href="#">Menu 2</a>

          <ul>

            <li><a href="#">Submenu 1</a>

              <ul>
                <li><a href="#">Subsubmenu 1</a>
                </li>
                <li><a href="#">Subsubmenu 2</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 2</a>

              <ul id="sub2">
                <li><a href="#">Subsubmenu 3</a>
                </li>
                <li><a href="#">Subsubmenu 4</a>
                </li>
                <li><a href="#">Subsubmenu 5</a>
                </li>
                <li><a href="#">Subsubmenu 6</a>
                </li>
                <li><a href="#">Subsubmenu 7</a>
                </li>
              </ul>

            </li>

            <li><a href="#">Submenu 3</a>

              <ul id="sub3">
                <li><a href="#">Subsubmenu 8</a>
                </li>
                <li><a href="#">Subsubmenu 9</a>
                </li>
                <li><a href="#">Subsubmenu 10</a>
                </li>
              </ul>

            </li>

          </ul>

        </li>
        <li><a href="#">Menu 3</a>
        </li>
        <li><a href="#">Menu 4</a>
        </li>
        <li><a href="#">Menu 5</a>
        </li>
        <li><a href="#">Menu 6</a>
        </li>
      </ul>
    </div>
  </div>

</body>

</html>

＆＃13;

Answer 3

这很简单。只需添加 #nav ul li ul li ul { left: 0; }到您的css代码。

body {
  background-color: #000;
  font-size: 1.6vw;
  color: #FFF;
}
div#header {
  width: 65vw;
  margin-left: auto;
  margin-right: auto;
}
#nav {
  font-size: 1.4em;
  white-space: nowrap;
  position: absolute;
}
#nav ul {
  display: inline-table;
  list-style-type: none;
  margin: 0px;
  border-style: none;
  padding: 0px;
}
#nav ul li {
  display: table-cell;
}
#nav ul li a {
  margin: 0px 0px 0px 20px;
  padding: 0px 0px 0px 5px;
  border-left-style: solid;
  border-left-width: 7px;
  border-color: #FFF;
  color: #FFF;
  text-decoration: none;
}
#nav ul li .active {
  color: #F00;
  border-left-color: #F00;
}
#nav ul li a:hover {
  color: #F00;
  border-color: #F00;
}
#nav ul li ul {
  position: absolute;
  display: none;
}
#nav ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
}
#nav ul li:hover ul li ul {
  display: none;
}
#nav ul li:hover ul li:hover ul {
  display: block;
  margin: 0px;
  padding: 5px 0px 0px;
  font-size: 0.85em
}
#nav ul li ul li ul {
  left: 0;
}

CSS子子菜单的水平对齐？

3 个答案: