Блог

Главная - Вопросы по программированию - элементы навигации не выровнены проблема с перекрытием

элементы навигации не выровнены проблема с перекрытием

#css

#css

Вопрос:

У меня две основные проблемы с моим кодом.

  1. Проблема 1 — Выравнивание: внутри <nav> я создал два <div> тега. Один для логотипа, а другой для гиперссылок, но тогда я не могу выровнять. Я застрял на этом в течение нескольких часов.
  2. Проблема 2 — Перекрытие: если размер экрана немного мал, при наведении курсора мыши на элемент панели навигации они перекрывают друг друга, что теоретически нормально, однако это не покрывает элемент позади, поэтому оба элемента продолжают отображаться. Есть ли способ предотвратить это? кстати, эта проблема возникает только тогда, когда я использую небольшой размер экрана.

Изображение ниже может проиллюстрировать обе проблемы:

Иллюстрированная проблема

 body{
    background-color: rgb(210,210,210);
    margin:0px;
    padding: 0px;
}

nav{
    background-color: rgb(97, 97, 97);
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right:10px;
    display: flex;
}

section{
    padding: 0 10%;
}

#Logo{
    width: 20%;
    height: inherit; 
    float: left;
    clear: left;
}

#Hyperlinks{
    width: 80%;
    float: right;
    text-align: right;
}

#Logo p{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande';
    font-size: 120%;
    color: white;
    padding-left: 40px;
}

#Hyperlinks a{
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    color: white;
    padding-right: 5px;
}

#Hyperlinks li li>a{
    font-size: 1.1rem;
}

#Hyperlinks>ul>li:hover {
    background-color: rgb(27, 129, 107);
    border-radius: 0 0 10px 0;
}

#Hyperlinks ul li li:hover{
    background-color: rgb(27, 129, 107);
}

#Hyperlinks ul ul li:last-child{
    border-radius: 0 0 10px 0;
}

#Hyperlinks>ul>li>a{
    border-right:solid white 3px;
}

#Hyperlinks ul{
    padding-inline-start: 0;
}

#Hyperlinks>ul>li{
    display: inline-block;
    padding: 10px 50px 10px 2px;
    margin-right: 10px;
}

#Hyperlinks ul ul{
    display: none;
}

#Hyperlinks>ul>li{
    position: relative;
}

#Hyperlinks ul li:hover ul{
    display: block;
    position: absolute;
    width: 92%; 
    left: 0%; 
    top: 42px; 
    background-color: rgb(97, 97, 97);
    border-radius: 0 0 10px 0;
}

#Hyperlinks li:hover li{
    display: block;
    padding: 1em 0em 1em 5px;
    text-align: left;
}  
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Bar 3</title>
    <link rel="stylesheet" href="gabarito2.css">
</head>

<body>
    <header>
        <nav>
            <div id="Logo">
                <p>MySite.com</p>
            </div>
            <div id="Hyperlinks">
                <ul>
                    <li><a href="#" class="active">Home</a></li>
                    <li><a href="#">Tutorial</a>
                        <ul>
                            <li><a href="#">Tutorial 1</a></li>
                            <li><a href="#">Tutorial 2</a></li>
                            <li><a href="#">Tutorial 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Newsletter</a>
                        <ul>
                            <li><a href="#">News 1</a></li>
                            <li><a href="#">News 2</a></li>
                            <li><a href="#">News 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>

        </nav>
    </header>
    <section>
        <h2>Test</h2>
        <p>Hello, it`s just a test. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, temporibus, culpa! Impedit amet voluptates reiciendis esse quisquam. Eum quia, facere laboriosam quos possimus, ratione, optio incidunt sunt dolorum commodi magni.</p>
    </section>


</body>
</html>

Ответ №1:

  1. Избавьтесь от всех поплавков и используйте исключительно flexbox. Убедитесь, что ваши ul и li не имеют полей и отступов по умолчанию.

  2. Просто установите цвет фона и z-index , если необходимо.

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

1. Чтобы прокомментировать пункт 2, это не сработает. Во время тестирования фрагмента кода OP я понял, что меню находится ниже «Newsletter».