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

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

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



Новичок
*

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




Приветствую всех! Есть такой код 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  
Дата
Цитировать сообщение

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



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

Профиль
Группа: Эксперт
Группа переписки
Сообщений: 22932
Пользователь №: 20039
На форуме: 7 лет, 7 месяцев, 18 дней
Карма: 608




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


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

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



Новичок
*

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




Цитата (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  
Дата
Цитировать сообщение

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



c начала 2017 года в Новосибирске.
******

Профиль
Журнал
Группа: ★ЛжеЭксперт★
Завсегдатай форума
Сообщений: 26442
Пользователь №: 21350
На форуме: 7 лет, 4 месяца, 11 дней
Карма: 739




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

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

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


--------------------
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql (TSql, BI OLAP, MDX), Git, SVN, CodeIgnater, Yii 2, JiRA, Redmine, Bitbucket, Composer
PMПисьмо на e-mail пользователю
    0   Для быстрого поиска похожих сообщений выделите 1-2 слова в тексте и нажмите сюда Для быстрой цитаты из этого сообщения выделите текст и нажмите сюда
  Быстрый ответ
Информация о Госте
Введите Ваше имя
Кнопки кодов
Для вставки цитаты, выделите нужный текст и
НАЖМИТЕ СЮДА
Введите сообщение
Смайлики
:huh:  :o  ;) 
:P  :D  :lol: 
B)  :rolleyes:  <_< 
:)  :angry:  :( 
:unsure:  :blink:  :ph34r: 
     
Показать всё

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

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