CSS下拉菜单，当您浏览子菜单时，悬停上的子菜单显示消失

Question

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

项时，子菜单显示正确，但当我尝试下去之前，例如我到达之前的子菜单的最后一项在那里子菜单被关闭......我找不到我做错了以下是我的代码：

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>

Answer 1

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