Fiz um menu responsivo, e estou tendo problemas com as bordas, elas estão escapando para direita quando tem a quebra de linha. Já tentei alterar algumas configurações de CSS mas nenhuma delas teve sucesso.
Segue o código e uma imagem do problema:
CSS:
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration:none;
}
body {
font: 16px san-serif;
}
.menu {
width: 90%;
max-width: 980px;
margin: 20px auto;
background: orange;
border-radius: 5px;
text-align: center;
display: table;
}
.menu ul li { display: inline; }
.menu ul li a{
color: #fff;
display: inline-block;
padding: 10px;
border-right: 1px solid #fff;
}
/* Tira última dorda do Menu */
.menu ul li:last-child a{
border-right: 0;
/* Tira última dorda do Menu */
}
/* Se Resolução for no máximo ( px ), faça */
@media ( max-width: 768px ) {
.menu ul li {
width: 50%;
float: left;
}
.menu ul li a{
width: 100%;
border-bottom: 1px solid #fff;
border-left: 0;
}
}
@media ( max-width: 480px ) {
.menu ul li {
width: 100%
}
}
HTML:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Teste</title>
<!-- Bootstrap -->
<link href="../css/css.css" rel="stylesheet" type="text/css">
</head>
<body style="background:#eee;">
<!-- Inicio Menu -->
<nav class="menu" >
<ul>
<li><a href="#" title="">Home</a></li>
<li><a href="#" title="">Quem Somos</a></li>
<li><a href="#" title="">Política</a></li>
<li><a href="#" title="">Portifólio</a></li>
<li><a href="#" title="">Equipe</a></li>
<li><a href="#" title="">Contato</a></li>
</ul>
</nav>
</body>
</html>
