Div navleft и navright изменяют размеры независимо, что и следовало ожидать, учитывая вашу структуру дизайна. Но это выглядит странно, так как в верхней части содержимого ниже:
Одно из предложений, которое я могу вам дать, - не устанавливать ширину панели навигации в%, что вы сделали для этих двух элементов div. Если вы установите фиксированную ширину (в пикселях) или полностью удалите спецификацию ширины (в этом случае она займет ширину внутреннего содержимого), горизонтальная полоса прокрутки появится под страницей, когда ширина мала, что, я полагаю, подойдет , Кроме того, используйте как можно меньше float с, поскольку они нарушают поток содержимого в документе и более склонны к нарушению макетов. Оба этих div'а имеют float:left, который может быть сброшен для более стабильных решений. Я говорю все это, потому что я думаю, что из-за этих причин происходит нарушение компоновки при наведении. Если вы сможете позаботиться об этом, ваша проблема может исчезнуть.
Так что я предлагаю иметь один nav div с width: 100%. Внутри этого поместите два div: navleft и navright с display:inline и шириной a.), Указанными в px или не указанными вообще, или b.), Заданными в%, но с некоторыми min-width в px. Если вы не укажете ширину для navright, она будет расширена, чтобы заполнить все пространство справа.
Таким образом, эти два div не будут перекомпоновываться независимо.
В основном, играйте больше, пока не получите лучшее управление CSS; Я думаю, что больше опыта автоматически поможет вам разобраться в подобных вопросах.