Question

伊斯坦布尔部分右下拉悬停菜单我该怎么做？

<li class="dropdown" data-toggle="collapse" data-target="#navbar-collapse-1">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle">Otoparklar <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a aria-controls="overview" role="tab" data-toggle="tab" href="#istanbul">İstanbul</a></li>
        <li><a aria-controls="overview" role="tab" data-toggle="tab" href="#eskisehir">Eskişehir</a></li>
        <li><a aria-controls="overview" role="tab" data-toggle="tab" href="#aydin">Aydın</a></li>
    </ul>
</li>

Answer 1

您可以使用CSS

执行此下拉菜单

这是一个简单的例子。首先，添加类以了解它是哪个级别。

<ul class="firstLevel">

第二，添加css悬停这个元素，对他的儿子做点什么

ul.firstLevel li:hover > ul

然后，添加颜色，过渡，......

ul.secondLevel {
  display: none;
}
ul.firstLevel li:hover > ul {
  display: block
}

<ul class="firstLevel">
  <li>
    <a href="">Birds</a>
    <ul class="secondLevel">
      <li>
        <a href="">Ratites</a>
      </li>
      <li>
        <a href="">Fowl</a>
      </li>
      <li>
        <a href="">Neoaves</a>
      </li>
    </ul>
  </li>
</ul>

Answer 2

您需要的代码是：

HTML：

<nav id="main_nav">
    <ul>
      <li>
        <a href="">Dropdown</a>
          <ul>
            <li>
              <a href="">example</a>
              <ul>
                <li><a href="">example1</a></li>
                <li><a href="">example2</a></li>
                <li><a href="">example3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
</nav>

CSS：

    * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 300 15px/1.5 "Helvetica Neue", helvetica, arial, sans-serif;
        background: #333;
        margin: 15px;
    }

    article {
        width: 600px;
        margin: 0 auto;
        background: #000;
        color: #fff;
        border-radius: 5px;
        box-shadow: 0 0 15px 2px #666;
    }

    section {
        clear: left;
    }

    h1 {
        font-size: 45px;
        font-weight: 100;
        letter-spacing: 15px;
        text-align: center;
    }

    h1, #main_content, #dog_link {
        padding: 15px;
    }

    p {
        margin: 15px 0;
    }

    a {
        color: #06c;
    }

    #main_nav ul {
        background: white;
        float: left;
        -webkit-transition: .5s;
        transition: .5s;
    }

    #main_nav li {
        float: left;
        position: relative;
        width: 150px;
        list-style: none;
        -webkit-transition: .5s;
        transition: .5s;
    }

    #main_nav > ul > li > a, h1 {
        text-transform: uppercase;
    }

    #main_nav a {
        display: block;
        text-decoration: none;
        padding: 5px 15px;
        color: #000;
    }

    #main_nav ul ul {
        position: absolute;
        left: 0;
        top: 100%;
        visibility: hidden;
        opacity: 0;
    }

    #main_nav ul ul ul {
        left: 100%;
        top: 0;
    }

    #main_nav li:hover, #main_nav li:hover li {
        background: #ddd;
    }

    #main_nav li li:hover, #main_nav li li:hover li {
        background: #bbb;
    }

    #main_nav li li li:hover {
        background: #999;
    }

    #main_nav li:hover > ul {
        visibility: visible;
        opacity: 1;
    }

JSFiddle：https://jsfiddle.net/szs4Lapn/1/

在我看来，我在评论中给你的链接很好地解释了它。事实上，在阅读该帖后，我想出了这个解决方案。如果我有帮助，请发表评论告诉我。：）

链接：

下拉菜单和悬停菜单（子菜单）

2 个答案: