Placing sub-items in the menu in CSS3

I think you were almost there.

The problem is that you are not able to distinguish levels of elements.

When you follow two selectors using space, CSS selects all sub-elements at any level.

a b {} /* qualquer b em qualquer nível dentro de a */

What I think you'd like to use is the > operator, which means: the immediate child, rather than any one at any sub-level.

a > b {} /* seleciona "b" que é filho imediato de "a"

Note the lines that I commented from your CSS, with the necessary changes (I made a summary of the changes, with explanations, just below the code snippet below):

*{margin: 0; padding:0;}
.menu{width: 100%; height: 50px; background-color:#222; font-family:Arial, Helvetica, sans-serif;}
.menu ul{list-style:none; position:relative;}
.menu ul li{width: 150px; float:left;}
.menu a{padding: 15px; display:block; text-decoration:none; text-align:center; background-color:#222; color:#fff;}
.menu ul ul{position: absolute; visibility:hidden;}

/*.menu ul li:hover ul{visibility: visible;}*/
.menu ul li:hover > ul{visibility: visible;}

/*.menu ul ul li:hover ul{visibility: visible;}*/

.menu a:hover{background-color:#f4f4f4; color:#555;}
.menu ul ul li{float: none; border-bottom: 1px solid #ccc;}
.menu ul ul li > a{background-color: #999;}
label[for="bt_menu"]{padding: 5px; background-color: #222; color: #FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:30px; cursor: pointer; width: 50px; height:50px;}

/* adicionados */
.menu ul li ul li { white-space: nowrap; }
.menu ul li ul li > a { display: inline-block; width: 100%; box-sizing: border-box; }
.menu ul li ul li > ul { display: inline-block; }

<nav class="menu">
    <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Ve&iacute;culos</a>
            <ul>
                <li><a href="#">Novos</a></li>
                <li><a href="#">Seminovos</a></li>
                <li><a href="#">F&amp;I</a></li>
            </ul>
        </li>
        <li><a href="#">Peças</a>
            <ul>
                <li><a href="#">Balc&atilde;o</a></li>
                <li><a href="#">Oficina</a>
                    <ul>
                        <li><a href="#">Mec&acirc;nica</a></li>
                        <li><a href="#">Funilaria</a></li>
                        <li><a href="#">Acessórios</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</nav>

Changes:

• Replaces:

  .menu ul li:hover ul{visibility: visible;}
  

  With:

  .menu ul li:hover > ul{visibility: visible;}
  

  This rule means that when the user gives :hover to li , all ul that are immediate children of this li will be visible. Before, what was happening is that all% of children, grandchildren, or any level within ul were becoming visible, revealing all levels at the same time.

• I deleted:

  menu ul ul li:hover ul{visibility: visible;}
  

  This rule became redundant with the previous one, since that rule specifies any li:hover with its li:hover child.

• Additions to the end:

  I've also added a few more details to make the third level appear on the side instead of below:

  .menu ul li ul li { white-space: nowrap; }
  .menu ul li ul li > a { display: inline-block; width: 100%; box-sizing: border-box; }
  .menu ul li ul li > ul { display: inline-block; }
  

Note that without this last part added the CSS would already work, but it would appear below.

I made some adjustments to your css: I informed you that every li that has a ul and that is with focus, I become ul visible:

.menu ul li:hover > ul{visibility: visible;}

and to leave aligned I will in the last ul and step the following values and attributes:

.menu ul ul ul {position: absolute; top: 50%; left: 100%;}