Не работает стилизация пункта меню четвертого уровня

#html #css

#HTML #css

Вопрос:

Я не могу понять, почему четвертый уровень не стилизуется. Может кто-нибудь, пожалуйста, помочь с этим CSS-спагетти?

Скрипач: демонстрация меню

Комментарии:

1. Это так. Ваше окно недостаточно широкое.

2. Четвертый уровень выделен, хотя я зависаю только на третьем уровне. Я не могу удалить эффект зависания при наведении на четвертый уровень.

3. Вероятно, из-за !important злоупотреблений, которые я вижу в ваших CSS-спагетти.

Ответ №1:

У вас есть несколько проблем с этим. Для начала я настоятельно рекомендую вам очистить ваш CSS и проверить ваш HTML.

Это недопустимо в вашем CSS, что является частью проблемы.

 .nav ul li li li:hover a {
background:#00999b url(img/arrow_over.gif) no-repeat 95% 9px !important; 
} 
  

И этот HTML неверен: у вас незакрытые теги внутри других тегов.

 <ul>
            <li class="canieti first"><a href="#"><span>***HOME</span></a><ul>
            <li class="quienessomos first"><a href="#"><span>***SECOND</span></a><ul>
            <li class="consejodirectivonacional"><a href="#"><span>***THIRD</span></a><ul>
            <li class="mesadirectivanacional first"><a href="#"><span>***FOURH</span></a></li>
         </ul>

            <div style="clear: both;"></div>
        </li>
        <li class="canieti first"><a href="#"><span>Other</span></a></li>
        </ul>
        <div style="clear: both;"></div>
        </li>
    </ul>