Dude, your problem is in this class. Just remove the right and left margins.
.dropdown-menu > li {
line-height: 10em;
margin: 10px 10px 10px 10px; /* coloque assim: margin: 10px 0px; */
font-size: 15px;
}
See below for the model working the way you want it. (Must View in "All Page" to see the menu in the desktop version)
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Carousel */
.carousel-caption p {
font-size: 20px;
line-height: 1.4;
}
/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
width: 100%;
}
/* QR code generator */
#qrCode {
margin: 15px;
}
/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
/* Hide captions */
.carousel-caption {
display: none;
}
}
.navbar {
/*background-color: #229922;
color: #ffffff;*/
border-radius: 0;
}
.navbar .navbar-nav > li > a {
color: #fff;
}
.navbar .navbar-nav > .active > a {
color: #ffffff;
background-color: transparent;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus,
.navbar .navbar-nav > .open > a {
text-decoration: none;
background-color: #151212;
}
.navbar .navbar-brand {
color: #eeeeee;
}
.navbar .navbar-toggle {
background-color: #eeeeee;
}
.navbar .icon-bar {
background-color: #33aa33;
}
/*Formatar <li> que está dentro do drop-down-menu*/
.dropdown-menu > li {
line-height: 10em;
margin: 10px 0px;
font-size: 15px;
}
/*li {
margin-top: 10px;
}*/
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">RETAGUARDA</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cadastros<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pagamentos<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Recebimentos<span class="caret"></span> </a>
<ul class="dropdown-menu">
<li><a asp-area="" asp-controller="Home" asp-action="Index">Home</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
