Правила     Закладки     Карма    Календарь    Журналы    Помощь    Поиск    PDA    Чат   
        СМС-ки
   
Пейджер выключен!
 
Фильтр авторов:    показать 
  скрыть
  Ответ в темуСоздание новой темыСоздание опроса

> Как сделать стрелку в последнем пункте меню
evgeni1977  
 ۩  [x] Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 6
Пользователь №: 42115
На форуме: 1 год, 19 дней
Карма:




Приветствую всех! Есть такой код HTML:




<ul class="navigation">
<li><a
href="#">Пункт 1</a></li>
<li><a
href="#">Пункт 2</a></li>
<li><a
href="#">Пункт 3</a></li>
<li
class="item"><a href="#">Пункт 4</a>
<ul>
<li><a
href="#">Раскрывающийся пункт 1</a></li>
<li><a
href="#">Раскрывающийся пункт 2</a></li>
<li><a
href="#">Раскрывающийся пункт 3</a></li>
<li><a
href="#">Раскрывающийся пункт 4</a></li>
<li><a
href="#">Раскрывающийся пункт 5</a></li>
<li><a
href="#">Раскрывающийся пункт 6</a></li>
</ul>
</li>
</ul>


и CSS код:

.navigation {
list-style: none;
}
.navigation li {
float: left;
margin-right: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}
.navigation li a {
display: block;
padding: 15px 20px;

color: #3f3f3f;
text-decoration: none;
position: relative;
}
.navigation li a:hover {
color: #6b6b6b;
}


Подскажите пожалуйста, как к последнему пункту (раскрывающийся список) сделать стрелку? Заранее спасибо.
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
inpost  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Помагите Здесь живу!!!
******

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 22693
Пользователь №: 20039
На форуме: 6 лет, 11 месяцев, 29 дней
Карма: 599




А в чём возникают трудности? У тебя есть .item , ему прописать картинку в list-style .


--------------------
Обучаю веб-программированию качественно и не дорого: http://school-php.com
Фрилансер, принимаю заказы: PHP, JS, AS (видео-чаты). Писать в ЛС (Личные сообщения на phpforum).
PMПисьмо на e-mail пользователюICQ
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
evgeni1977  
 ۩  Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Новичок
*

Профиль
Группа: Пользователь
Сообщений: 6
Пользователь №: 42115
На форуме: 1 год, 19 дней
Карма:




Цитата (inpost @ 26.11.2015 - 14:30)
А в чём возникают трудности? У тебя есть .item , ему прописать картинку в list-style .

Да "item" есть. Просто сам пытался, не получилось. А когда копировал код сюда, просто забыл убрать для ясности его из HTMl кода. Внизу последний стиль у меня ещё так:


.navigation li item{
background:url("/img/item_arrow.png") no-repeat right center;
}



Но судя по тому, что не работает, не правильно :)
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
Игорь_Vasinsky  
Дата
Цитировать сообщение

Пользователя сейчас нет на форуме



Лысый и злой
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 25989
Пользователь №: 21350
На форуме: 6 лет, 8 месяцев, 23 дня
Карма: 725

Не курю:
1 год, 2 месяца, 9 дней


evgeni1977
Есть такое понятие в CSS - как псевдокласс http://htmlbook.ru/css/last-child

он сам найдёт последнего чилда у списка и присвоим ему твой стиль.

http://jsfiddle.net/D7scL/1/


--------------------
Халявные ответы кончились.
Если нужен готовый код - готовьтесь заплатить.
Райкин тоже был артист

Возле дома был сарай
А когда всё хорошо
Можно просто покурить

user posted image
http://ufa102.xyz/
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

Опции сообщения  Включить смайлики?
 Включить подпись?
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:

Опции темы Ответ в темуСоздание новой темыСоздание опроса