Question

我正在创建一个左侧有垂直导航菜单的网页。在这个菜单中，我有几个子菜单，当鼠标悬停父项时，我希望将其扩展到右侧。

这是html

  <div id="leftmenu">
     <ul>
        <li><a href="">Item</a></li>
        <li><a href="">item</a>
            <ul>
                <li><a href="">SubItem</a></li>
                <li><a href="">SubItem</a></li>
            </ul>
        </li>
        <li><a href="">Item</a>
            <ul>
                <li><a href="">SubItem</a></li>
                <li><a href="">SubItem</a></li>
                <li><a href="">SubItem</a></li>
            </ul>
        </li>
        <li><a href="">item</a>
            <ul>
                <li><a href="">SubItem</a></li>
                <li><a href="">SubItme</a></li>
                <li><a href="">SubItem</a></li>
            </ul>
        </li>
        <li><a href="">item</a></li>
        <li><a href="">Item</a></li>
    </ul>
 </div>

这是我的CSS

  #leftmenu {
    float: left;
    margin: 30px;
    font-weight: bold;
    background: linear-gradient(#ffeb99, #ffe066);
    border: 0;
    border-radius: 10px;
  }

  #leftmenu ul {
    position: relative;
    border-radius: 10px;
    display: inline-block;
  }

  #leftmenu ul ul {
     display: none;
    background: #e7c702;
  }

  #leftmenu ul li:hover > ul {
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 100%;
  }

  #leftmenu ul li a {
    padding: 15px 30px;
    display: block;
    color: #757575;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
  }

我的问题是当我将鼠标悬停在具有子项目的项目上时，子项目会显示但不会与其父项目在同一行中。相反，它出现在项目I＆＃39; hovering的项目的同一行中。我正在学习CSS，所以在这种情况下我不想使用任何JavaScript。

请帮我解决这个问题。对不起，如果我格式错误，因为这是我的第一篇帖子。谢谢

Answer 1

您必须在<ul>标记之前写下<a>标记。由于<ul>后来将被定位为绝对值，因此不会影响<a>代码的位置...

我已经编辑了一点css以使其更好，（希望你不介意）：

#leftmenu {
    float: left;
    margin: 30px;
    font-weight: bold;
    background: linear-gradient(#ffeb99, #ffe066);
    border: 0;
    border-radius: 10px;
  }

  #leftmenu ul {
    position: relative;
    border-radius: 10px;
    display: inline-block;
    list-style: none;
    padding: 10px;
  }

  #leftmenu ul ul {
    display: none;
    background: #e7c702;
    position: absolute;
    top: 0;
    left: 100%;
  }

  #leftmenu ul li{
      position: relative;
  }
  #leftmenu ul li:hover > ul {
    display: block;
  }

  #leftmenu ul li a {
    padding: 15px 30px;
    display: block;
    color: #757575;
    text-decoration: none;
    font-size: 15px;
    text-transform: uppercase;
  }

这应该可以解决问题。

在元素内设置绝对定位元素时 ，其位置不是“静态”，“顶部”，“左侧”，“底部” 和'right'css属性相对于父容器。

所以这就是我所做的：

我将<li>标记的位置更改为“相对”和子菜单 <ul>最高值为'top：0px;'。就是这样。

如何使垂直子菜单向右扩展

1 个答案: