Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/3: Рейтинг темы: голосов - 3, средняя оценка - 4.67
federal24
1 / 1 / 0
Регистрация: 22.09.2012
Сообщений: 19
1

При наведении сдвигается меню

05.12.2016, 18:17. Просмотров 577. Ответов 1
Метки нет (Все метки)

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style/style.css">
    <title>my site</title>
</head>
<body>
    <header>
        <nav>
            <div class="logo"><span class="mod">modus</span><span class="ver">versus</span></div>
            <ul>
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">features</a></li>
                <li><a href="#">contacts</a></li>
            </ul>
        </nav>
        <div class="contakt"></div>
    </header>
    <div class="content"></div>
    <footer></footer>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
*{
    margin: 0;
    padding: 0;
    font-size: 0;
}
body{
    max-width: 1500px;
    margin: 0 auto;
}
nav{
    background-color: #76c7c0;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 172px;
 
}
.mod{
    font-size: 30px;
    text-transform: uppercase;
}
.ver{
    font-size: 25px;
}
.mod,.ver,nav li a{
    color: #fff;
}
nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
nav li a{
    font-size: 13px;
    text-decoration: none;
}
 
nav li a:hover:before{
    content: "Л…";
    margin-right: 8px;
}
 
nav li:hover{
    background-color: #62a29e;
    box-shadow: 0px 3px 0px 0px rgba(82,139,134,1);
    height: 30px;
    border-radius: 3px;
    padding: 0 19px 0 16px;
}
 
nav li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-transform: uppercase;
    list-style: none;
    margin-right: 53px;
}
nav li:last-child{
    margin-right: 0;
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
05.12.2016, 18:17
Ответы с готовыми решениями:

При наведении курсором на меню оно сдвигается
что только не делал ... http://ivan-skvortsov.com.ua/ проблема в чём: когда...

Не сдвигается картинка при наведении
Есть картинка, я хочу сделать так, когда наводишь на нее, то она поднимается...

При наведении не активные пункты меню смещаются, и не применяются изменения фона при наведении
У меня возникла проблема, при наведении не активные пункты меню смещаются, и не...

Работа меню при наведении, оставить фон основного меню
Добрый день! Помогите решить вопрос. Есть dropdown меню (белый буквы и черные...

Не пойму как в меню при наведении отобразить под меню
Сделал простенькое меню, как мне при наведении на ли отобразить ul что по...

1
Kenworth
102 / 102 / 58
Регистрация: 21.10.2013
Сообщений: 324
05.12.2016, 23:31 2
здесь атрибут "nav li:hover" - должен просто дописывать изменение цветовой гаммы, а в данном примере он дописывает те свойства, которых у "nav li" нет. Вот по этому и происходят прыжки.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
nav li{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-transform: uppercase;
    list-style: none;
    margin-right: 53px;
    
   
    /*Перенести эти свойства с :hover*/
    height: 30px;
    border-radius: 3px;
    padding: 0 19px 0 16px;
}
 
 
 
 
nav li:hover{
    background-color: #62a29e;
    box-shadow: 0px 3px 0px 0px rgba(82,139,134,1);
}
Но и при такой структуре нужно подумать о псевдоэлементе :before, который появляется при наведении на сам текст. Двойной ховер как то выходит
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.12.2016, 23:31

Сделать меню при наведении
Привет всем. Помогите сделать меню при наведении. На скриншотах видно что есть...

Меню с подсветкой при наведении
Вот мое меню которое я делаю: Как сделать что было похоже как на этом сайте ...

Меню(Картинка при наведении)
Ребята, помогите кто реализовать меню.........при наведении на название раздела...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru