Opacity перекрывает текст

@kirill1059 · Регистрация: 16.04.2013

Author24 — интернет-сервис помощи студентам

Добрый день, не могу понять как исправить.
При наведении на текст opacity перекрывает текст.
https://www.cyberforum.ru/atta... 1412871729

HTML5

<ul class="menu">
            <li>Главная</li>
            <li>Телефоны</li>
            <li>Компьютеры</li>
            <li>Планшеты</li>
            <li>Часы</li>
            <li>Для дома</li>
            <li>Акции</li>
        </ul>

CSS

ul.menu {
    margin: 0;
    padding: 4px;
    padding-top: 11px;
    font-family: pragmaticalightc;
    font-size: 16px;
    z-index: 999;
}
 
ul.menu li {
    display: inline;
    margin-right: 40px;
    border: solid 1px #990099;
    padding: 10px;
    cursor: pointer;
    color: white;
}
 
ul.menu li:hover {
    border: solid 1px black;
    background: black;
    opacity: 0.4;
}

@kirill1059 · 09.10.2014, 20:46 **[ТС]**

Разобрался)
вместо opacity прописал background-color: rgba(0,0,0,0.5);

@aj17 · 09.10.2014, 20:47

Вместо opacity дайте

CSS

1	background: rgba(0, 0, 0, 0.4);

@fol · 09.10.2014, 20:59

тоже не кроссбраузерно, ие не поймет rgba

@kirill1059 14 / 14 / 3 Регистрация: 16.04.2013 Сообщений: 404
	09.10.2014, 20:46 [ТС]	2
	Разобрался) вместо opacity прописал background-color: rgba(0,0,0,0.5); 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	09.10.2014, 20:59	4
	тоже не кроссбраузерно, ие не поймет rgba 0