10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
1

Свой стиль для каждого элемента меню

04.07.2015, 07:03. Показов 1860. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день. Есть горизонтальное меню, сделанное с помощью списка. Не могу присвоить каждому элементу меню свой стиль. ДАЖЕ НЕ ПРИ НАВЕДЕНИИ. С помощью псевдоклассов пытался - тоже не выходить. Все элементы становятся как первый элемент псевдокласса, и все.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="menu">
 
<ul class="menu">
<li><a href="#" class="sp"><b>Список услуг</b></a></li>
<li><a href="#" class="pr"><b>Примеры работ</b></a></li>
<li><a href="#" class="price"><b>Прайс лист</b></a></li>
<li><a href="#" class="ya"><b>Я</b></a></li>
<li><a href="#" class="cont"><b>Контакты</b></a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></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
.menu {
margin: 0px;
}
 
ul a {
color: #888;
text-decoration: none;
font-family: 'ACLSe3jh';
display: inline-block;
background: #d2d6d5;
padding: 25px 20px;
webkit-transition: background .35s ease-out,color .35s ease-out;
transition: background .35s ease-out,color .35s ease-out;
border-left: 1px solid #000;
}
 
a:nth-child(1) {
color: green;
text-decoration: none;
font-family: 'ACLSe3jh';
display: inline-block;
background: #d2d6d5;
padding: 25px 20px;
webkit-transition: background .35s ease-out,color .35s ease-out;
transition: background .35s ease-out,color .35s ease-out;
border-left: 1px solid #000;
}
 
a:nth-child(2) {
color: green;
text-decoration: none;
font-family: 'ACLSe3jh';
display: inline-block;
background: #d2d6d5;
padding: 25px 20px;
webkit-transition: background .35s ease-out,color .35s ease-out;
transition: background .35s ease-out,color .35s ease-out;
border-left: 1px solid #000;
}
 
ul li {
display: inline;
margin: -2px;
}
 
 
ul li:first-child {
  border-left: none;
}
Миниатюры
Свой стиль для каждого элемента меню  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.07.2015, 07:03
Ответы с готовыми решениями:

Отдельный a:hover для каждого элемента меню
Может в css есть какая-нибудь возможность отдельно каждому верхнему уровеню меню (&lt;li&gt;Главная&lt;/li&gt;...

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

Как сделать контекстное меню для каждого элемента QListWidget
Не как не могу понять как сделать контекстное меню для каждого элемента QListWidget, помогите...

Создаине меню для каждого элемента списка по клику в мобильной версии.
Ребят, подскажите как сделать такой эффект в мобильной версии сайта. Может ссылки, книги, статьи...

1
10 / 10 / 4
Регистрация: 18.10.2012
Сообщений: 224
04.07.2015, 13:03  [ТС] 2
Все, уже не надо. Решил проблему по-типу:

HTML5
1
2
3
4
5
6
7
li:nth-last-child(8) {
border-top: 3px solid #444;
}
 
li:nth-last-child(8):hover {
background: #444;
}
0
04.07.2015, 13:03
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.07.2015, 13:03
Помогаю со студенческими работами здесь

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

Свой стиль для ComboBox
Как сделать дизайн ComboBox например на подобие того, что на картинке, у меня получается менять...

Как изменить стиль формы и вообще всех объектов на свой стиль?
Собственно вопрос в том как изменить стиль формы и вообще всех объектов на свой стиль?

Меняем стиль элементов управления на свой стиль
Меняем стиль элементов управления на свой стиль. Может кому пригодится. watch?v=0EI9_KhHeN0&amp;

Как врубить свой css стиль для вк ?
Браузер: Firefox

Создать свой стиль для неактивного TextBox
Пытаюсь добиться, что бы когда TextBox ставал IsEnable=False - принимал тот стиль, который я хочу...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru