Boa Tarde, Estou com problema em um menu desenvolvido por css, gostaria que ele ficasse responsivo, porem não obtive sucesso em todas as formas ja utilizadas!
Segue abaixo o Html
<body>
<header>
<a href="#" ><img src="images/cabecalho.png" class="logo"> </a>
</header>
<ul id="nav">
<li class="left"><a href="#">Home</a></li>
<li class="right"><a href="#">Quem Sou </a></li>
<li class="left"><a href="#">Diy</a></li>
<li class="right"><a href="#">Look Do Dia</a></li>
<li class="left"><a href="#">Contato</a></li>
<li class="right"><a href="#">Anuncie</a></li>
</ul>
</body>
Segue Abaixo o CSS
ul li {
float: left;
list-style: none;
margin-right: 1em;
}
li a {
color: #544738;
text-decoration: none;
float: left;
font-size: 25px;
padding: 12px;
}
li a:hover {
color: #7eb9be;
}
@font-face {
font-family: 'KulminoituvaRegular';
src: url('fonte/kulminoituva.ttf');
src: local('‚ò∫'), url('fonte/kulminoituva.ttf.woff') format('woff'), url('fonte/kulminoituva.ttf') format('truetype'), url('fonte/kulminoituva.ttf.svg#webfontHNAi9IoX') format('svg');
font-weight: normal;
font-style: normal;
}
ul li {
float: left;
list-style: none;
margin-right: 1em;
font-family: 'KulminoituvaRegular', helvetica, sans-serif;
font-size: 25px;
padding: 12px;
display: block;
margin-left: 4%;
margin-right: auto;
}
li a {
color: #544738;
text-decoration: none;
float: left;
}
li a:hover {
color: #7eb9be;
}
li a:hover {
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
}
.left a:hover {
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
}
.right a:hover {
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);
}
.left a:hover {
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: rotate(-10deg) scale(1.2);
-moz-transform: rotate(-10deg) scale(1.2);
-o-transform: rotate(-10deg) scale(1.2);
}
.right a:hover {
/*Transition*/
-webkit-transition:All .5s ease;
-moz-transition:All .5s ease;
-o-transition:All .5s ease;
/*Transform*/
-webkit-transform: rotate(10deg) scale(1.2);
-moz-transform: rotate(10deg) scale(1.2);
-o-transform: rotate(10deg) scale(1.2);}