悬停列表不一致

Question

我创建了这个悬停列表。它有两个子领域，员工签证和家庭签证。当我移动鼠标时，子字段下降太多。有没有办法解决这个问题而不增加整个侧边菜单的宽度？

HTML列表

  <ul id="menu" >           
            <li><a href="#">&#10148; Visa</a>                
              <ul class="sub-menu">
                <ul>
                    <li>
                       <a href="LoadEmployeeVisa">Employee Visa</a>
                    </li>
                    <li>
                       <a href="#">Family Visa</a>
                    </li>                   
                </ul>
             </ul>
      </ul> 

CSS

<style>        
        /*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: decimal;

}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;

}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;

}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100px;
}
ul#menu li:hover ul.sub-menu {
    display:block;
}
</style>

Answer 1

您可以将宽度更改为200px。希望它能解决问题。

#menu li ul.sub-menu {
  display:none;
  position: absolute;
  top: 20px;
  left: 0;
  width: 200px;

}

Answer 2

试试这个

 /*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: decimal;

}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;

}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;

}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 20px;
    left: 0;
}
ul#menu li:hover ul.sub-menu {
    display:block;
    margin:-1px;
}

<ul id="menu" >           
            <li><a href="#">&#10148; Visa</a>                
              <ul class="sub-menu">
                <ul>
                    <li>
                       <a href="LoadEmployeeVisa">Employee Visa</a>
                    </li>
                    <li>
                       <a href="#">Family Visa</a>
                    </li>                   
                </ul>
             </ul>
      </ul> 

演示Here

注意：已移除width:100px您可以根据需要将其设置为150 px or 200px。 还将top:30px更改为top:20px。 但是，不需要top:xyz。

Answer 3

防止文字进入第二行：

.sub-menu li {
  white-space: nowrap;
}

这会将文字保留在一行中，但它会突出显示菜单的一侧。如果这不合适，可以通过添加以下内容使其看起来更好：

.sub-menu li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*Initialize*/

ul#menu {
  background-color: #ddd;
}
ul#menu,
ul#menu ul.sub-menu {
  padding: 0;
  margin: 0;
}
ul#menu li,
ul#menu ul.sub-menu li {
  list-style-type: decimal;
}
/*Link Appearance*/

ul#menu li a,
ul#menu li ul.sub-menu li a {
  text-decoration: none;
}
/*Make the parent of sub-menu relative*/

ul#menu li {
  position: relative;
}
/*sub menu*/

ul#menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
  width: 100px;
}
ul#menu li:hover ul.sub-menu {
  display: block;
}
.sub-menu li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<ul id="menu">
  <li><a href="#">&#10148; Visa</a> 
    <ul class="sub-menu">
      <ul>
        <li>
          <a href="LoadEmployeeVisa">Employee Visa</a>
        </li>
        <li>
          <a href="#">Family Visa</a>
        </li>
      </ul>
    </ul>
</ul>