为什么位置相对不起作用？

Question

我在页面上有一个侧边栏，看起来应该是这样的

但我得到的是这个

子菜单没有显示，我的代码看起来像这样

.submenu{
    position: absolute;
}
.submenu ul{
    height: auto !important;
    background-color: transparent !important;
}
.submenu ul li{
    position: static !important; 
}

当我指定right: value时，组件的行为不常见。 Here is a jsfiddle

谢谢！

Answer 1

好的，我让这个工作，但不是你提供的小提琴。在为溢出问题做小提琴时，尝试仅隔离与问题或问题相关的代码。当你在那里添加所有内容时，很难找到相关的材料。

我为你做了一个小提琴，展示它是如何工作的，如果你喜欢它，那么随意使用它。这是一个css下拉列表，不需要任何脚本。您需要做的是在主ul ul's标记内嵌入li。然后，您必须隐藏嵌套的ul，以便稍后在悬停操作中显示。

我制作的三角形不一定是CSS3三角形，你可以使用图像。

<强> HTML

<div class="sideBar">
<ul>
    <li>¿Porqué Nosotros?</li>
    <li><span class="tri"></span>Pregrado
        <ul>
            <li>Diseño &amp; Comunicación Visual</li>
            <li>Comunicació y Relaciones Públicas</li>
        </ul>
    </li>
    <li>Posgrado</li>
    <li>Maestría</li>
    <li>Calendario</li>
</ul>

<强> CSS

.sideBar {
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  color: #fff;
  width: 200px;
}

.sideBar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.sideBar ul li {
  height: 20%;
  width: 180px;
  padding:  10px 0 10px 20px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.tri {
  content: "";
  border-top: 19px solid transparent;
  border-bottom: 19px solid transparent;
  border-left: 10px solid red;
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  left: 100%;
  top: 20%;
  display: none;
  z-index: 1000;
}  

.tri:after {
  height: 38px;
  left: 100%;
  top: 0;
  content: "";
  position: absolute;
  width: 10px;
  display: block;
}

.sideBar ul li:hover .tri {
  display: block;
}

.sideBar ul li:hover {
  background: red;
}  

.sideBar ul li ul {
  display: none;
  position: absolute;
  top: 30%;
  left: 100%;
}

.sideBar ul li ul li {
  background: #7b7b7b;
  border: none;
  padding-left: 20px;
  width: 260px;
}

.sideBar ul li ul li:hover {
  background: black;
}

.sideBar ul li:hover ul {
  display: block;
}

这是一个可用于视觉参考的小提琴。

jsfiddle

如果您需要更多帮助，请告诉我。