Добрый день, относительно недавно начал углубляться в веб и вот начал верстку первого своего макета, но суть не в этом.
-
Возникла проблема с меню, которое должно по идее выпадать, но по какой-то причине :hover тут я так понимаю не подходит.
-
Возможно ли было реализовать последний пункт меню(корзина) через псведоэлемент, я пытался, но что-то там явно было не так и достаточно проблематично было всё выравнивать и задавать отступы.
<ul class="main-nav"> <li><a href="#">Bicycles</a></li> <ul class="sub-menu"> <li><a href="#">Fixed / single speed</a></li> <li><a href="#">city bikes</a></li> <li><a href="#">premium series</a></li> </ul> <li><a href="#">parts</a></li> <li><a href="#">accessories</a></li> <li><a href="#">extras</a></li> <li><a href="#"><img src="img/basket_icon.png" alt=""></a></li> </ul> </nav> </div> </div>[details=CSS]@import url(‘https://fonts.googleapis.com/css?family=Roboto:100,400,700’);
- {
margin:0;
padding:0;
}
body {
}
.container {
max-width:1097px;
margin:0 auto;
}
header {
}
ul {
list-style:none;
}
a, h1 {
font-family:“Roboto”, sans-serif;
font-weight:bold;
}
.main-nav {
position:relative;
}
.main-nav a{
display:block;
border-radius:5px;
padding:15px;
background:transparent;
text-decoration:none;
color:#fff;
text-transform:uppercase;
font-size:15px;
}
.main-nav a:hover {
background:#FBFF00;
color:#000;
}
.main-nav > li:last-child a:hover {
background:transparent;
}.logo {
margin-top:20px;
float:left;
}
nav {
float:right;
margin-top:20px;
}
.main-nav > li{
display:inline-block;
vertical-align:middle;
}
.sub-menu {
display:none;
position:absolute;
background:#FBFF00;
border-radius:5px;
margin-top:-15px;
}
.sub-menu li:first-child {
padding-top:10px;
}
.sub-menu a {
color:#000;
}
.slider {background:url(../img/slider_bg.png) no-repeat; width:100%; height:980px;}
.slider_objects {
padding-top:400px;
}
h1 {
color:#fff;
text-transform:uppercase;
font-size:50px;
}
.yellow span {
color:#E2D500;
}
.yellow p {
color:#fff;
font-size:28px;
font-family:“Roboto Thin”, sans-serif;
}
.slider_objects a {
margin-top:20px;
padding:15px 25px;
display:inline-block;
background:#000;
color:#FBFF00;
font-size:12px;
border-radius:15px;
text-transform:uppercase;
text-decoration:none;
}
.slider_objects-center {
max-width:1097px;
margin:0 auto;
text-align:center;}
.slider_objects-right {
float:right;
}
.slider_objects-left {
float:left;
}
[/details]
Если делал кто байкшоп из предыдущей рассылки, скиньте пожалуйста, очень интересно глянуть как вы реализовывали всё. Спасибо за внимание. - {
