добро пожаловать в сообщество, вы столкнулись с этой проблемой в IE7.
IE8, FF и Chrome дают идеальный результат.То, что вам нужно, это сделать .main-container z-index:-10 or -100 или около того .. попробуйте любые значения.
Установите z-index для .nav-container и #nav в положительных значениях, таких как z-index:999 или 9999. Попробуйте значение и проверьте его одновременно во всех браузерах, чтобы вы могли определить, где действуют ваши правила CSS.Для целей тестирования вы можете установить border:1px solid red; для любого класса или идентификатора.Используя это, вы можете видеть границы элемента.
Проверьте свою позицию также, когда IE по-разному обрабатывает позиции.Это не обязательно, что вы пытаетесь z-index на ul или ul ul работать соответственно.Некоторое время мы думаем и о родительском контейнере элемента.Если ваш макет или выравнивание создаст проблему в других браузерах, вы также можете использовать условные операторы и написать конкретный CSS для конкретного браузера.
См .: Условные комментарии