Не става чрез: … float:left > float: center; …
демо:
Извън темата
Извън темата
Код за потвърждение: Избери целия код
<ul class="ml-navigation-bar-4">
<li class="active"><a href="#">Начало<br/><em>Начална страница</em></a></li>
<li><a href="#">За нас<br/><em>Кои сме ние?</em></a>
</li>
<li><a href="#">Услуги<br/><em>Предложения</em></a>
</li>
<li><a href="#">Цени<br/><em>Ценообразуване</em></a></li>
<li><a href="#">Контакт<br/><em>Напишете ни съобщение</em></a></li>
</ul>
Извън темата
Код за потвърждение: Избери целия код
ul.ml-navigation-bar-4{
width: 100%;
display: block;
height: 70px;
background-color: #61666d;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.25);
box-shadow: 0 1px 2px rgba(0,0,0,.25);
background-image: -webkit-linear-gradient(bottom, #54585f, #70747b);
background-image: -moz-linear-gradient(bottom, #54585f, #70747b);
background-image: -o-linear-gradient(bottom, #54585f, #70747b);
background-image: -ms-linear-gradient(bottom, #54585f, #70747b);
background-image: linear-gradient(to top, #54585f, #70747b);
}
/*List Items*/
ul.ml-navigation-bar-4 li{
display:block;
float:left;
border-right: 1px solid #555;
-webkit-box-shadow: 1px 0px 0px rgba(255,255,255,.15);
-moz-box-shadow: 1px 0px 0px rgba(255,255,255,.15);
box-shadow: 1px 0px 0px rgba(255,255,255,.15);
}
ul.ml-navigation-bar-4 ul li {
float:none;
margin: 5px 0;
}
/* Regular Links*/
ul.ml-navigation-bar-4 a:active, ul.ml-navigation-bar-4 a:focus {
outline-style:none;
}
ul.ml-navigation-bar-4 a {
height: 70px;
display:block;
line-height: 59px;
background: none;
text-shadow: 0 1px 0 rgba(0,0,0,.50);
padding: 0px 16px;
text-decoration: none;
color: #fff;
margin: 0px;
font-weight: bold;
font-size: 30px;
text-transform: uppercase;
font-weight: condensed;
font-family: 'Open Sans Condensed', "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
ul.ml-navigation-bar-4 a em {
font-size: 15px;
display: block;
margin-top: -38px;
text-shadow: none;
color: #ааа;
opacity: 0.50;
text-transform: lowercase;
font-style: italic;
font-weight: bold;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*Multi-level Links*/
ul.ml-navigation-bar-4 ul a {
margin: 0px;
height: 40px;
line-height: 40px;
font-size: 14px;
}
ul.ml-navigation-bar-4 span{
overflow:hidden;
}
ul.ml-navigation-bar-4 ul a {
text-align:left;
white-space:nowrap;
}
ul.ml-navigation-bar-4 li:hover{
position:relative;
}
/*Active State*/
ul.ml-navigation-bar-4 li.active a, ul.ml-navigation-bar-4 li.active:hover a {
background-color: #e4ac35;
background-image: -webkit-linear-gradient(bottom, #de9f2b, #e7b544);
background-image: -moz-linear-gradient(bottom, #de9f2b, #e7b544);
background-image: -o-linear-gradient(bottom, #de9f2b, #e7b544);
background-image: -ms-linear-gradient(bottom, #de9f2b, #e7b544);
background-image: linear-gradient(to top, #de9f2b, #e7b544);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/*Hover State*/
ul.ml-navigation-bar-4 li:hover>a {
color: #fff;
background-color: #52565c;
-webkit-box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
-moz-box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
text-decoration:none;
}
ul.ml-navigation-bar-4 ul li:hover>a {
color: #fff;
background-color: #52565c;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
ul.ml-navigation-bar-4 li a:hover{
position:relative;
}
/*Arrow Images*/
ul.ml-navigation-bar-4 span{
display:block;
background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png);
background-position:right center;
background-repeat: no-repeat;
padding-right:30px;}
ul.ml-navigation-bar-4 li:hover>a>span{
background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png);
}
ul.ml-navigation-bar-4 a:hover span{ background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png)}
ul.ml-navigation-bar-4 ul span,ul.ml-navigation-bar-4 a:hover table span{ background-image:url(https://medialoot.com/preview/navigation-bars/arrow-2.png)}
ul.ml-navigation-bar-4 ul li:hover > a span{ background-image:url(./https://medialoot.com/preview/navigation-bars/arrow-2a.png);}
ul.ml-navigation-bar-4 table a:hover span,ul.ml-navigation-bar-4 table a:hover a:hover span,ul.ml-navigation-bar-4 table a:hover a:hover a:hover span{background-image:url(./arrow-1.png)}
ul.ml-navigation-bar-4 table a:hover table span,ul.ml-navigation-bar-4 table a:hover a:hover table span{background-image:url(./arrow-1.png)}