htmlに
<ul id="dropmenu"> <li class="dropitem"><a href="#">名前</a> <ul> <li><a href="#">Tom</a></li> <li><a href="#">Juddy</a></li> </ul> </li> <li class="dropitem"><a href="#">住所</a> <ul> <li><a href="#">NY</a></li> <li><a href="#">London</a></li> </ul> </li> <li class="dropitem"><a href="#">職業</a> <ul> <li class="nextitem"><a href="#">ビジネスマン</a> <ul> <li><a href="#">金融</a></li> <li><a href="#">医療</a></li> <li><a href="#">製造</a></li> </ul> </li> </ul> </li> </ul>
と書き、cssに
#dropmenu{ position: relative; list-style-type: none; width: 1000px; height: 40px; margin:0; padding: 0; } #dropmenu li{ width: 20%; margin: 0; padding: 0; text-align: center; } .index{ color: red; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li ul li{ overflow: hidden; width: 1000px; height: 0; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ color: blue; Background-color:yellow; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover{ height:auto !important; } #dropmenu li:hover > ul > li{ overflow: visible; height: 38px; } .nextitem { position: relative; } .dropitem ul li ul li { position: absolute; left: 100%; width: 100%; top: 0; } .dropitem { position: relative; } .dropitem > ul { position: absolute; left: 100%; top: 0; }
と書きました。
これらを実行すると、
職業・ビジネスマン の文字にhoverした後、
金融&医療&製造の文字が重なってしまいます。
色々と試行錯誤しましたが、金融&医療&製造の文字を縦に並べることができず。。。
どうcssに追加すればいいでしょうか?
回答を受けて
<ul id="dropmenu"> <li class="dropitem"><a href="#">名前</a> <ul> <li><a href="#">Tom</a></li> <li><a href="#">Juddy</a></li> </ul> </li> <li class="dropitem"><a href="#">住所</a> <ul> <li><a href="#">NY</a></li> <li><a href="#">London</a></li> </ul> </li> <li class="dropitem"><a href="#">職業</a> <ul> <li class="nextitem"><a href="#">ビジネスマン</a> <ul> <li><a href="#">金融</a></li> <li><a href="#">医療</a></li> <li><a href="#">製造</a></li> </ul> </li> <li class="nextitem"><a href="#">その他</a> <ul> <li><a href="#">主婦</a></li> <li><a href="#">フリーター</a></li> <li><a href="#">その他</a></li> </ul> </li> </ul> </li> </ul>
とhtmlに書き、
#dropmenu{ position: relative; list-style-type: none; width: 1000px; height: 40px; margin:0; padding: 0; } #dropmenu li{ width: 20%; margin: 0; padding: 0; text-align: center; } .index{ color: red; } #dropmenu li a{ display: block; margin: 0; padding: 15px 0 11px; font-size: 14px; font-weight: bold; line-height: 1; text-decoration: none; } #dropmenu li ul{ list-style: none; margin: 0; padding: 0; border-radius: 0 0 3px 3px; } #dropmenu li ul li{ overflow: hidden; width: 1000px; height: 0; -moz-transition: .2s; -webkit-transition: .2s; -o-transition: .2s; -ms-transition: .2s; transition: .2s; } #dropmenu li ul li a{ padding: 13px 15px; text-align: left; font-size: 12px; font-weight: normal; } #dropmenu li:hover > a{ color: blue; Background-color:yellow; } #dropmenu > li:hover > a{ border-radius: 3px 3px 0 0; } #dropmenu li:hover{ height:auto !important; } #dropmenu li:hover > ul > li{ overflow: visible; height: 38px; } .dropitem { position: relative; } .dropitem > ul { position: absolute; left: 100%; top: 0; } .nextitem { position: relative; } .dropitem ul li ul li { position: relative; left: 100%; width: 100%; top: -38px; }
とcssに書くとその他の要素の中の、主婦・フリーター・その他の要素が一切押せなくなってしまいました。
回答1件
あなたの回答
tips
プレビュー