мой первый вопрос о SO, надеюсь, этос нуля, должно быть простым решением для тех, кто хорошо разбирается в искусстве CSS ...

Проблема, с которой я столкнулся, состоит в том, что выпадающие разделы моей навигации, управляемой css, приводят к смещению контента под ним вправо. Я нашел похожие вопросы, опубликованные, но я попробовал все предоставленные решения, и ничто, кажется, не заставляет это работать .....

Самое близкое, что мне удалось получить, это добавитьposition:absolute; к#nav li:hover ul тег, и это останавливает перемещение контента, но создает новую проблему, раскрывающееся подменю отображается только тогда, когда мышь находится над элементом меню верхнего уровня, а попытка переместить мышь вниз по подменю приводит к его исчезновению. Другая проблема, которую я нахожу в равной степени разочаровывающей для решения ...

HTML-код для навигации - это стандартные вложенные списки:

    
      
            <a href="#">about us</a>
                    
                            <a href="1">staff</a>
                            <a href="2">venue</a>
                            <a href="2">history</a>
                            <a href="2">community theatre</a>
                            <a href="2">rep theatre</a>
                            <a href="2">theatre school</a>
                            <a href="2">official partners</a>
                    
            
            <a href="#">join us</a>
                    
                            <a href="1">friends membership</a>
                            <a href="2">wine club</a>
                    
            
            <a href="#">hire</a>
                    
                            <a href="1">business</a>
                            <a href="2">rehersal space</a>
                            <a href="2">community groups</a>
                            <a href="2">theatre productions</a>
                            <a href="2">memorable occasions</a>
                    
            
            <a href="#">contact</a>
                    
                            <a href="1">list of contacts</a>
                            <a href="2">contact us now</a>
                    
            
            <a href="#">support</a>
                    
                            <a href="1">donations + requests</a>
                            <a href="2">past sponsors</a>
                            <a href="2">thanks</a>
                            <a href="2">volunteers</a>
                            <a href="2">set up a community event</a>
                    
            
    

и сопровождающее 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 и т. Д.), А также играл с различными конфигурациями позиционирования, но я просто могу »кажется, это не решает ... Спасибо за любую помощь заранее, эта проблема сводила меня с ума весь день!