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

Question

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

Asked 6 years, 9 months ago

Viewed 181 times

2

How do I increase the selection range (gray color) to be wide and high as selected 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>

Include html from your menu

– Leandro Angelo

2018/02/01 at 15:00
Put all the code, both HTML and CSS, just so it’s hard to give you an accurate answer.

– hugocsl

2018/02/01 at 15:07
I updated the post.... :)

– Master JR

2018/02/01 at 20:28

1 answer

Browser other questions tagged css asp.net twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-02-02T14:41:56+00:00

Face 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 the model working the way you want. (Has to Exhibit in "Whole page" to view 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>
    <script src="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>