我的页面左侧有两个导航栏。 在我将一些链接放入正确的导航栏之前，一切正常。 但是，一旦将文本添加到右侧导航栏中，下拉菜单就会出现问题。 下拉菜单和最右边的导航栏中的链接似乎有冲突，因为我无法再单击主导航栏的子菜单。 我试图寻找一些属性将下拉菜单带到前台，但找不到任何有用的东西。
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="..\styles\1navbar.css">
<title> - PROCEDURE </title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="../../index.html">HOME </a><br>
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU 1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="..\1File\11dde.html">MENU 1</a></li>
<li><a href="..\1File\12dde.html">MENU 1</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<ul class="nobulet" role="menu" id="navliTOP">
<li><a href="#evan1">MENU 1</a></li>
<li><a href="#evan2">MENU 1</a></li>
<li><a href="#evan3">MENU 1</a></li>
<li><a href="#evan4">MENU 1</a></li>
<li><a href="#evan5">MENU 1<br></a></li>
</ul>
</div>
<div class="col-sm-7">
<h1> PROCEDURE </h1>
<p>
reter ter
tealter tabindexert <br>
radtre tabindexertt
er
</p>
<!--ne plus toucher ci-après-->
<div class="col-sm-2">
</div>
</div>
</div>
</div>
</body>
</html>
还有 CSS(我尽可能地清理了它)
/* ________________________________________________________________________________________ */
/* Pour Fixer la bar de navigation à gauche */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
/* Fin du CSS pour la bar de navigation à gauche */
.navbar-nav > li > .dropdown-menu {
background-color: white;
}
/* ________________________________________________________________________________________ */
/* Links in NavMenu */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 140px;
}
nav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-weight: bold;
}
#navliTOP{
padding-top: 100px;
}
最佳答案
这应该可以解决你的问题
.navbar-fixed-left {
z-index:1;
}
/* ________________________________________________________________________________________ */
/* Pour Fixer la bar de navigation à gauche */
.navbar-fixed-left {
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
z-index:1;
}
.navbar-fixed-left+.container {
padding-left: 160px;
}
/* On using dropdown menu (To right shift popuped) */
.navbar-fixed-left .navbar-nav>li>.dropdown-menu {
margin-top: -50px;
margin-left: 140px;
}
/* Fin du CSS pour la bar de navigation à gauche */
.navbar-nav>li>.dropdown-menu {
background-color: white;
}
/* ________________________________________________________________________________________ */
/* Links in NavMenu */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 140px;
}
nav li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
font-weight: bold;
}
#navliTOP {
padding-top: 100px;
}<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="..\styles\1navbar.css">
<title> - PROCEDURE </title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">
<div class="navbar navbar-inverse navbar-fixed-left">
<a class="navbar-brand" href="../../index.html">HOME </a><br>
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">MENU 1<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="..\1File\11dde.html">MENU 1</a></li>
<li><a href="..\1File\12dde.html">MENU 1</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-2">
<ul class="nobulet" role="menu" id="navliTOP">
<li><a href="#evan1">MENU 1</a></li>
<li><a href="#evan2">MENU 1</a></li>
<li><a href="#evan3">MENU 1</a></li>
<li><a href="#evan4">MENU 1</a></li>
<li><a href="#evan5">MENU 1<br></a></li>
</ul>
</div>
<div class="col-sm-7">
<h1> PROCEDURE </h1>
<p>
reter ter tealter tabindexert <br> radtre tabindexertt er
</p>
<!--ne plus toucher ci-après-->
<div class="col-sm-2">
</div>
</div>
</div>
</div>
</body>
</html>关于html - 如何防止 bootstrap 中的下拉列表和其他链接发生冲突？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48832499/