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次に、ネストされた 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 に答える