My navbar collapse is collapsing but when im not hovering on it

Question

Im making a landing page for a job and doing the navbar then i figured it out that i have to set the navbar fixed to top, after i fixed it the collapse of the second bar is just showing up when im not even hover on it. Had to add more margin to the next item to work "propertly" but is kinda ugly

.fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    border-width: 0 0 1px;
}

#nav ul li a {
    display: block;
    padding: 7px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

#nav li a:hover {
    color: #000000;
    background-color: #fff; 
}

#nav .navbar-izquierda ul {
    width: 100%;
    float: left;
    margin: auto;
    padding: 0;
    list-style: none;
    background-color: #434343;
    box-shadow: 10px 0 10px #000000;
    border-bottom: 1px solid #000000;
}


.clearfix:after {
    display:block;
    clear:both;
}

.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

.menu {
    width: auto;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
}

.menu a {
    transition:all linear 0.15s;
    color:#919191;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#be5b70;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:14px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}

/*----- DropDown Navbar Inferior -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition: opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:inline-block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

<div class="navbar-izquierda menu-wrap">
<nav class="menu">
    <ul class="clearfix">
        <li class="active"><a href="#">Portatil</a></li>
        <li><a href="#">Desk</a></li>
        <li><a href="#">Workstation</a></li>
        <li><a href="#">Promotions</a></li>
        <li><a href="#">Services and Guarantees <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
            <li><a href="#">Error 1</a></li>
            <li><a href="#">Error 2</a></li>
            <li><a href="#">Horror 3</a></li>
        </ul>
        </li>        
    </ul>
</nav><!-- Navegador inferior -->
</div><!-- Navegador Inferior -->

Answer 1

The key is to set the dropdown to visility:hidden; in the start and visility:visible; in :hover state.

.fixed-top {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    top: 0;
    border-width: 0 0 1px;
}

#nav ul li a {
    display: block;
    padding: 7px 15px;
    text-decoration: none;
    font-weight: bold;
    color: #FFFFFF;
}

#nav li a:hover {
    color: #000000;
    background-color: #fff; 
}

#nav .navbar-izquierda ul {
    width: 100%;
    float: left;
    margin: auto;
    padding: 0;
    list-style: none;
    background-color: #434343;
    box-shadow: 10px 0 10px #000000;
    border-bottom: 1px solid #000000;
}


.clearfix:after {
    display:block;
    clear:both;
}

.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#3e3436;
}

.menu {
    width: auto;
    margin:0px auto;
}

.menu li {
    margin:0px;
    list-style:none;
}

.menu a {
    transition:all linear 0.15s;
    color:#919191;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#be5b70;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:14px;
}

.menu > ul > li > a {
    padding:10px 40px;
    display:inline-block;
    text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {
    background:#2e2728;
}

/*----- DropDown Navbar Inferior -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
    visibility:visible;
}

.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition: opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#2e2728;
    visibility:hidden;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:inline-block;
}

.sub-menu li a:hover, .sub-menu .current-item a {
    background:#3e3436;
}

<div class="navbar-izquierda menu-wrap">
<nav class="menu">
    <ul class="clearfix">
        <li class="active"><a href="#">Portatil</a></li>
        <li><a href="#">Desk</a></li>
        <li><a href="#">Workstation</a></li>
        <li><a href="#">Promotions</a></li>
        <li><a href="#">Services and Guarantees <span class="arrow">&#9660;</span></a>
        <ul class="sub-menu">
            <li><a href="#">Error 1</a></li>
            <li><a href="#">Error 2</a></li>
            <li><a href="#">Horror 3</a></li>
        </ul>
        </li>        
    </ul>
</nav><!-- Navegador inferior -->
</div><!-- Navegador Inferior -->