Выпадающее меню не работает на iPhone! Нет javascript б / у - PullRequest
Новая
       20

Выпадающее меню не работает на iPhone! Нет javascript б / у

0 голосов
/ 16 июня 2020

Здравствуйте ,

У меня ошибка внутри кода моего веб-сайта.

URL сайта: www.poznanprzeprowadzki.pl

Проблема в раскрывающемся меню, которое появляется на мобильных устройствах. На android / desktop: hover работает нормально, раскрывающееся содержимое отображается, но на iOS отображается только странно выглядящий фон.

img1 Вот ошибка iOS

img2 Вот как это должно выглядеть (android)

Выпадающая кнопка и контент пишутся только с html + css. Я добавляю приведенный ниже код. 

            <div class="menu-dropdown" onclick="">
                <div class="dropdown-content">
                    <a href="index.php#indexmain"><div class="dropdown-content-item">
                        <div class="dropdown-content-item-icon">
                            <img width="25px" src="img/Home_icon_white.png" alt="poznań przeprowadzki, poznan removals, przeprowadzki poznań, icon">
                        </div>
                        <div class="dropdown-content-item-text">
                            <p>Strona główna</p>
                        </div>
                    </div></a>
                    <a href="about.php#indexabout"><div class="dropdown-content-item">
                        <div class="dropdown-content-item-icon">
                            <img width="25px" src="img/About_icon_white.png" alt="poznań przeprowadzki, poznan removals, przeprowadzki poznań, icon">
                        </div>
                        <div class="dropdown-content-item-text">
                            <p>O nas</p>
                        </div>
                    </div></a>
                    <a href="gallery.php#indexgallery"><div class="dropdown-content-item">
                        <div class="dropdown-content-item-icon">
                            <img width="25px" src="img/Gallery_icon_white.png" alt="poznań przeprowadzki, poznan removals, przeprowadzki poznań, icon">
                        </div>
                        <div class="dropdown-content-item-text">
                            <p>Galeria</p>
                        </div>
                    </div></a>
                    <a href="contact.php#indexcontact"><div class="dropdown-content-item">
                        <div class="dropdown-content-item-icon">
                            <img width="25px" src="img/Contact_icon_white.png" alt="poznań przeprowadzki, poznan removals, przeprowadzki poznań, icon">
                        </div>
                        <div class="dropdown-content-item-text">
                            <p>Kontakt</p>
                        </div>
                    </div></a>
                </div>
            </div>

.menu-dropdown {
    display: block;
    position: relative;
    background-image: url("img/Dropdown_menu_orange.png");
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    height: 45px;
    width: 45px;
    margin: 0px 16px 0px 10px;  
}

.dropdown-content {
    padding: 0;
    margin: 0;
    width: 200px;
    display: none; 
    position: absolute;
    top: 100%;
    background-color: rgba(255,92,0,1);
    z-index: 1000;
    right: 0;
}

.dropdown-content-item {
    background-color: rgba(255,92,0,1);
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    margin-right: auto;
}

.dropdown-content-item-text p {
    font-family: Open Sans;
    font-size: 18px;
    color: white;
    padding: 10px;
    padding-left: 0;
    margin: 0;
}

.dropdown-content-item-text {
    padding: 0;
    margin: 0;
}

.dropdown-content-item-icon {
    width: 50px;
    display: flex;
    margin: 0;
}

.dropdown-content-item-icon img {
    margin: 0 auto;
}

.dropdown-content-item:hover {
    background-color: rgba(235,82,0,1);
}

.menu-dropdown:hover .dropdown-content {
    display: block;
}

.menu-dropdown:hover {
    cursor: pointer;
}

Я слышал, что: hover не работает идеально на мобильных устройствах, и я должен использовать функцию «onclick», но я понятия не имею, как это сделать, и я Не уверен, что все равно будет работать.

...