Вёрстка под Safari. Странное отображение размера блоков раскрывающегося меню

@MenosG · Регистрация: 23.02.2013

Author24 — интернет-сервис помощи студентам

Доброго дня. Подскажите пожалуйста,как оптимизировать блоки выпадающего меню, для того, чтобы они корректно отображались в Safari?

В Chrome: del
В Safari: del
Сайт: http://weave.com.ua/

Знаю, что вёрстка там сама по себе оставляет желать лучшего, но вот есть что есть и нужен совет именно по сути вопроса. Спасибо.

@GoDr · 27.11.2015, 19:21

MenosG, выложи код хоть. Нужно ведь хотя бы знать что править

@MenosG · 27.11.2015, 19:47 **[ТС]**

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

HTML5

<ul class="slimmenu">
<li class="slimmenu__2"><a href="#">Ткацкие станки</a>
 <ul style="display: none; height: 80px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
 <li class="slimmenu__2--1"><a href="#">Пневматические</a>
<ul class="slimmenu__2--1--t" style="display: none; height: 224px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
 <li class="slimmenu__2--1--s slimmenu__2--1--s1"><a href="/index/tkackie_stanki_omniplus_summum/0-12">OMNIplus Summum</a></li>
 <li class="slimmenu__2--1--s slimmenu__2--1--s2"><a href="/index/tkackie_stanki_omniplus_800_tc/0-13">OMNIplus 800 TC</a></li>
 <li class="slimmenu__2--1--s slimmenu__2--1--s3"><a href="/index/tkackie_stanki_terryplus_800/0-14">TERRYplus 800</a></li>
 <li class="slimmenu__2--1--s slimmenu__2--1--s4"><a href="/index/tkackie_stanki_omniplus_x/0-15">OMNIplus-X</a></li>
</ul>
 <span class="sub-collapser"><i>▼</i></span></li>
 <li class="slimmenu__2--2"><a href="#">Рапирные</a>
<ul class="slimmenu__2--2--t" style="display: none; height: 200px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
 <li class="slimmenu__2--2--s slimmenu__2--2--s1"><a href="/index/tkackie_stanki_optimax/0-9">OptiMax</a></li>
 <li class="slimmenu__2--2--s slimmenu__2--2--s2"><a href="/index/tkackie_stanki_gt_max/0-10">GT-Max</a></li>
 <li class="slimmenu__2--2--s slimmenu__2--2--s3"><a href="/index/tkackie_stanki_gtxplus/0-11">GTXplus</a></li>
 <li class="slimmenu__2--2--s slimmenu__2--2--s4"><a href="/index/tkackie_stanki_optimax_i/0-7">OptiMax-i</a></li>
 <li class="slimmenu__2--2--s slimmenu__2--2--s5"><a href="/index/tkackie_stanki_terrymax_i/0-8">TERRYMax-i</a></li>
 </ul>
 <span class="sub-collapser"><i>▼</i></span></li>
 </ul>
 <span class="sub-collapser"><i>▼</i></span></li>

@mrBobrillo · 27.11.2015, 23:46

MenosG Ну смотрите, желательно дропдаун залить цветом нынешних ссылок в нем.
Дальше, вашим ссылкам в выпадающем меню, следует задать display: block; а так как они сейчас наследуют инлайн блок от родителя, то они не могут растянуться на всю ширину контейнера выпадающего меню, и могут расширяться только при заполнении текстом ссылки.
Стрелки в квадратах стоит сделать псевдоэлементом и абсолютировать, поставив right: 0; а так же выдавить правую часть родителя где она будет лежать паддингом на ширину этого квадрата.

Вот посмотрите, я сверстал приблизительную модель вашего меню, только стрелочек не хватает http://jsfiddle.net/b1cg2vnv/307/

HTML5

<div class="wrapper">
    <div class="menu">
        <ul>
            <li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item menu-item_dropdown">
                <a href="#">Products</a>
                <div class="dropdown">
                    <div class="dropdown-container"></div>
                </div>
            </li>
            <li class="menu-item"><a href="#">Clients</a></li>
            <li class="menu-item"><a href="#">Contact us</a></li>
        </ul>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
 
body {
    background: #dfdfdf;
}
 
.wrapper {
    max-width: 780px;
    margin: 0 auto;
}
 
.menu {
    width: 100%;
    background: #009C2E;
}
 
.menu ul {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
}
 
.menu-item {
    display: inline-block;
    text-align: center;
    position: relative;
    border-right: 1px green solid;
}
 
.menu-item a:hover::after {
    display: block;
    opacity: 1;
}
 
.menu-item_dropdown a::after {
    position: absolute;
    content: "";
    left: 50%;
    margin-left: -10px;
    top: 77%;
    line-height: 16px;
    border: 15px solid transparent; /* Прозрачные границы */
    border-bottom: 15px solid white; /* Добавляем треугольник */
    z-index: 0;
    opacity: 0;
    transition: all 1s;
}
 
.menu-item a {
    padding: 1em;
    display: block;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

Так же есть свои нюансы с инлайновыми блоками, их стоит учитывать.

@MenosG · 30.11.2015, 19:29 **[ТС]**

Настроил. Спасибо огромное.

@MenosG 0 / 0 / 0 Регистрация: 23.02.2013 Сообщений: 15
		1
	Вёрстка под Safari. Странное отображение размера блоков раскрывающегося меню 27.11.2015, 18:12. Показов 2515. Ответов 4 Метки нет (Все метки) Доброго дня. Подскажите пожалуйста,как оптимизировать блоки выпадающего меню, для того, чтобы они корректно отображались в Safari? В Chrome: del В Safari: del Сайт: http://weave.com.ua/ Знаю, что вёрстка там сама по себе оставляет желать лучшего, но вот есть что есть и нужен совет именно по сути вопроса. Спасибо. Миниатюры 0

@GoDr 90 / 79 / 33 Регистрация: 17.08.2015 Сообщений: 512 Записей в блоге: 1
	27.11.2015, 19:21	2
	MenosG, выложи код хоть. Нужно ведь хотя бы знать что править 0

@MenosG 0 / 0 / 0 Регистрация: 23.02.2013 Сообщений: 15
	30.11.2015, 19:29 [ТС]	5
	Настроил. Спасибо огромное. 0