[Решено] Добавить символ в меню сайта

[Electr0n 1]

Ребят подскажите пожалуйста, как добавить такие символы  к каждой под категории с помощью css?

Я просто написал в названии, но такой вариант к сожалению не устраивает. 

Вот сам символ:    › 

 

 

Вот мой код css отвечающий за меню.

 

/* Menu

 

------------------------------------------------------------*/

 

 

 

#menu {

 

height: 50px;

 

margin-bottom: 10px;

 

//background: #7ECEFD;

 

//background: -moz-linear-gradient(top, #2185C5 100%, #2185C5 100%);

 

//background: -webkit-gradient(linear, center top, center bottom, color-stop(100%, #2185C5 ), color-stop(100%, #2185C5 ));

 

// -webkit-box-shadow: 0 8px 10px -8px #33506F,

 

inset 0 2px 0 -1px #3C93F5;

 

  // -moz-box-shadow: 0 8px 10px -8px #2185C5,

 

inset 0 2px 0 -1px #2185C5;

 

// box-shadow: 0 8px 10px -8px #969696,

 

inset 0 2px 0 -1px #06639E;

// border-bottom: 6px solid #7ECEFD;

//background: url("../image/menu1.png");

background: transparent linear-gradient(to bottom, #3498db 35%, #3498db 100%) repeat scroll 0% 0%;

}

 

#menu ul {

 

list-style: none;

 

margin: 0;

 

padding: 0;

 

}

 

#menu > ul > li {

 

position: relative;

 

float: left;

 

z-index: 20;

 

padding: 6px 5px 0 0;

 

border-right: 1px solid #3BA2E6;

 

// -webkit-box-shadow: 2px 0 0 -1px #78ADE8;

 

  //-moz-box-shadow: 2px 0 0 -1px #78ADE8;

 

// box-shadow: 2px 0 0 -1px #367ABC;

 

-webkit-transition: background .2s;

 

  -moz-transition: background .2s;

 

transition: background .2s;

 

}

 

#menu > ul > li:hover {

 

background: transparent linear-gradient(to bottom, #647382 15%, #48535F 100%) repeat scroll 0% 0%;

 

//background: #8BB724;

 

//-webkit-box-shadow: 0 0 0 0 #8BB724;

 

//  -moz-box-shadow: 0 0 0 0 #8BB724;

 

//box-shadow: 0 0 0 0 #8BB724;

 

}

 

#menu > ul > li > a {

 

font-size: 12px;

 

font-weight: bold;

 

color: #FFF;

 

line-height: 27px;

 

text-transform: uppercase;

 

text-decoration: none;

 

display: block;

 

padding: 6px 10px 6px 10px;

 

margin-bottom: 5px;

 

z-index: 6;

 

position: relative;

 

//-webkit-text-shadow: 0 1px 1px #5296D8;

 

//  -moz-text-shadow: 0 1px 1px #5296D8;

 

//text-shadow: 0 1px 1px #5296D8;

font-family: "Verdana",serif,arial;

}

 

#menu > ul > li:hover > a {

 

}

 

#menu > ul > li > div {

 

display: none;

 

/*background: #06639E;*/

 

        background: #FFFFFF;

 

position: absolute;

 

z-index: 5;

 

border: 2px solid #3498DB;

    box-shadow: 0  3px 3px #717171;

// border-top: 4px solid #2185C5;

}

 

#menu > ul > li:hover > div {

 

display: table;

 

}

 

#menu > ul > li > div > ul {

 

display: table-cell;

 

}

 

#menu > ul > li ul + ul {

 

padding-left: 20px;

 

}

 

#menu > ul > li ul > li > a {

 

text-decoration: none;

 

padding: 8px 20px 8px 20px;

 

        font-family: varela, Arial;

 

        text-transform: none;

 

font-size: 14px;

 

color: #2B2B2B;

 

display: block;

 

min-width: 120px;

white-space: nowrap;

font-family: "Verdana",serif,arial;

 //border-bottom: 1px dotted #FF6464;

 

 

}

 

#menu > ul > li ul > li > a:hover {

 

background: #4ECDC4;

 

        color: #fff;

 

}

 

/*#menu > ul > li > div > ul > li > a {

 

color: #06639E;

 

        text-transform: capitalize;

 

}*/

 

 

 

Изменено 30 сентября, 2015 пользователем Electr0n

[koreshok 127]

background: url('../image/символ.png') no-repeat 0px 0px;

[ArtemPitov 386]

в самом меню руками прописать или 

#menu > ul > li:after{

conten:"› ";

}

[Electr0n 1]

в самом меню руками прописать или 

#menu > ul > li:after{

conten:"› ";

}

Прописал в стилях 

#menu > ul > li:after{

content:"› ";

}

 

 

получилось так 

 

 

Появилось но не там где нужно )) 

[Electr0n 1]

background: url('../image/символ.png') no-repeat 0px 0px;

Нечего не изменилось. 

 

Закинул изображение в папку image (в шаблоне)

 

Прописал в стилях меню. 

Изменено 30 сентября, 2015 пользователем Electr0n

[ArtemPitov 386]

Прописал в стилях 

#menu > ul > li:after{

content:"› ";

}

 

 

получилось так 

 

 

Появилось но не там где нужно )) 

#menu > ul > li > div > ul > li > a:after{

content:"› ";

}

[Electr0n 1]

#menu > ul > li > div > ul > li > a:after{

content:"› ";

}

Подскажите пожалуйста как сделать с левой стороны и с отступом от текста?

 

Т.е. вот так:

 

 

Вот что получилось:

Изменено 30 сентября, 2015 пользователем Electr0n

[ArtemPitov 386]

#menu > ul > li > div > ul > li > a:before{

content:"› ";

}

[Electr0n 1]

 

#menu > ul > li > div > ul > li > a:before{

content:"› ";

}

 

Спасибо огроменное ))

 

Вопрос решен.