Цитата:
Сообщение от Hispanic
сохрани его в png или svg и поставь сверху... или я что то не понимаю? можно еще задвинуть margin-ом margin-top: -20px (размер треугольника)
|
Вот именно как поставить? Кнопка из трёх полос картинка, дальше открывается меню при наведении, в это меню не могу внедрить треугольник. Если можно то без картинки нарисовать на css треугольник
PHP код:
<div id="nav">
<li><a href="#"><img class="button_top" src="/images/button_top.png"></img></a>
<ul>
<li><a href="#">Все категории</a></li>
<li><a href="#">Все эксперты</a></li>
<li><a href="#">Все статьи</a></li>
<li><a href="#">Рекламные статьи</a></li>
<li><a href="#">Реклама</a></li>
<hr>
<li><a href="#">Войти</a></li>
<li><a href="#">Зарегистрироваться</a></li>
</ul>
</li>
</div>
PHP код:
#nav,#nav li ul{
margin:0px;
padding:0px;
list-style:none;
margin-top:-50px;
margin-right:15px;
}
#nav > li{
float:right;
width:50px;
}
#nav li ul{
display:none;
background-image: url(/images/arrow_menu.png) no-repeat;
position:absolute;
z-index:100;
width:180px;
margin-left:-116px;
height:230px;
box-shadow: 0 0 0.4em 0.4em rgba(122,122,122,0.1);
border-radius: 0 0 5px 5px;
}
#nav li:hover ul {display:block;margin-top:10px;}
#nav > li{
text-align:center;
padding:10px 0px 10px 0px;
}
#nav > li > a{
font: 14px Arial, Verdana, sans-serif;
color:#000000;
text-decoration:none;
text-transform:uppercase;
}
#nav li ul{
margin-top:10px;
background-color:#ffffff;
border:1px solid #E8E8E8;
}
#nav li ul li{
text-align:left;
padding:5px 5px 5px 15px;
}
#nav li ul li a{
font: 14px Arial, Verdana, sans-serif;
color:#9b9b9b;
text-decoration:none;
}
#nav li ul li a:hover{
font: 14px Arial, Verdana, sans-serif;
color:#9b9b9b;
text-decoration:none;
}
.button_top {
margin-bottom:-5px;
margin-left:15px;
}
.button_top:hover {
margin-bottom:-5px;
margin-left:15px;
background-color:#4373CA;
}
16.11.2015, 22:11
