0
私は0の不透明度から1のちょうど良い値に遷移している垂直メニューを持っています。すべては、第2レベルのliにカーソルを移動した場合を除いて動作しますul上位レベルのリスト項目は表示できますが、その項目をクリックすることはできません。カーソルを最後のliから上位レベルliに移動すると、ulが閉じられ、上位レベルのリストが元に戻ります。親ulのリストアイテムは、子供のulが表示されているときにホバリング能力を失います。
<div class="accordion">
<ul>
<li>My First List Item</li>
<li>My Second List Item
<ul>
<li><a href="http://www.google.com">GOOGLE -
The first child of my second list item</a></li>
<li>The second child of my second list item</li>
<li>The third child of my second list item</li>
</ul>
</li>
<li>My Third List Item
<ul>
<li>The first child of my third list item</li>
<li>The second child of my third list item</li>
<li>The third child of my third list item</li>
</ul>
</li>
<li>My Fourth List Item</li>
</ul>
</div>
<div class="accordionMain"><h3>This is the main content area.</h3>
</div>
は今CSS：
/* This is for the accordion style menu only */
div.accordion{
height: 100px;
width:150px;
background:darkblue;
float:left;
}
div.accordion ul{
margin:0px;
padding:0px;
list-style-type:none;
}
/* LIST ITEMS FROM 1ST LEVEL UL BEFORE LIST IS HOVERED OVER */
div.accordion ul li{
position:relative;
margin:0;
padding:1px 0px 0px 2px;
background-color:pink;
}
/* 2ND LEVEL UL BEFORE THE LIST IS HOVERED OVER */
div.accordion ul li ul{
position:relative;
}
/* LIST ITEMS FROM THE 2ND LEVEL UL BEFORE LIST IS HOVERED OVER */
div.accordion ul li ul li{
opacity:0.0;
-moz-opacity:0.0;
-o-opacity:0.0;
-webkit-opacity:0.0;
height:0px;
position:relative;/*JUST ADDED 1-8 */
}
/* 1ST LEVEL LIST ITEMS ON HOVER DO THIS TO THE LIST ITEM*/
div.accordion ul li:hover{
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
background-color:lightyellow;
position:relative;
}
/* 1ST LEVEL LIST ON HOVER DO THIS TO THE UL FOR THAT LIST ITEM */
div.accordion ul li:hover ul{
background-color:red;
z-index:20;/*JUST ADDED LAST */
}
/* 2ND LEVEL LIST ON HOVER DO THIS TO THE LIST ITEM */
div.accordion ul li ul li:hover{
background-color:fuchsia;
}
/* 1ST LEVEL LIST ON HOVER DO THIS TO 2ND LEVEL LIST ITEMS */
div.accordion ul li:hover ul li{
background-color:lime;
height:40px; /* FOR A SMOOTH TRANSITION DO NOT USE AUTO */
padding-left:15px;
width:135px;
border-bottom:1px solid black;
opacity:1.0;
-moz-opacity:1.0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
position:relative;
}
あなたは何をしたいのか分かりません。緑色のメニューからピンク色のメニューにマウスを移動すると、メニューがジャンプすることに気付いたのですか？もしそうなら、あなたは何が起こると思いますか？通常、この種のメニューでは、ホバーだけでなくクリックを使用するため、問題ではありません。デザインを再考する必要があるかもしれません。 –
はい、問題です。私が期待していたのは、上位レベルのulリストアイテムがクリックできるようになったことです。しかし、メニューが上に戻ると、下から上に上がらなければ、もはやホバリングできなくなります。第3リストアイテムをクリックする方法はありません。高さや詰め物に問題があるかもしれないと思っていましたが、すべての可能な組み合わせを試しても、それはまだ動作しないと思います。私はCSSのメニューが新しく、たくさんのことを学びたいと思っています。あなたの時間と助けてくれてありがとう。 – user1137960
私はそれを理解しました。私は子供のリスト項目にホバーを置いた後に0pxの高さに戻っていく必要がありました。ここに私が追加したコードがあります。 div.accordion ul li ul li { \t \t高さ：0px; \t \t \t \tトランジション：すべて1sイージーイン。 \t \t -moz-transition：すべて1sイージーアウトです。 \t \t -o-transition：すべて1sイージーイン。 \t \t -webkit-transition：all 1s ease-in-out; \t} – user1137960