如何在下拉菜单上提供悬停效果

时间：2018-07-03 17:45:54

标签： html css twitter-bootstrap-3

如何在下拉菜单中提供悬停效果。我使用了以下代码，但仅在单击时打开了下拉列表，但是enter image description here我想要附件中显示的类似内容。请查看附件。

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -10px;
}

.dropdown-submenu .caret {
  display: none;
}

.dropdown-submenu:hover>a:after {
  border-left-color: #555;
}

.dropdown-submenu.pull-left {
  float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}


/* caret style */

.caret {
  position: relative;
}


/* dropdown style */

.dropdown.open .caret:before,
.dropdown.open .caret:after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-width: 7px 8px;
  border-style: solid;
  border-color: transparent;
  z-index: 1001;
}

.dropdown.open .caret:before {
  bottom: 17px;
  right: 15px;
  border-bottom-color: #ccc;
}

.dropdown.open .caret:after {
  bottom: 18px;
  right: 15px;
  border-bottom-color: #fff;
}


/* navbar style */

.navbar-nav>li>.dropdown-menu {
  left: -9px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.navbar-nav>.open>a .caret:before {
  bottom: -23px;
}

.navbar-nav>.open>a .caret:after {
  bottom: -24px;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- used for custom style sheet -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  <!-- used for google font family -->
  <link href="https://fonts.googleapis.com/css?family=Galada" rel="stylesheet">

  <!-- used for fa fa icons  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" ? <!-- used for bootstrap Library -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background: antiquewhite;">
  <div class="container-fluid">
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active">
              <a href="#">Active Link</a>
            </li>
            <li>
              <a href="#">Link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu a">
                <li><a href="#">Dropdown 1</a></li>
                <li><a href="#">Dropdown 2</a></li>
                <li><a href="#">Dropdown 3</a></li>
                <li class="divider"></li>
                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Dropdown Submenu 4.1</a></li>
                    <li><a href="#">Dropdown Submenu 4.2</a></li>
                    <li><a href="#">Dropdown Submenu 4.3</a></li>
                    <li><a href="#">Dropdown Submenu 4.4</a></li>
                  </ul>
                </li>
                <li class="dropdown dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Dropdown Submenu 5.1</a></li>
                    <li><a href="#">Dropdown Submenu 5.2</a></li>
                    <li><a href="#">Dropdown Submenu 5.3</a></li>
                    <li class="divider"></li>
                    <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4<b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Dropdown Submenu 5.4.1</a></li>
                        <li><a href="#">Dropdown Submenu 5.4.2</a></li>
                        <li class="divider"></li>
                        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
                            <li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
                            <li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
                            <li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
                          </ul>
                        </li>
                        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4<b class="caret"></b></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
                            <li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
                            <li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
                            <li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Dropdown Link 1</a></li>
                <li><a href="#">Dropdown Link 2</a></li>
                <li><a href="#">Dropdown Link 3</a></li>
                <li class="dropdown dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Dropdown Submenu Link 4.1</a></li>
                    <li><a href="#">Dropdown Submenu Link 4.2</a></li>
                    <li><a href="#">Dropdown Submenu Link 4.3</a></li>
                    <li><a href="#">Dropdown Submenu Link 4.4</a></li>
                  </ul>
                </li>
                <li class="dropdown dropdown-submenu">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5<b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Dropdown Submenu Link 5.1</a></li>
                    <li><a href="#">Dropdown Submenu Link 5.2</a></li>
                    <li><a href="#">Dropdown Submenu Link 5.3</a></li>
                    <li class="divider"></li>
                    <li class="dropdown dropdown-submenu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4<b class="caret"></b></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
                        <li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
                        <li class="divider"></li>
                        <li class="dropdown dropdown-submenu">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3<b class="caret"></b></a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
                            <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
                            <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
                            <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
                          </ul>
                        </li>
                        <li class="dropdown dropdown-submenu">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4<b class="caret"></b>
                                                    </a>
                          <ul class="dropdown-menu">
                            <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
                            <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
                            <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
                            <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
    </nav>
    </div>

悬停时，它将显示triange下拉列表，该下拉列表显示在attachmwnt文件中。请帮我一个了解html css bootstrap的人。

2 个答案:

答案 0 :(得分：0)

尝试使用javascript：

（请注意，这些功能不是您浏览导航的方式；它们只是用于循环。）

var el=/*your main nav element*/;
function showDrop(ele){
  ele.addEventListener("mouseenter",function(e){
    //loop through all children and show each
    ele.children.forEach(function(c){
      if(c.children.length>0)showDrop(c);
      //show children
      c.style.display="";
    });
  });
}
showDrop(el);
function hideDrop(ele){
  ele.addEventListener("mouseout",function(e){
    //loop through all children and hide each
    ele.children.forEach(function(c){
      if(c.children.length>0)hideDrop(c);
      //hide children
      c.style.display="none";
    });
  });
}
hideDrop(el);

答案 1 :(得分：0)

这是它的代码：

  <!DOCTYPE html>
  <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
  <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
  <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
  <!--[if gt IE 8]><!-->
  <html class="no-js">
  <!--<![endif]-->

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>

  .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
  }

  .dropdown {
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  .dropdown-content a:hover {background-color: #ddd;}

  .dropdown:hover .dropdown-content {display: block;}

  .dropdown:hover .dropbtn {background-color: #3e8e41;}
    </style>
  </head>

  <body>
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
      <![endif]-->
      <h2>Hoverable Dropdown</h2>
      <p>Move the mouse over the button to open the dropdown menu.</p>

      <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
  </body>

  </html>

看看这个 https://jsfiddle.net/34nLzq18/

相关问题
最新问题