Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/12: Рейтинг темы: голосов - 12, средняя оценка - 4.67
11 / 11 / 5
Регистрация: 27.09.2013
Сообщений: 278
1

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

18.02.2014, 13:15. Просмотров 2512. Ответов 2
Метки нет (Все метки)

Делаю выпадающее меню, почти все сделал, осталось по сути немного, и не могу закончить.

Вот код:

http://codepen.io/Dzvene/pen/klrCg
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
28
29
30
31
32
<div class="head_menu">
        <ul class="menu">
            <li><a href="#">Главная</a></li>
            <li><a href="#" >Новости</a>
                <ul class="drop">
                    <li><a href="#">Все</a></li>
                    <li><a href="#">Происшествия   </a></li>
                    <li><a href="#">Экономика   </a></li> 
                    <li><a href="#">Общество</a></li> 
                </ul>
            </li>
            <li><a href="#">Погода</a></li>
            <li>
                <a href="#">Программа</a>
                <ul class="drop dropToLeft">            
                    <li><a href="#">Все</a></li>
                    <li><a href="#">Происшествия   </a></li>
                    <li><a href="#">Экономика   </a></li> 
                    <li><a href="#">Общество</a></li>                
                </ul>
            </li>
            <li>
                <a href="#">Афиша</a>
                <ul class="drop dropToLeft">
                    <li><a href="#">Все</a></li>
                    <li><a href="#">Происшествия   </a></li>
                    <li><a href="#">Экономика   </a></li> 
                    <li><a href="#">Общество</a></li>
                </ul>
            </li>
        </ul>
     </div>
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
64
65
.head_menu{
    width: 100%;
    overflow: hidden;
}
.menu{
    margin: 30px 0 130px 0; 
    width: auto;  
    font: 13px Arial, Helvetica, sans-serif;
}
.menu li{
    float: left;
    position: relative;
}
 
.menu a{
    text-decoration: none;
    color: #0076d1;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    display: block;
    position: relative;
}
.menu a:hover{
    border: 1px solid #DDD;
    padding: 9px;  
}
.menu li:hover a, menu  li.onhover a{
    background: white;
    color: #5c5c5c;
    z-index: 200;
} 
.menu li:hover .drop{
    left: 0;
    background:white;
}
.menu li:hover .dropToLeft{
    left: auto;
    right: 0;
    background:white;
}
.drop{
    position: absolute;
    z-index:5;
    left: -9999px;
    border: 1px solid #DDD;
    color:#0F4F89;
    top:35px;
      padding: 10px 0 10px 0;
      width:315px;            
}
.drop li{
      float: left;
}
.drop a{
      float: left;
    font-size: 12px;
    text-align: left; 
    z-index: 0;
      margin-right: -5px;
}
.drop a:hover{
    text-decoration: underline;
    border: 1px solid #FFFFFF;
}
Не фиксируется бордер раздела меню, когда юзаешь подменю.
 Комментарий модератора 
Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.02.2014, 13:15
Ответы с готовыми решениями:

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

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

Выпадающее меню css, сдвигается подменю
Доброго всем суток. Есть меню, все работает. Но при наведении на &quot;Довідники&quot;, подменю выпадаем...

Выпадающее горизонтальное меню, изменить размер ячеек подменю под текст
Как сделать чтобы ячейки выпадающего меню были другого размера? Скриншот прилагаю:

2
11 / 11 / 5
Регистрация: 27.09.2013
Сообщений: 278
18.02.2014, 16:18  [ТС] 2
Осталось последнее:

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


Подскажите как убрать эту линию пожалуйста
0
11 / 11 / 5
Регистрация: 27.09.2013
Сообщений: 278
18.02.2014, 22:35  [ТС] 3
Всем спасибо, сделал.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.02.2014, 22:35

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Подменю по центру родительского элемента меню в горизонтальном меню
Нужно чтобы выпадающее под-меню располагалось по центру родительского элемента меню в...

Выпадающее меню - разный размер шрифта для разных уровней меню
Есть у меня данный список, но возник вопрос: &quot;как сделать чтобы в надписи буквы1 был шрифт 19px, а...

Как прикрепить выпадающее меню к названию в основном меню
Здравствуйте. Сейчас на сайте есть вертикальное меню, и при наведении на какой-либо его пункт,...

Выпадающее меню при наведении
Ребят, нужно привести к нормальному виду. Должно быть выпадающее меню при наведении на город. И в...


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

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

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