Meine erste Frage zu SO, ich hoffe, es ist völlig neu, sollte eine einfache Lösung für jemanden sein, der sich mit CSS auskennt ...

Das Problem ist, dass die Dropdown-Bereiche meiner CSS-gesteuerten Navigation dazu führen, dass der Inhalt darunter nach rechts verschoben wird. Ich habe ähnliche Fragen gepostet, aber ich habe alle bereitgestellten Lösungen ausprobiert und nichts scheint es zum Laufen zu bringen .....

Der nächste, den ich bekommen habe, ist das Hinzufügenposition:absolute; zum#nav li:hover ul tag, und dies hindert den Inhalt daran, sich zu bewegen, erzeugt jedoch ein neues Problem. Das Dropdown-Untermenü ist nur sichtbar, wenn sich der Mauszeiger über dem Menüelement der obersten Ebene befindet, und der Versuch, den Mauszeiger über das Untermenü zu bewegen, führt dazu, dass es verschwindet. ein weiteres problem das ich genauso frustrierend finde zu lösen ...

das html für die navigation ist eine standard verschachtelte liste:

<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>

und das dazugehörige CSS lautet wie folgt:

#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;}

Ich habe versucht, Lösungen über die normale Route zu finden (Suche auf Google, SO usw.) sowie mit verschiedenen Positionierungskonfigurationen herumzuspielen, aber ich scheine dies einfach nicht zu lösen ... Vielen Dank für jede Hilfe im Voraus, dieses Problem war es macht mich den ganzen Tag verrückt!