【问题标题】:Dropdown Menu and Hover Menu (Sub Menu) [closed]下拉菜单和悬停菜单(子菜单)[关闭]
【发布时间】:2016-10-26 11:29:18
【问题描述】:

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

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

【问题讨论】:

标签: html drop-down-menu hover submenu


【解决方案1】:

你可以用 CSS 来做这个下拉菜单

这是一个简单的例子。 首先,添加类以知道是哪个级别。

<ul class="firstLevel">

其次,为这个元素的hover添加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>

【讨论】:

    【解决方案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/

    在我看来,我在评论中给你的链接很好地解释了它。事实上,在阅读了那篇文章后,我想出了这个解决方案。请发表评论让我知道我是否有帮助。 :)

    链接:

    【讨论】:

    • 我还有一个问题 首先它运行顺利。转到我想要的页面。点击第二次,但不要去。视频:yadi.sk/i/etw6xCF6xgKZG
    • 问题是你使用了#sumbol。这不会重新加载页面。在第一次你如何重新加载它?使用Javascript?
    • 使用 Javascript,您可以使用以下代码实现此目的:&lt;a onclick="window.location.href += 'example1'; location.reload();"&gt;example1&lt;/a&gt;。由于您已经有了 # 符号,此代码将在 # 符号后添加“example1”,然后重新加载页面。
    • 请发布一个 jsfiddle 或提供您使用的代码,以便进一步帮助您。
    • Şişhane 非常感谢。是
    猜你喜欢
    • 1970-01-01
    • 2014-04-28
    • 2023-03-19
    • 1970-01-01
    • 2018-06-21
    • 2019-05-17
    • 2018-02-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多