Как исправить косяк в коде, текст накладывается на другой пункт меню?

Question

[bmdmi]

Всем привет, сегодня столкнулся с такой проблемой:
У меня есть сайт, делал его другой человек с которым связи нет.

Момент такой, я немножко понимаю в HTML , и добавил пункты меню в блоки.
Но получилось вот такое:

То есть по идее оно должно было раскрыться и доп пункты которые я положил в submenu уйти вниз как вот здесь:



Код:

<div class="mainCatalogBlock oils"><span class="mainCatalogBlockName">Масла</span>
            <ul class="mainCatalogBlockOption">
                <a href="/oils_catalog">
                    <li>Моторные (ДВС)</li>
                </a>
                <a href="/gear_oils_catalog">
                    <li>Трансмиссионные</li>
                </a>
                <a href="/industrial_gear_oils_catalog">
                    <li>Индустриальные</li>
                </a>
                <a href="/moto_boat_oils_catalog">
                    <li>Масла для мотоциклов и лодок</li>
                </a>
            </ul>
            <ul class="submenu">
                <a href="/flushing_oils_catalog">
                    <li>Промывочные</li>
                </a>
                <a href="/hydraulic_oil_catalog">
                    <li>Гидравлические</li>
                </a>
            </ul>
        </div>

CSS

.mainCatalogBlockOption {
            list-style-type: none;
            width: 10px;
            font-size: 20px;
            font-weight: bold;
            font-family: Montserrat Black, Arial, sans-serif;
            margin-left: -40px;
        }

        .mainCatalogBlockOption li {
            text-decoration: none;
            line-height: 30px;
            font-size: 16px;
            white-space: nowrap;
        }

И вот Submenu

.mainCatalogBlock .submenu {
            position: absolute;
            z-index: 10;
            list-style: none;
            display: none;
            width: 100%;
            height: auto;
            top: calc(100% - 40px);
            left: 0;
            background: linear-gradient(transparent 20px, white 20px, white);
            box-shadow: 0 15px 15px #dadada;
            padding: 0 0 10px;
        }

        .mainCatalogBlock .submenu li {
            padding: 4px 20px;
        }

Comments

[Semantic.Moscow]

a заверните в li

[bmdmi]

Semantic.Moscow, не получается, я же правильно понял?

[bmdmi]

Semantic.Moscow,

Она тогда сьезжает с формы, и при наведении форма расширяется а категория прячется под форму

Можете более подробно подсказать куда и что мне необходимо поместить в li?

[Semantic.Moscow]

bmdmi, нет,
не правильно.

<ul>
 <li><a href="#">11111</a></li>
 <li><a href="#">22222</a></li>
 <li><a href="#">33333</a></li>
</ul>

[bmdmi]

Semantic.Moscow, тоже не сработало, и это странно, потому что как я и говорил ранее, другие блоки с категориями написаны одинаково, и в них все корректно отображается. Вот для примера соседний раздел

[Semantic.Moscow]

у вас просто браузер бесится, не зная как ему правильно реагировать на эту дичь

воспользуйтесь валидатором: https://validator.w3.org
исправьте ошибки, потом возвращайтесь и задавайте вопросы.

Answer 1

[bmdmi]

Как я понимаю настройки сабменю едины для всех блоков категорий, но почему тогда в других блоках все нормально, а именно в этом произошел такой косяк?

Comments

[bmdmi]

И получается на масла для мото и лодок нажать не выходит, пробовал укоротить название (не помогло) .
Как с этим бороться не знаю

[cssfish]

такое по картинкам не решается, нужен доступ к коду.