带有反应的顺风下拉菜单

Question

我可以使用下拉菜单，但我不能 100% 确定它是首选解决方案。因此，这是我问题的第一部分。主要问题是关于 CSS。当我点击按钮时 drop-down 出现，但它在屏幕右侧，几乎被切成两半。

如何让它留在屏幕上？问题似乎与 absolute 相关，但当我删除它时，单击按钮时 header 会展开。

<ul className="dropdown-menu min-w-max items-center absolute bg-white text-base z-50 float-left
                        py-2 list-none text-left rounded-lg shadow-lg mt-1 m-0 bg-clip-padding border-none">

-----完整代码----

import React, {Component} from 'react';


export default class MobileHeader extends Component {

    constructor(props) {
        super(props);
        this.state = {isToggleOn: true};

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return(
            <nav className="flex items-center justify-between flex-wrap bg-gray-800 p-3 fixed w-full z-10 top-0">
                <div className="flex items-center flex-shrink-0 text-white mr-6">
                    <a className="text-white no-underline hover:text-white hover:no-underline" href="#">
                        <span className="text-2xl pl-2"><i className="em em-grinning"></i>Demo</span>
                    </a>
                </div>

                <div className="block lg:hidden">
                    <button id="nav-toggle" onClick={this.handleClick}
                            className="flex items-center px-3 py-2 border rounded text-gray-500
                            border-gray-600 hover:text-white hover:border-white">
                        <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <title>Menu</title>
                            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
                        </svg>
                        {
                            this.state.isToggleOn ? '' :
                            <ul className="dropdown-menu min-w-max items-center absolute bg-white text-base z-50 float-left
                        py-2 list-none text-left rounded-lg shadow-lg mt-1 m-0 bg-clip-padding border-none">
                                <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
                                            text-gray-700 hover:bg-gray-100" href="#">Action</a>
                                </li>
                                <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
                                            text-gray-700 hover:bg-gray-100" href="#">Action</a>
                                </li>
                                <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
                                            text-gray-700 hover:bg-gray-100" href="#">Action</a>
                                </li>
                                <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent
                                            text-gray-700 hover:bg-gray-100" href="#">Action</a>
                                </li>
                            </ul>
                        }
                    </button>

                </div>
            </nav>
        )
    }
}

Answer 1

尝试使用 class z-50 像这样

在下拉列表中只保留 z-index 到 50

<ul className="dropdown-menu min-w-max items-center  bg-white text-base z-50 float-left py-2 list-none text-left rounded-lg shadow-lg mt-1 m-0 bg-clip-padding border-none ">
          <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
           <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
           <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
           <li><a className="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-700 hover:bg-gray-100" href="#">Action</a></li>
</ul>

带有反应的顺风下拉菜单

Tailwind dropdown with react

reactjs

tailwind-css