Question

这是我的菜单测试页面，其中包含所有css：

body {
    margin: 0;
}

.z-depth-0 {
    box-shadow: none !important
}

nav {
    width: 100%;
    height: 56px;
    color: #fff;
    line-height: 56px;
    background-color: rgb(238, 110, 115);
}

.dark-blue {
    background-color: darkblue;
}

nav .nav-wrapper {
    height: 100%;
    position: relative;
    top: 0;
}

.right {
    float: right !important
}

#nav-mobile li {
    display: inline-block;
    margin: 0 1.5em 1.5em 1.5em;
}

#nav-mobile li a {
    text-decoration: none;
    color: white;

}

#nav-mobile li .dropdown-content {
    display: none;
}

#nav-mobile li:hover .dropdown-content {
    display: block;
}

#nav-mobile .dropdown-button .dropdown-content li a {
    display: none;
}

#nav-mobile .dropdown-button:hover .dropdown-content li a {
    display: block;
}

<nav class="dark-blue z-depth-0">
    <div class="nav-wrapper container">
        <ul id="nav-mobile" class="right">
            <li><a class='dropdown-button' href='#'>Links</a>
                <ul id="quicklinkdrop" class="dropdown-content">
                    <li><a href="#" style="color: red">Home</a></li>
                    <li><a href="#" style="color: red">Access</a></li>
                    <li><a href="#" style="color: red">Zone</a></li>

                </ul>
            </li>
            <li><a class='dropdown-button' href='#'><span>User</span></a>
                <ul id="userdrop" class="dropdown-content">
                    <li><a href="profile.html">My Profile</a></li>
                    <li><a href="logout.html">Log Off</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

我希望第一个ul菜单在页面上右对齐，我希望当用户将鼠标悬停在链接或用户上时，下拉菜单会显示一个在另一个下面的项目。相反，下拉内容会显示在行中。任何人都可以帮我修理菜单吗？

此外，我希望Links和User显示得更高

Answer 1

好的，可以选择显示自上而下要添加的选项

#quicklinkdrop li{
                 display:list-item;
             }
 #userdrop li{
                 display:list-item;
             }

这应该可以解决它们内联并将项目放在彼此之上的问题

Answer 2

您需要将商品定位为相对和绝对。父项获得一个位置：相对;和孩子得到一个位置：绝对;

祝你好运！

<!DOCTYPE html>
<html>
    <head>
    <title>Test Menu</title>

      <style>
         body {
            margin: 0;
          }

         .z-depth-0{box-shadow:none !important}

         nav {
             width: 100%;
             height: 56px;
             color: #fff;
        line-height: 56px;
           background-color: rgb(238, 110, 115);
         }

        .dark-blue {
             background-color: darkblue;
         }

        nav .nav-wrapper{
           height: 100%;
           position: relative;
            top: 0;
        }
        .right {float: right!important}
        #nav-mobile li { 
            display: inline-block;
            margin: 0 1.5em 1.5em 1.5em;
        }

        #nav-mobile li a{ 
            text-decoration: none;
            color: white;

         }

         #nav-mobile li .dropdown-content{ 
             display: none;
          }

          #nav-mobile li:hover .dropdown-content{ 
               display: block;
          }



         #nav-mobile .dropdown-button .dropdown-content li a { 
             display: none;}
        #nav-mobile .dropdown-button:hover .dropdown-content li a { 
            display: block;
        }

        ul#userdrop {
            /* right: 0; */
            /*left: 0;*/
            margin-left: -100px;
        }
        #nav-mobile li .dropdown-content {
            display: none;
            position: absolute;
            background: #000000;
        }
        #nav-mobile li a {
            text-decoration: none;
            color: white;
            position: relative;
        }
        .right {
            float: right!important;
            /* position: absolute; */
            /* right: 0; */
            margin-top: 0px;
        }
        </style>

     </head>

      <body>
         <nav class="dark-blue z-depth-0">
            <div class="nav-wrapper container">

               <ul id="nav-mobile" class="right">
                    <li><a class='dropdown-button' href='#'>Links</a>
                                <ul id="quicklinkdrop" class="dropdown-content">
                                    <li><a href="#" style="color: red">Home</a></li>
                                       <li><a href="#" style="color: red">Access</a></li>
                                       <li><a href="#" style="color: red">Zone</a></li>
                                </ul>
                 </li>
                    <li><a class='dropdown-button' href='#'><span>User</span></a>
                <ul id="userdrop" class="dropdown-content">
                        <li><a href="profile.html">My Profile</a></li>
                        <li><a href="logout.html">Log Off</a></li>
                      </ul>
            </li>
            </ul>
          </div>
      </nav>

   </body>
</html>

Answer 3

Use This Link There IS an Step by step Tutorial So may be you can get what you want try it.

调整CSS菜单

3 个答案: