CSS下拉菜单,浏览子菜单时悬停时显示的子菜单消失 [英] CSS dropdown menu,the submenu showed on hover dissapears while you browse submenu

查看:99
本文介绍了CSS下拉菜单,浏览子菜单时悬停时显示的子菜单消失的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

你好,我有CSS下拉菜单,当我将鼠标悬停在第一个

  • 项目上时,子菜单会正确显示,但是当我尝试下移至子菜单的最后一项之前(例如到达该子菜单时)关闭...我找不到我在做什么错了下面是我的代码:

    Hello I have CSS dropdown menu, when I hover with the mouse to the firt

  • item the submenu shows correctly but when I try to go down for example to the last item of the submenu before I get there the submenu gets closed... I can't find what I'm doing wrong Below is my code:

    CSS:

    #lang_select ul{
        padding: 0px;
        margin: 0;
        border: solid 1px #e1e1e1;
        width: 85px;
    }
    
    #lang_select li{
        display: inline;
        position: relative;
    }
    
    #lang_select ul ul{
        position: absolute;
        display: none;
    }
    #lang_select li:hover ul{
        display: block;
    }
    #lang_select a{
        text-decoration: none;
        color:#333;
        font-family: Open Sans;
        font-size:12px; 
    }
        .lang-down{
        padding-left:10px;
    }
    

    HTML:

    <div id="lang_select">
    <ul>
        <li>
            <a href="#">  Language  <i class="fa fa-angle-down"></i></a>
            <ul>
                <li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span></a></li>
                <li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> French</span></a></li>
                <li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> German</span></a></li>
            </ul>
        </li>
    </ul>
    </div>
    


    推荐答案

    演示- http://jsfiddle.net/r0bdcn7y/1/

    更改CSS

    #lang_select li {
     display: inline-block;
     position: relative;
     width: 100%;
    }
    

    #lang_select ul {
      padding: 0px;
      margin: 0;
      border: solid 1px #e1e1e1;
      width: 85px;
    }
    #lang_select li {
      display: inline-block;
      position: relative;
      width: 100%;
    }
    #lang_select ul ul {
      position: absolute;
      display: none;
    }
    #lang_select li:hover ul {
      display: block;
    }
    #lang_select a {
      text-decoration: none;
      color: #333;
      font-family: Open Sans;
      font-size: 12px;
    }
    .lang-down {
      padding-left: 10px;
    }

    <div id="lang_select">
      <ul>
        <li> <a href="#">  Language  <i class="fa fa-angle-down"></i></a>
    
          <ul>
            <li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span></a>
    
            </li>
            <li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> French</span></a>
    
            </li>
            <li><a href="#"><span class="lang-down"><i class="fa fa-globe"></i> German</span></a>
    
            </li>
          </ul>
        </li>
      </ul>
    </div>

    这篇关于CSS下拉菜单,浏览子菜单时悬停时显示的子菜单消失的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

  • 查看全文
    登录 关闭
    扫码关注1秒登录
    发送“验证码”获取 | 15天全站免登陆