no puedo alinear bien a la izquierda los <ul> del <nav>

jechiotta · #1 (**permalink**) 20/01/2017, 15:48

buenas tardes, tengo este archivo html donde solo tiene un Nav que no me permite poner adentro correctamente una etiqueta <ul>

Código HTML:

Ver original<!doctype html>
<html>
<head>
        <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styleNav.css" type="text/css">
    <link rel="stylesheet" href="js/jquery-3.1.1.min.js">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
        <title>Nav</title>
</head>
<body>
    <nav>
        <ul class="fa-ul">
            <li><a class="menu" href="#">&nbsp; </a></li>
            <li><a class="menu" href="#">&nbsp;  </a></li>
            <li><a class="menu" href="#">&nbsp; </a></li>
            <li><a class="menu" href="#">&nbsp; </a></li>
            <li><a class="menu" href="#">&nbsp; </a></li>
            <li><a class="menu" href="#">&nbsp; </a></li>
            <li><a class="menu" href="#">&nbsp; </a></li>
            <li><a class="menu" href="#">&nbsp; </a></li>
        </ul>
    </nav>
</body>
</html>

y el codigo css es

Código CSS:

Ver originalnav {
    background-color: dimgray;
    overflow: hidden;
    width: 250px;
    height: 100%;
    position: absolute;
    z-index: 1000;
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}
nav ul li {
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 20px;
    text-decoration: none;
    text-align: left;
    display: inline-block;
    list-style-type: none;
    float:left;
    margin: 0px;
    padding: 10px;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #5C5C5C;
}
nav ul li:hover {
    background-color: #625F5F;
}
a {
    width: 100%;
    height: 100%;
    color: #CACACA;
    text-decoration: none;
    display: block;
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

espero me puedan dar una mano porque no se que es

AngelKrak · #2 (**permalink**) 20/01/2017, 23:13

Reestablece el margin y padding a la etiqueta ul ;)

Código CSS:

Ver originalnav ul {
  margin: 0;
  padding: 0;
}

https://codepen.io/anon/pen/OWmLER

Aparte vee estos 2 videos, te los recomiendo ;)
https://www.youtube.com/watch?v=8w5mfbMH4Gw
https://www.youtube.com/watch?v=kaOlwXiYcgk

y aqui te dejo un Menu Responsive para que te enseñes a hacerlos ;)
https://www.youtube.com/watch?v=EB4BG3QZn3o