如何指定子菜单 div 的位置并防止菜单 div 改变答案

【问题标题】：How to specify the position of sub-menu div and prevent the menu div changed如何指定子菜单 div 的位置并防止菜单 div 改变
【发布时间】：2016-08-02 19:31:36
【问题描述】：

我按照here 的下拉菜单教程进行操作。

但是当我尝试实现子菜单时，我卡住了。到目前为止，我已经设法制作了这段代码。 HTML：

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <div class="dropdown-list draggable" href="#">Link 1
        <div class="dropdown-sub-list">
          <div class="draggable" href="#">Link 4</div>
          <div class="draggable" href="#">Link 5</div>
          <div class="draggable" href="#">Link 6</div>
          <div class="draggable" href="#">Link 7</div>
        </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 2
    <div class="dropdown-sub-list">
          <div class="draggable" href="#">Link 4b</div>
          <div class="draggable" href="#">Link 5b</div>
          <div class="draggable" href="#">Link 6b</div>
          <div class="draggable" href="#">Link 7b</div>
        </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 3</div>
  </div>
</div>

CSS：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-sub-list {
    display: none;
    position:relative;
    float:left;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content .draggable {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content .draggable:hover{background-color: #f1f1f1}

.dropdown-list:hover .dropdown-sub-list{
    display : block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

这里是 jsfiddle： https://jsfiddle.net/yusrilmaulidanraji/9sdck1z1/3/

我的问题是：

如何将子菜单移动到菜单的右侧？
如何防止因出现子菜单而调整菜单大小？

提前谢谢你。

【问题讨论】：

如果你对位置没问题，那么我认为这是你想要的jsfiddle.net/LeoLion/9sdck1z1/4

标签： html css drop-down-menu menu submenu

【解决方案1】：

Updated Fiddle.

在.dropdown-content .draggable 中添加position: relative（以便下拉菜单可以定位到右侧）
在.dropdown-sub-list 上使用position: absolute。还添加left: 100%（向右移动下拉）； top: 0（向下移动到顶部）

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-sub-list {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content .draggable {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  position: relative;
}
.dropdown-content .draggable:hover {
  background-color: #f1f1f1
}
.dropdown-list:hover .dropdown-sub-list {
  display: block;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

<div class="dropdown" style="float:left;">
  <button class="dropbtn">Left</button>
  <div class="dropdown-content" style="left:0;">
    <div class="dropdown-list draggable" href="#">Link 1
      <div class="dropdown-sub-list">
        <div class="draggable" href="#">Link 4</div>
        <div class="draggable" href="#">Link 5</div>
        <div class="draggable" href="#">Link 6</div>
        <div class="draggable" href="#">Link 7</div>
      </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 2
      <div class="dropdown-sub-list">
        <div class="draggable" href="#">Link 4b</div>
        <div class="draggable" href="#">Link 5b</div>
        <div class="draggable" href="#">Link 6b</div>
        <div class="draggable" href="#">Link 7b</div>
      </div>
    </div>
    <div class="dropdown-list draggable" href="#">Link 3</div>
  </div>
</div>

【讨论】：

对于你的第一点，我试着不把它放在 css 上，它仍然有效。如果我不使用它，你能详细说明一下它的缺点吗？
@YusrilMaulidanRaji - 你是对的，它会起作用，因为位置相对继承自.dropdown。如果没有在任何地方指定，dropdown-sub-list 可能会粘在浏览器的顶部。
尝试删除.dropdown 和.dropdown-content .draggable 中的position: relative
好的，谢谢！我已经尝试了几乎所有的答案，但我最喜欢这个，因为有left: 100%;，所以我不需要指定像素。也因为它有一个解释+演示。干杯！
再问一个问题，我刚刚意识到子菜单的顶部属性没有显示在正确的位置（总是在顶部，而不是在菜单的右侧）。你知道如何解决它吗？

【解决方案2】：

只需用这个替换你的css：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {

    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-sub-list {
    display: none;

    float:right;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content .draggable {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content .draggable:hover{background-color: #f1f1f1}

.dropdown-list:hover .dropdown-sub-list{
    display : block;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

【讨论】：

【解决方案3】：

.dropdown-content {
    display: none;
    position: absolute; "change here"
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-sub-list {
    display: none;
    top: 40px;
    position: absolute; "change here"
    float: left; "not sure you need this"
    right: -41px;
    background-color: #f9f9f9;
    min-width: 160px;
    z-index: 1; "change here"
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

【讨论】：

【解决方案4】：

在您的 css 检查小提琴链接中进行了一些更改

https://jsfiddle.net/9sdck1z1/11/

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-sub-list {
    background-color: #f9f9f9;
    display: none;
    float: left;
    min-width: 160px;
    position: absolute;
    right: -160px;
    top: 0;

}

.dropdown-content .draggable {
   color: black;
    display: block;
    padding: 12px 16px;
    position: relative;
    text-decoration: none;
}

.dropdown-content .draggable:hover{background-color: #f1f1f1}

.dropdown-list.draggable:hover .dropdown-sub-list{

  display : block;
}


.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

【讨论】：

【解决方案5】：

寻找基于 CSS 的下拉菜单，它们要简单得多……那是很多“毫无意义”的 DIV。

我还没有设计它，但这就是让它工作所需的一切。

（您不需要类名 .sub 和 .sub-2，但它会帮助您在设置样式时跟踪事物）

HTML

<nav>
<ul>
    <li><a href="#">Left</a>
        <ul class="sub">
          <li><a href="#">Link 1</a>
            <ul class="sub-2">
              <li><a href="#">link 1 - 1</a></li>
              <li><a href="#">link 1 - 2</a></li>
              <li><a href="#">link 1 - 3</a></li>
            </ul> 
          </li>
          <li>link 2</li>
          <li>link 3</li>
        </ul> 
            </li>
</ul> 
</nav>

CSS：

nav li{list-style-type:none; }
nav ul.sub, nav ul.sub-2{display:none; }
nav ul li:hover .sub, nav .sub li:hover .sub-2{display:block; }

【讨论】：