Отключение выравнивания элементов списка меню при наведении

#html #css #onhover

#HTML #css #onhover

Вопрос:

Я использую простой HTML и CSS для создания горизонтального меню с использованием неупорядоченного списка.

Это код HTML и CSS:

 .nav_bar{
    margin-left: 700px;
    margin-top: 40px;
    position: absolute;
}

.nav_bar ul{
    list-style-type: none;
}

.nav_bar ul li{
    display: inline-block;
    text-align: center;
    float: left;
}

.nav_bar ul li a{
    text-decoration: none;
    padding: 12px;
    margin: 8px;
    font-size: 20px;
    color: #fff;
}

.nav_bar ul li a::after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 4px;
    background: #ff6600;
    transition: width .4s;
}

.nav_bar ul li a:hover::after{
    width: 100%;

}

 <div class="nav_bar">
  <ul>
    <li><a href="#">Services</a></li>
    <li><a href="#">Solution</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

Я не знаю, в чем проблема и почему она возникает?
Пожалуйста, помогите мне по уважительной причине..

Ответ №1:

Я исправил ваш код и получил что-то вроде этого.

 .nav_bar ul li a{
    text-decoration: none;
    padding: 12px;
    margin: 8px;
    font-size: 20px;
    color: orange;
    position: relative;
}

.nav_bar ul li a::after{
       content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 4px;
    background: #ff6600;
    transition: width .4s;
    width: 0;
}

проблема в том, что ваш after элемент отображается inline-block так, что он отображается встроенным в ваш тег achor. и поскольку ваш тег achor не имеет достаточной ширины для отображения ::after встроенного, ваш ::after элемент переносится после вашего тега привязки.
смотрите это: https://jsfiddle.net/pm68Lzmv /

Ответ №2:

Попробуйте это:

Добавить position:absolute; в :after селектор для тега

Удалить margin-left из .nav_bar и добавить right:0

 .nav_bar{        
    margin-top: 40px;
    position: absolute;
    right:0;
}

.nav_bar ul{
    list-style-type: none;
}

.nav_bar ul li{
    display: inline-block;
    text-align: center;
    float: left;
}

.nav_bar ul li a{
    text-decoration: none;
    padding: 12px;
    margin: 0;
    font-size: 20px;
    color: #aaa;
    display:block;
    position:relative;
}

.nav_bar ul li a::after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 4px;
    background: #ff6600;
    transition: width .4s;
    position:absolute;
    left:50%;
    bottom:0;
    transform: translateX(-50%);    
}

.nav_bar ul li a:hover::after{
    width: 100%;

}

 <div class="nav_bar">
  <ul>
    <li><a href="#">Services</a></li>
    <li><a href="#">Solution</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Partners</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

1. когда я добавляю эту строку (position: absolute;) в nav_bar: после того, как она станет более нестабильной

2. я использую margin для выравнивания моего div с правой стороны, если я удалю это поле, оно будет плавать с левой стороны

Ответ №3:

Удалить .nav_bar{ margin-left:0px}

Добавить .nav_bar в положение: относительное;

добавить .nav_bar ul li a:после позиции: абсолютная;

 .nav_bar ul{
    list-style-type: none;
}

.nav_bar ul li{
    display: inline-block;
    text-align: center;
}

.nav_bar ul li a{
    text-decoration: none;
    padding: 12px;
    margin: 0;
    font-size: 20px;
    color: #aaa;
    display:block;
    position:relative;
}

.nav_bar ul li a::after{
    content: '';
    display: inline-block;
    width: 0px;
    height: 4px;
    background: #ff6600;
    transition: width .4s;
    position:absolute;
    left:50%;
    bottom:0;
    transform: translateX(-50%);    
}

.nav_bar ul li a:hover::after{
    width: 100%;

}

 <div class="nav_bar">
            <ul>
                <li><a href="#">Services</a></li>
                <li><a href="#">Solution</a></li>
                <li><a href="#">Support</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Contacts</a></li>
            </ul>
        </div>

1. я использую margin для выравнивания моего div с правой стороны, если я удалю это поле, оно будет плавать с левой стороны

2. вы должны выровнять свое меню по правой стороне, верно? логотип в левой части, кроме приведенного выше вывода, в порядке. правильно.