How to set navbar width

Question

Guys, I’m developing a Menu with Submenus, but I can’t set a width for the navbar so it stays in the screen size!

'<style type="text/css">

/*Configurações Padrões*/
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}
ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}

/* Configurações nivel 1*/
ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }

/* Configurações nivel 2*/
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px;   }
.menu ul.submenu-1 a{  width:160px; padding:0 20px; border-radius:5px;  }

/* Configurações nivel 2*/
.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-2 a{  width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 3*/
.menu li:hover > ul.submenu-3{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-3 a{  width:160px; padding:0 20px; border-radius:5px; }


/*Configurações de cores*/

/*nivel 1*/
.menu{background:#CCC; }
.menu a{ color:#000;}
.menu li:hover > a{ background:#999;  color:#fff;}

/*nivel 2*/
.submenu-1{ background:#999;}
.submenu-1 a{color:#fff;}
.submenu-1 li:hover > a{ background:#666; }

/*nivel 3*/
.submenu-2{ background:#666;}
.submenu-2 a{color:#fff;}
.submenu-2 li:hover > a{ background:#333; }

/*nivel 3*/
.submenu-3{ background:#333;}
.submenu-3 a{color:#fff;}
.submenu-3 li:hover > a{ background:#000; }


</style>




<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 2</a>
        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                        <li><a href="#">Submenu 6</a>
                                    <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Submenu 7</a></li>
                                            <li><a href="#">Submenu 8</a></li>
                                            <li><a href="#">Submenu 9</a></li>
                                    </ul>
                        </li>
                    </ul>
             </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>


</ul>'

Answer 1

Dude you have to put the UL with 100% wide, but as it also has a padding the right and left you need to put box-sizing:borde-box for this padding do not add width generating an unnecessary horizontal scroll bar... Also tb remove the margin of body for the bar to actually paste in the corners of the screen.

See the image code above:

/*Configurações Padrões*/
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}
ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #333;}

/* Configurações nivel 1*/
ul.menu{ float:left; font-family:Verdana, Geneva, sans-serif; font-size:15px; border-radius:5px; padding:0 5px;}
.menu li{ float:left; width:auto; position:relative;}
.menu li a{ display:block; padding:0 20px; line-height:45px; height:45px; float:left; transition:all 0.1s linear; }

/* Configurações nivel 2*/
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px;   }
.menu ul.submenu-1 a{  width:160px; padding:0 20px; border-radius:5px;  }

/* Configurações nivel 2*/
.menu li:hover > ul.submenu-2{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-2 a{  width:160px; padding:0 20px; border-radius:5px; }

/* Configurações nivel 3*/
.menu li:hover > ul.submenu-3{ display:block; top:0; left:195px; padding:5px; width:200px;  border-radius: 0 5px 5px 5px; }
.menu ul.submenu-3 a{  width:160px; padding:0 20px; border-radius:5px; }


/*Configurações de cores*/

/*nivel 1*/
.menu{background:#CCC; width: 100%; box-sizing: border-box;}
.menu a{ color:#000;}
.menu li:hover > a{ background:#999;  color:#fff;}

/*nivel 2*/
.submenu-1{ background:#999;}
.submenu-1 a{color:#fff;}
.submenu-1 li:hover > a{ background:#666; }

/*nivel 3*/
.submenu-2{ background:#666;}
.submenu-2 a{color:#fff;}
.submenu-2 li:hover > a{ background:#333; }

/*nivel 3*/
.submenu-3{ background:#333;}
.submenu-3 a{color:#fff;}
.submenu-3 li:hover > a{ background:#000; }

body {
  margin: 0;
}

<ul class="menu"> <!-- Esse é o 1 nivel ou o nivel principal -->
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu 2</a>
        <ul class="submenu-1"> <!-- Esse é o 2 nivel ou o primeiro Drop Down -->
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a>
                    <ul class="submenu-2"> <!-- Esse é o 3 nivel ou o Segundo Drop Down -->
                        <li><a href="#">Submenu 4</a></li>
                        <li><a href="#">Submenu 5</a></li>
                        <li><a href="#">Submenu 6</a>
                                    <ul class="submenu-3"> <!-- Esse é o 4 nivel ou o Terceiro Drop Down -->
                                            <li><a href="#">Submenu 7</a></li>
                                            <li><a href="#">Submenu 8</a></li>
                                            <li><a href="#">Submenu 9</a></li>
                                    </ul>
                        </li>
                    </ul>
              </li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>


</ul>