0

我在页面上有一个侧边栏，应该是这样的 菜单

但我得到的是这个

实际菜单

子菜单未按应有的方式显示，我的代码如下所示

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

当我分配right: value组件的行为是不常见的。这是一个jsfiddle

谢谢！

4

1 回答 1

1

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

我为你做了一个小提琴来展示它是如何工作的，如果你喜欢它是如何工作的，那么就可以随意使用它。这是一个 CSS 下拉菜单，不需要任何脚本。您需要做的是ul在主ul's li标签内部嵌套 a。然后，您必须隐藏嵌套的 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

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

于 2013-10-03T01:35:46.640 回答