.float-right{float:right;}
/* CSS3 menu */
.css3-menu{
background: #323232;
margin: 0 0 0 -4px;
}
.css3-menu>ul{
line-height: 40px;
padding: 0 0 0 4px;
}
.css3-menu>ul>li{
list-style: none;
display: inline;
margin: 0 0 0 -4px;
position: relative;
}
.css3-menu>ul>li>a>i{
font-size: 14px;
}
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
display: inline-block;
padding: 5px 18px;
height: 40px;
color: #EFEFEF;
text-decoration: none;
}
.css3-menu>ul>li>a:hover, .css3-menu>ul>li>a:active, .css3-menu>ul>li>a.active{
background: #b71ae4;
color: #fff;
}
.dropdown{
display: none;
position: absolute;
left: 0;
top: 36px;
background: #444;
font-size: 14px;
}
.dropdown>li{
display: block;
list-style: none;
}
.dropdown>li>a:link, .dropdown>li>a:visited{
display: block;
color: #EFEFEF;
width: 140px;
text-decoration: none;
padding: 3px 15px;
border-bottom: dashed 1px #676767;
}
.dropdown>li>a:hover, .dropdown>li>a:active{
background: #b71ae4;
color: #fff;
border-bottom: solid 1px #b71ae4;
}
.css3-menu>ul>li.resp-menu{display: none !important;}
/* Media Queries */
@media only screen and (min-width : 580px) and (max-width : 800px){
/* CSS3 menu */
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
padding: 0 12px;
}
.dropdown{
top: 30px;
font-size: 13px;
}
.dropdown>li>a:link, .dropdown>li>a:visited{
padding: 0 10px;
}
}
@media only screen and (min-width : 1px) and (max-width : 579px){
/* CSS3 menu */
.css3-menu>ul>li>a:link, .css3-menu>ul>li>a:visited{
padding: 0 12px;
}
.dropdown{
top: 28px;
font-size: 12px;
}
.dropdown>li>a:link, .dropdown>li>a:visited{
width: 100px;
padding: 0px 10px;
line-height: 25px;
}
.css3-menu>ul>li.menu-li{display: none;}
.css3-menu>ul>li.resp-menu{display: inline !important;}
}
<script type="text/javascript">
$(document).ready(function () {
$(".hoverli").hover(
function () {
$('.dropdown').fadeIn('medium');
},
function () {
$('.dropdown').fadeOut('medium');
}
);
});
</script><nav class="css3-menu"><ul>
<li class="menu-li"><a href="#home" class="active"><i class="fa fa-home"></i></a></li>
<li class="hoverli menu-li"><a href="#projekty"><i class="fa fa-briefcase"></i> Projekty <i class="fa fa-angle-down"></i></a>
<ul class="dropdown">
<li><a href="#projekt01"><i class="fa fa-heart"></i> Lubię to menu</a>
<li><a href="#projekt02"><i class="fa fa-folder-open"></i> Projekt Dwa</a>
<li><a href="#projekt03"><i class="fa fa-flask"></i> Eksperyment</a>
</ul>
</li>
<li class="menu-li"><a href="#uslugi"><i class="fa fa-cogs"></i> Usługi</a></li>
<li class="menu-li"><a href="#galeria"><i class="fa fa-picture-o"></i> Galeria</a></li>
<li class="menu-li"><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li>
<li class="menu-li"><a href="#kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li>
<li class="float-right"><a href="#right"><i class="fa fa-user"></i> Right</a></li>
<li class="hoverli resp-menu"><a href="#resp-menu"><i class="fa fa-bars"></i> Menu <i class="fa fa-angle-down"></i></a>
<ul class="dropdown">
<li><a href="#home" class="active"><i class="fa fa-home"></i> Home</a></li>
<li><a href="#projekt01"><i class="fa fa-heart"></i> Lubię to menu</a>
<li><a href="#projekt02"><i class="fa fa-folder-open"></i> Projekt Dwa</a>
<li><a href="#projekt03"><i class="fa fa-flask"></i> Eksperyment</a>
<li><a href="#uslugi"><i class="fa fa-cogs"></i> Usługi</a></li>
<li><a href="#galeria"><i class="fa fa-picture-o"></i> Galeria</a></li>
<li><a href="#faq"><i class="fa fa-question-circle"></i> FAQ</a></li>
<li><a href="#kontakt"><i class="fa fa-envelope"></i> Kontakt</a></li>
</ul>
</li>
</ul></nav>