前提・実現したいこと
html5とcss3とjqueryでウェブサイトを作っています。
サイト上部にドロップダウンメニューバーを作成し、親要素を均等に配置したいです。
該当のソースコード
【html】
<ul id="menu"> <li><a href="#">menu A</a> <ul class="sub"> <li><a href="#">menu A-1</a></li> <li><a href="#">menu A-2</a></li> </ul> </li> <li><a href="#">menu B</a> <ul class="sub"> <li><a href="#">menu B-1</a></li> <li><a href="#">menu B-2</a></li> </ul> </li> <li><a href="#">menu C</a> <ul class="sub"> <li><a href="#">menu C-1</a></li> <li><a href="#">menu C-2</a></li> <li><a href="#">menu C-3</a></li> </ul> </li> </ul>【css】
ul#menu li{
float: left;
position: relative;
width: 300px;
background-color: darkred;;
display: block;
text-align: center;
}
ul.sub{
float: left;
display: none;
position: absolute;
text-align: center;
}
【jquery】
$(document).ready(function(){
$('#menu li').hover(function(){ $('ul:not(:animated)', this).slideDown(600); }, function(){ $('ul.sub', this).slideUp(600); });
});
試したこと
親要素のwidthをピクセルで指定すれば正常に機能するのですが、三分割にしようと30%もしくはcalcを使って指定すると子要素にも割合が指定されてしまい、展開される子要素が横並びになってしまいます。親要素のみを割合で指定して、子要素を正常に下に展開するようにしたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/08/30 12:27