css 当我想让下拉菜单显示在我悬停的切片旁边时，下拉菜单会停留在顶部

wj8zmpe1 于 2022-12-01 发布在其他

关注(0)|答案(3)|浏览(174)

我最近学会了做一个导航菜单，所以我冒险自己做了一个下拉菜单。我自己做了这一切，似乎我在瞄准风格属性方面很弱。所以我需要一些帮助。

这是密码

<style>
        body {
            margin: 0;
        }

        .menu {
            width: fit-content;
            float: left;
        }

        .under {
            width: 100px;
            float: left;
            background-color: #242a38;
            position: absolute;
            z-index: 1;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li.border {
            text-align: center;
            border-bottom: 1px solid white;
            margin: 5px 5px;
        }

        nav ul li a {
            color: #ffffff;
            text-decoration: none;
            font-family: Candara;
            font-size: 14px;
            display: block;
            padding: 10px;
            margin: 5px 0px;
            z-index: 10;

        }

        nav ul li a:hover {
            background-color: #4e596f;
            transition: 1s;

        }

        

        .hello {
            float: left;
        }

        .text {
            position: absolute;
            left: 700px;
            top: 145px;
            font-family: segoe script;
            color: #ffffffc4;
            text-decoration: #1eacc5 underline;
            font-size: 50px;
            transform: rotate(1.5deg)
        }

        #full-span {
            width: 100%;
            height: 100%;
            position: fixed;
        }

        .stretch {
            width: 100%;
            height: 100%;
        }

        nav ul ul{
            width: 100%;
            background: #242a38;
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 999;
        }

        ul li:hover > ul{
            display: block;

        }

        ul ul li {
            display: block;
        }

        nav ul ul a{
            padding: 10px 5px;
            margin: 5px 5px 11px 10px;
        }


    </style>

</head>

<body>
    <div class="menu">
        <div class="under">
            <nav>
                <ul>
                    <li class="border"><a href="#">Home</a></li>
                    <li class="border"><a href="#">About</a></li>
                    <li class="border"><a href="#">Services</a></li>
                    <li class="border"><a href="#">Contact</a>
                        <ul>
                            <li><a href="#">Local 1</a>
                            <ul>
                                <li><a href="#">Okkk</a></li>
                                <li><a href="#">Not Ok</a></li>
                                <li><a href="#">Yes Ok</a></li>
                            </ul>
                            </li>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">Local</a>
                            <ul>
                                    <li><a href="#">Okkk</a></li>
                                    <li><a href="#">Not Ok</a></li>
                                    <li><a href="#">Yes Ok</a></li>
                                </ul>
                                </li>
                        </ul>
                    </li>
                    <li class="border"><a href="#">Sign in</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>

我希望下拉菜单显示在我悬停的图块旁边，但它却显示在顶部。
一开始下拉菜单扩展到了原来的菜单下面，所以我试着：
position: absolute;
left: 100%;
top: 0;
现在它不再重叠，而是粘在顶部

css

来源：https://stackoverflow.com/questions/74629458/the-dropdown-sticks-to-the-top-while-i-want-it-to-appear-right-next-to-the-tile

3条答案

按热度按时间

gdx19jrr1#

使你的父div（类border在你的情况下）position: relative将做这工作.也使这孩子（这将是显示后，悬停在border上）top: 50%和transform: translate(0, -50%).这将使你的孩子列表垂直居中基于这父元素
我在添加/编辑的所有代码之前都添加了注解。

<style>
        body {
            margin: 0;
        }

        .menu {
            width: fit-content;
            float: left;
        }

        .under {
            width: 100px;
            float: left;
            background-color: #242a38;
            position: absolute;
            z-index: 1;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li.border {
            text-align: center;
            border-bottom: 1px solid white;
            margin: 5px 5px;
        }

        nav ul li a {
            color: #ffffff;
            text-decoration: none;
            font-family: Candara;
            font-size: 14px;
            display: block;
            padding: 10px;
            margin: 5px 0px;
            z-index: 10;

        }

        nav ul li a:hover {
            background-color: #4e596f;
            transition: 1s;

        }

        

        .hello {
            float: left;
        }

        .text {
            position: absolute;
            left: 700px;
            top: 145px;
            font-family: segoe script;
            color: #ffffffc4;
            text-decoration: #1eacc5 underline;
            font-size: 50px;
            transform: rotate(1.5deg)
        }

        #full-span {
            width: 100%;
            height: 100%;
            position: fixed;
        }

        .stretch {
            width: 100%;
            height: 100%;
        }

        nav ul ul{
            width: 100%;
            background: #242a38;
            display: none;
            position: absolute;
            left: 100%;
            
            /*  make top 50% to keep it at the middle */
            top: 50%;
            
            z-index: 999;
            
            /* add this code to perfectly center the after hover element. e.g "Local" */
            transform: translate(0, -50%)
        }

        ul li:hover > ul{
            display: block;

        }

        ul ul li {
            display: block;
        }

        nav ul ul a{
            padding: 10px 5px;
            margin: 5px 5px 11px 10px;
        }
        
        /* add position: relative to your border class. so any child of it with absolute position will be positioned relative to this */
        .border{
            position: relative;
        }

    </style>

</head>

<body>
    <div class="menu">
        <div class="under">
            <nav>
                <ul>
                    <li class="border"><a href="#">Home</a></li>
                    <li class="border"><a href="#">About</a></li>
                    <li class="border"><a href="#">Services</a></li>
                    <li class="border"><a href="#">Contact</a>
                        <ul>
                            <li><a href="#">Local 1</a>
                            <ul>
                                <li><a href="#">Okkk</a></li>
                                <li><a href="#">Not Ok</a></li>
                                <li><a href="#">Yes Ok</a></li>
                            </ul>
                            </li>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">Local</a>
                            <ul>
                                    <li><a href="#">Okkk</a></li>
                                    <li><a href="#">Not Ok</a></li>
                                    <li><a href="#">Yes Ok</a></li>
                                </ul>
                                </li>
                        </ul>
                    </li>
                    <li class="border"><a href="#">Sign in</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>

赞(0）回复(0）举报 2022-12-01

ozxc1zmp2#

您需要将子ul元素设置为其相对父li元素的绝对值
因此将父项〈li设为相对项

nav li{
    position:relative;
}

<style>
        body {
            margin: 0;
        }

        .menu {
            width: fit-content;
            float: left;
        }

        .under {
            width: 100px;
            float: left;
            background-color: #242a38;
            position: absolute;
            z-index: 1;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        nav ul li.border {
            text-align: center;
            border-bottom: 1px solid white;
            margin: 5px 5px;
        }

        nav ul li a {
            color: #ffffff;
            text-decoration: none;
            font-family: Candara;
            font-size: 14px;
            display: block;
            padding: 10px;
            margin: 5px 0px;
            z-index: 10;

        }

        nav ul li a:hover {
            background-color: #4e596f;
            transition: 1s;

        }

        

        .hello {
            float: left;
        }

        .text {
            position: absolute;
            left: 700px;
            top: 145px;
            font-family: segoe script;
            color: #ffffffc4;
            text-decoration: #1eacc5 underline;
            font-size: 50px;
            transform: rotate(1.5deg)
        }

        #full-span {
            width: 100%;
            height: 100%;
            position: fixed;
        }

        .stretch {
            width: 100%;
            height: 100%;
        }
        nav li{
          position:relative;
        }
        nav ul ul{
            width: 100%;
            background: #242a38;
            display: none;
            position: absolute;
            left: 100%;
            top: 0;
            z-index: 999;
        }

        ul li:hover > ul{
            display: block;

        }

        ul ul li {
            display: block;
        }

        nav ul ul a{
            padding: 10px 5px;
            margin: 5px 5px 11px 10px;
        }


    </style>

</head>

<body>
    <div class="menu">
        <div class="under">
            <nav>
                <ul>
                    <li class="border"><a href="#">Home</a></li>
                    <li class="border"><a href="#">About</a></li>
                    <li class="border"><a href="#">Services</a></li>
                    <li class="border"><a href="#">Contact</a>
                        <ul>
                            <li><a href="#">Local 1</a>
                            <ul>
                                <li><a href="#">Okkk</a></li>
                                <li><a href="#">Not Ok</a></li>
                                <li><a href="#">Yes Ok</a></li>
                            </ul>
                            </li>
                            <li><a href="#">Local</a></li>
                            <li><a href="#">Local</a>
                            <ul>
                                    <li><a href="#">Okkk</a></li>
                                    <li><a href="#">Not Ok</a></li>
                                    <li><a href="#">Yes Ok</a></li>
                                </ul>
                                </li>
                        </ul>
                    </li>
                    <li class="border"><a href="#">Sign in</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>

赞(0）回复(0）举报 2022-12-01

vxf3dgd43#

我很快就找到了解决办法：亲属;
唯一的问题是它需要悬停导航项下的空间。
第一个

赞(0）回复(0）举报 2022-12-01