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

时间:2013-10-02 23:05:36

标签: css

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

但我得到的是这个

actual menu

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

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

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

谢谢!

1 个答案:

答案 0 :(得分: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

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