Submenu opening in the wrong place

Question

Submenu opening in the wrong place

Asked 5 years, 6 months ago

Viewed 102 times

1

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/Menu">V11 Web</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#textoNavbar" aria-controls="textoNavbar" aria-expanded="false" aria-label="Alterna navegação">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="textoNavbar">
        <ul class="navbar-nav mr-auto">
            
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="" id="MenuPrincipal1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos<span class="sr-only">(Página atual)</span></a>
                    <div class="dropdown-menu" aria-labelledby="MenuPrincipal1">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="" id="MenuPrincipal2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Editar<span class="sr-only">(Página atual)</span></a>
                    <div class="dropdown-menu" aria-labelledby="MenuPrincipal2">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
                
                <li class="nav-item">
                    <a class="nav-link dropdown-toggle" href="" id="MenuPrincipal3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cadastros<span class="sr-only">(Página atual)</span></a>
                    <div class="dropdown-menu" aria-labelledby="MenuPrincipal3">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
        </ul>
        <span class="navbar-text text-white">
            <span class="sublinhado">Usuário</span>:gerente
        </span>

        <button id="sair" type="button" onclick="location.href = '/';" class="btn btn-outline-light espaco-esq">Sair</button>
    </div>
</nav>

Hello, I’m developing a code using HTML, and I went to create a nav-bar, but it’s not going as well as I’d like.

I have the items of a menu, and all of them, when clicking, will open a submenu, for now all submenus have the same content. But by clicking to open the submenu, it is not opening in the right place... it opens as if it were with a float: left;. I’ll leave a print for you... I’d like it to open according to the clicked item.

Note that in the first print, the clicked item was "Files", while in the second print the clicked item was "Searches", but both were opened in the same place. Help me please.

Can you make a [mcve]? The way it is we can’t reproduce the problem.

– Woss

2019/06/12 at 17:04
I will create here, just a minute @Andersoncarloswoss

– user149429

2019/06/12 at 17:05
Ta using which version of Bootstrap?

– hugocsl

2019/06/12 at 17:05
version 4.3.1 @hugocsl

– user149429

2019/06/12 at 17:06
@Andersoncarloswoss, I think this is appropriate

– user149429

2019/06/12 at 17:11

1 answer

Browser other questions tagged html css html5 menu nav-bar

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

by hugocsl • **65,517** points · Answer 1 · 2019-06-12T17:13:04+00:00

In his LI of Nav that has the Sub-Menu lacked the class .dropdown. She should be like this

<li class="nav-item dropdown">

See corrected, run across page, to view the menu without it being collapsado

Follow the image code above:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Page Title</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>
	
</style>
</head>
<body>
	
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
		<a class="navbar-brand" href="/Menu">V11 Web</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#textoNavbar" aria-controls="textoNavbar" aria-expanded="false" aria-label="Alterna navegação">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="textoNavbar">
			<ul class="navbar-nav mr-auto">
				<!-- @for (int i = 0; i < Model.MenuPrincipal.Count; i++)
				{ -->
					<li class="nav-item dropdown">
						<a class="nav-link dropdown-toggle" href="" id="MenuPrincipal_@i" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" >@Model.MenuPrincipal[i]<span class="sr-only">(Página atual)</span></a>
						<div class="dropdown-menu" aria-labelledby="MenuPrincipal_@i">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<a class="dropdown-item" href="#">Something else here</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">Separated link</a>
						</div>
					</li>
				<!-- } -->
			</ul>
			<span class="navbar-text text-white">
				<span class="sublinhado">Usuário</span>
				<!-- : @HttpContext.Session.GetString("Usuário") -->
			</span>
	
			<button id="sair" type="button" onclick="location.href = '/';" class="btn btn-outline-light espaco-esq">Sair</button>
		</div>
	</nav>
	
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>