How do I increase the selection bar of a list item within a drop-down menu

1

How do I increase the selection border (gray color) to width and height as I selected it in red?

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 10px 10px 10px;
        font-size: 15px;
       
    }

/*li {
    margin-top: 10px;
}*/
  

 <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>
    
asked by anonymous 01.02.2018 / 15:09

1 answer

0

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>

    
02.02.2018 / 15:41