Question

我的页面左侧有两个导航栏。在我将一些链接放入右侧导航栏之前，一切正常。但是，一旦将文本添加到右侧导航栏中，就会出现下拉菜单的问题。下拉列表和最右边的导航栏中的链接似乎有冲突，因为我无法再单击主要导航栏的子菜单。我试着寻找一些属性将下拉列表带到前台，但找不到任何有用的东西。

<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;
}

Answer 1

这应该可以解决你的问题

.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>

如何防止dropstrap与bootstrap中其他链接之间的冲突？

1 个答案: