个人中心
gpt4 book ai didi

css - 将嵌套菜单对齐到父级嵌套菜单的右侧

转载 作者：行者123 更新时间：2023-11-28 07:05:06 24 4
gpt4 key购买 nike

我希望我的第二级菜单直接下降到第一级下方，然后在该级下的级别完全向右打开。

我的第二个嵌套菜单可以正常工作，但我不知道如何让第三级菜单整齐地向右移动。我现在的方式是重叠的。

这是片段，如果有人能帮助我，我将不胜感激:

#menu-main-menu-container {
  width: 100%;
  position: relative;
  font: 300 16px/16px Lato, Arial; }
  #menu-main-menu-container ul {
    position: relative;
    text-align: center;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0; }
    #menu-main-menu-container ul ul {
      position: absolute;
      display: none;
      margin-top: 15px; }
      #menu-main-menu-container ul ul ul {
        position: absolute;
        right: 0;
        top: 0; }
  #menu-main-menu-container ul li {
    right: 50%;
    background-color: #f4f4f4; }
  #menu-main-menu-container li {
    list-style: none;
    position: relative;
    float: left;
    padding: 15px;
    margin: 0;
    text-transform: uppercase; }
    #menu-main-menu-container li:hover > ul {
      display: block; }
  #menu-main-menu-container a {
    white-space: nowrap;
    text-decoration: none;
    color: blue; }
  #menu-main-menu-container li:hover {
    background-color: blue;
    transition: 1s; }
  #menu-main-menu-container li:hover > a {
    color: white; }

/*# sourceMappingURL=top-nav-menu.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="top-nav-menu.css">
</head>
<body>
<div id="menu-main-menu-container">

    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a>
                    <ul class="sub-menu">
                        <li><a href="#">Hidden Sub Item 1</a></li>
                        <li><a href="#">Hidden Sub Item 2</a></li>
                        <li><a href="#">Hidden Sub Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Item 2</a></li>

                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
</body>
</html>

最佳答案 

#menu-main-menu-container {
  width: 100%;
  position: relative;
  font: 300 16px/16px Lato, Arial; }
  #menu-main-menu-container ul {
    position: relative;
    text-align: center;
    float: left;
    left: 50%;
    margin: 0;
    padding: 0; }
    #menu-main-menu-container ul ul {
    position: absolute;
    display: none;
    margin-top: 15px;
    float: none;
    left: 0px;
    right: 6px;
    }
      #menu-main-menu-container ul ul ul {
            /* position: absolute; */
    /* top: 0; */
    float: none;
    /* left: 0px; */
    left: 0px;
    margin-top: -30px;
    left: 120px;
      
      
      }
  #menu-main-menu-container ul li {
    right: 50%;
    background-color: #f4f4f4; }
  #menu-main-menu-container li {
    list-style: none;
    position: relative;
    float: left;
    padding: 15px;
    margin: 0;
    text-transform: uppercase; }
    #menu-main-menu-container li:hover > ul {
      display: block; }
  #menu-main-menu-container a {
    white-space: nowrap;
    text-decoration: none;
    color: blue; }
  #menu-main-menu-container li:hover {
    background-color: blue;
    transition: 1s; }
  #menu-main-menu-container li:hover > a {
    color: white; }
<div id="menu-main-menu-container">

    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Item 1</a>
                    <ul class="sub-menu">
                        <li><a href="#">Hidden Sub Item 1</a></li>
                        <li><a href="#">Hidden Sub Item 2</a></li>
                        <li><a href="#">Hidden Sub Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Item 2</a></li>

                <li><a href="#">Sub Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

检查此 Jsfiddle code 以获取演示:http://jsfiddle.net/naya4ahs/

关于css - 将嵌套菜单对齐到父级嵌套菜单的右侧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33004879/

24 4 0
文章推荐： javascript - 为用户显示图像 src 转换
文章推荐： javascript - 无法获取此条件语句以将列调整回来
文章推荐： ios - 将加载回调设置为 WKWebView
文章推荐： javascript - 条件背景图像的 Angular Directive(指令)