Q&A
下記のHPのような、ドロップダウンメニューをCSSでつくろうとしています。
http://vtm.jp/
hoverした時に↑のようなアニメーションをつけたいのですが
transtionで書こうとしてもうまくいきません＞＜
アドバイスいただけませんでしょうか。
＊超初心者のため、ソースが汚くみにくいかもしれません。。。
すみません＞＜
該当のソースコード
html
1<nav class="main-menu"> 2 <ul> 3 <li><a href="#"><img src="img/@@@.jpg" width="97px" height="7px" alt="メニュー1"></a></li> 4 <li><a href="#style"><img src="img/@@@.jpg" width="40px" height="7px" alt="メニュー2"></a> 5 <ul class="dropdown"> 6 <li><a href="#">メニュー3</a></li> 7 <li><a href="#">メニュー4</a></li> 8 <li><a href="#">メニュー5</a></li> 9 <li><a href="#">メニュー6</a></li> 10 <li><a href="#">メニュー7</a></li> 11 <li><a href="#">メニュー8</a></li> 12 </ul></li> 13 </ul>
css
1.main-menu ul:not(.dropdown){ 2 list-style-type: none; 3 padding-left: 0; 4 padding-bottom: 50px; 5 width: 890px; 6 height: 16px; 7 margin: 0 auto; 8 display: flex; 9 justify-content: space-between; 10} 11 12.main-menu a:hover{ 13 opacity: .5; 14} 15 16/* dropdown-menu */ 17 18.main-menu li{ 19 position: relative; 20} 21 22.main-menu li ul{ 23 list-style-type: none; 24 position: absolute; 25 padding-left: 10px; 26 display: flex; 27 justify-content: space-between; 28 width: 600px; 29 font-size: 11px; 30} 31 32.main-menu li ul li{ 33 overflow: hidden; 34 height: 0; 35} 36 37.main-menu li:hover >ul li{ 38 overflow: visible; 39 padding-top: 20px; 40 height: 20px; 41} 42
回答1件
0
ベストアンサー
こんな感じでしょうか？
CSS
1/* dropdown-menu */ 2 3.main-menu li{ 4 position: relative; 5 transition-duration: 1s; /* ← 追加 */ 6}
検索すると色々な解説サイトがありますので、いろんな変化を試してみてください。
投稿2019/02/15 21:14
総合スコア3523
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/16 06:33
2019/02/16 07:06
2019/02/16 19:57
2019/02/16 23:52
2019/02/17 05:54
2019/02/17 06:13
2019/02/17 06:24
2019/02/17 06:32