SOに関する私の最初の質問は、CSSの技術に精通している人にとっては簡単な解決策になるはずです...
私が抱えている問題は、CSS 主導のナビゲーションのドロップダウン セクションが原因で、その下のコンテンツが右に移動することです。同様の質問が投稿されているのを見つけましたが、提供されているすべての解決策を試しましたが、何も機能していないようです.....
私が手に入れた最も近いものはposition:absolute;
、#nav li:hover ul
タグに追加することです。これにより、コンテンツが動き回るのを防ぎますが、新しい問題が発生します.ドロップダウンサブメニューは、マウスがトップレベルのメニュー項目の上にあるときにのみ表示され、マウスをサブメニューの下に移動すると、サブメニューが消えます...解決するのと同じくらいイライラする別の問題が見つかりました...
ナビゲーションの html は、標準のネストされたリストです。
<div id="navigation_panel" class="orange_grad">
<!-- navigation-->
<ul id="nav">
<li><a href="#">about us</a>
<ul>
<li class="orange_grad"><a href="1">staff</a></li>
<li class="orange_grad"><a href="2">venue</a></li>
<li class="orange_grad"><a href="2">history</a></li>
<li class="orange_grad"><a href="2">community theatre</a></li>
<li class="orange_grad"><a href="2">rep theatre</a></li>
<li class="orange_grad"><a href="2">theatre school</a></li>
<li class="orange_grad"><a href="2">official partners</a></li>
</ul>
</li>
<li><a href="#">join us</a>
<ul>
<li class="orange_grad"><a href="1">friends membership</a></li>
<li class="orange_grad"><a href="2">wine club</a></li>
</ul>
</li>
<li><a href="#">hire</a>
<ul>
<li class="orange_grad"><a href="1">business</a></li>
<li class="orange_grad"><a href="2">rehersal space</a></li>
<li class="orange_grad"><a href="2">community groups</a></li>
<li class="orange_grad"><a href="2">theatre productions</a></li>
<li class="orange_grad"><a href="2">memorable occasions</a></li>
</ul>
</li>
<li><a href="#">contact</a>
<ul>
<li class="orange_grad"><a href="1">list of contacts</a></li>
<li class="orange_grad"><a href="2">contact us now</a></li>
</ul>
</li>
<li class=" last"><a href="#">support</a>
<ul>
<li class="orange_grad last"><a href="1">donations + requests</a></li>
<li class="orange_grad last"><a href="2">past sponsors</a></li>
<li class="orange_grad last"><a href="2">thanks</a></li>
<li class="orange_grad last"><a href="2">volunteers</a></li>
<li class="orange_grad last"><a href="2">set up a community event</a></li>
</ul>
</li>
</ul>
付随する css は次のとおりです。
#navigation_panel {border-radius: 18px 18px 0 0/ 18px 18px 0 0; width: 900px; height:50px;}
#nav { margin:0; padding: 0; list-style:none;}
#nav a{ color:black; font-size: 20px; text-decoration:none; min-height:50px; width:95px;}
#nav li {text-align:center; float:left; padding:14px 8px ; cursor:pointer; width:95px;}
#nav li.last{width:99px;}
#nav li ul {margin-top:14px; margin-left:-8px; padding:0; display: none; list-style:none;}
#nav li ul li{ border:1px solid black; width:95px; padding:6px 8px;}
#nav li ul li a{/*font-family:arial;*/ font-size:14px;}
#nav li:hover{ text-decoration:underline; }
#nav li:hover ul{display: block;}
#nav li:hover ul li {clear: left;}
通常のルート(Google、SOなどで検索)で解決策を見つけようとしましたが、さまざまなポジショニング構成を試してみましたが、これを解決できないようです...事前に助けてくれてありがとう、この問題は一日中私を怒らせます!