Question

我有问题。我无法创建可投放菜单。 https://probapro2.blogspot.com/ 我在菜单1上工作，但我不知道要添加什么来使下拉菜单向右移动。

<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css' />

<div class="nav">
  <ul class="menu" id="menu">
    <li> <a href="https://probapro2.blogspot.com/">home</a> </li>
    <li class=""> <a class="drop-ctg" href="#">category</a>
      <ul style="overflow: hidden; display: block; height: 0px; z-index: 1072; opacity: 0;">
        <li> <a href="#">Category 1</a> </li>
        <li> <a href="#">Category 2</a> </li>
        <li> <a href="#">Category 3</a> </li>
        <li> <a href="#">Category 4</a> </li>
      </ul>
    </li>
    <li class="">
      <a href="#">Menu 1</a>
      <ul style="overflow: hidden; display: block; height: 0px; z-index: 1069; opacity: 0;">
        <li class="dir">
          <a href="#">Menu 2</a>
          <ul style="overflow: hidden; display: block; height: 0px; z-index: 1070; opacity: 0;">
            <li style="margin-left:50px;"> <a href="#">Menu 3</a> </li>
            <li> <a href="#">Menu 3</a> </li>
            <li> <a href="#">Menu 3</a> </li>
          </ul>
        </li>
        <li class=" "> <a href="#">Menu 2</a> </li>
        <li> <a href="#">Menu 2</a> </li>
        <li> <a href="#">Menu 2</a> </li>
      </ul>
    </li>
    <li> <a href="#">Menu 2</a> </li>
    <li> <a href="#">Menu 3</a> </li>
    <li> <a href="#">Menu 4</a> </li>
    <li> <a href="https://probapro2.blogspot.com/404">404 Error Page</a> </li>
  </ul>
</div>

JS小提琴在这里：https://jsfiddle.net/0ugodkb3/2

我想使菜单1具有一个带有菜单2的可放置菜单，而在第一个菜单2上，我要显示菜单3。

Answer 1

您可以将css规则transform用于translate值，如下所示：

*{
  margin:0;
  padding:0;
  outline:0;
}
.nav {
  width:950px;
  height:auto;
  border-bottom:1px solid #eee;
  margin:10px auto 5px;
  display:inline-block;
}
.menu {
  width:auto;
  list-style:none;
  font:$pagenavifont;
  text-align:center;
  margin:0 auto;
}
.menu a {
  float:left;
  color:#999;
  text-decoration:none;
  text-transform:uppercase;
  width:auto;
  line-height:36px;
  padding:0 20px;
}
.menu a:hover,li.menuhover a{
  color:#111;
}
.menu li {
  position:relative;
  float:left;
  width:auto;
}
.menu li:last-child {
  background:none;
}
.menu ul{
  display:none;
  position:absolute;
  top:36px;
  left:0;
  background:#fbfbfb;
  display:none;
  list-style:none;
}
.menu ul li{
  float:none;
  border-top:1px solid #e3e3e3;
  border-right:1px solid #e3e3e3;
  border-left:1px solid #e3e3e3;
  width:auto;
  background:none;
}
.menu ul li:last-child {
  border-bottom:1px solid #e3e3e3
}
.menu ul li a{
  float:none;
  display:block;
  background:none;
  line-height:36px;
  min-width:137px;
  width:auto;
  text-align:left;
  padding-left:10px;
  color:#444;
}
.menu ul li a:hover{
  background:#fdfdfd;
  color:#777;
}

.menu > li > ul {
  display: none;
}


.menu > li > ul > li > ul {
  transform: translate(100%,0);
  display: none;
  margin-top: -37px;
}

.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
  display: block;
}

<div class="nav">
  <ul class="menu">
    <li>
      <a href="https://probapro2.blogspot.com/">home</a>
    </li>
    <li class="">
      <a class="drop-ctg" href="#">category</a>
      <ul>
        <li>
          <a href="#">Category 1</a>
        </li>
        <li>
          <a href="#">Category 2</a>
        </li>
        <li>
          <a href="#">Category 3</a>
        </li>
        <li>
          <a href="#">Category 4</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 1</a>
      <ul>
        <li class="dir">
          <a href="#">Menu 2</a>
          <ul>
            <li>
              <a href="#">Menu 3</a>
            </li>
            <li>
              <a href="#">Menu 3</a>
            </li>
            <li>
              <a href="#">Menu 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Menu 2</a>
        </li>
        <li>
          <a href="#">Menu 2</a>
        </li>
        <li>
          <a href="#">Menu 2</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Menu 2</a>
    </li>
    <li>
      <a href="#">Menu 3</a>
    </li>
    <li>
      <a href="#">Menu 4</a>
    </li>
    <li>
      <a href="https://probapro2.blogspot.com/404">404 Error Page</a>
    </li>
  </ul>
</div>

最主要的是在定义嵌套菜单的显示规则时使用>选择器。这就是我添加到您的CSS代码中的全部内容：

.menu > li > ul {
  display: none;
}

/* Position for the 3rd level menu */
.menu > li > ul > li > ul {
  transform: translate(100%,0);
  display: none;
  margin-top: -37px;
}

.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
  display: block;
}

Answer 2

制作下拉菜单需要注意一些事项。听起来您正在尝试制作一个下拉菜单以打开嵌套菜单。

每个弹出菜单都需要：

1）知道正在打开菜单的父项的位置，以知道应将其附加在何处。

2）根据用户在浏览器/屏幕上的位置，计算出导航栏应弹出的位置

您需要将导航栏添加到要打开的菜单标题的右侧。我不确定您的限制是什么，但是有一些普通的js选项：

https://gomakethings.com/how-to-insert-an-element-after-another-one-in-the-dom-with-vanilla-javascript/

您可以使用，也可以同时使用position: relative;和position: fixed;来将嵌套菜单添加到其父项的右侧。

我强烈建议您考虑创建自定义的嵌套下拉菜单是否适合您。有很多选择经过时间的考验。通常，这些还可以让您设置菜单标题的样式，也可以是子样式。

让我知道您是否还有其他问题：）

如何制作可放置菜单

2 个答案: