Question

我正在使用纯CSS下拉菜单，但遇到了一些对齐问题。

具体来说：当鼠标悬停在各自的菜单项上时，子菜单项会移到右侧。这是小提琴：https://jsfiddle.net/fhakjnhe/5/

HTML

<body>

<header>

<div id="menustrip">

                <div id="logo_container">
                    <h1>LOGO</h1>                   
                </div>

                <div id="menu">
                    <nav>
                        <ul>
                            <li><a id="active-page" href="#">AAA</a></li
                            ><li><a href="#">BBB</a>
                                <ul>
                                    <li style="background-color:red;">A</li>
                                    <li>B</li>
                                </ul>
                            </li
                            ><li><a href="#">CCC</a></li
                            ><li><a href="#">DDD</a></li
                            ><li><a href="#">EEE</a>
                                <ul>
                                    <li style="background-color:blue;">A2</li>
                                    <li>B2</li>
                                </ul>
                            </li
                            ><li><a href="#">FFF</a></li
                            ><li><a id="quote-page" href="#">GGG</a></li>
                        </ul>


                    </nav>              
                </div>

            </div>

相关CSS

header #menustrip #menu nav ul
        {
            list-style: none;               
            position: relative;              
        }

            header #menustrip #menu nav ul li
            {
                display: inline-block;                  
            }

                header #menustrip #menu nav a
                {
                    display: block;
                    color: #1d120c;
                    font-weight: bold;
                    font-size: 18px;
                    padding: 0 /*15px*/10px;
                    margin: 0;
                    border: 2px solid transparent;
                }

                header #menustrip #menu nav a:hover 
                {
                    border-left: 2px solid #97bc14;
                    border-right: 2px solid #97bc14;
                    color: #97bc14
                }

                header #menustrip #menu nav a#active-page
                {
                    color: #97bc14
                }

                header #menustrip #menu nav a#quote-page
                {
                    margin-left: 15px;
                    border: 2px solid #97bc14;
                    color: #97bc14
                }

                header #menustrip #menu nav a#quote-page:hover
                {
                    border: 2px solid #97bc14;
                    background-color: #97bc14;
                    color: #fcffff;
                }

                header #menustrip #menu nav ul li ul
                {
                    /*display: none;*/
                    position: absolute;
                    padding-left: 0;
                }

                header #menustrip #menu nav ul li:hover > ul
                {
                    display: inherit;
                }

                    header #menustrip #menu nav ul li ul li
                    {
                        /*left: -100%;*/
                        min-width: 100px;
                        float: none;
                        display: list-item;
                        position: relative;                         
                    }

我检查了类似问题CSS Drop Down Menu : nav ul ul li Moved to Right并检查margin和padding是否设为0。同样在我的情况下，子项在悬停时向右移动，它似乎保持正常而隐藏＆＃34;。

Answer 1

在CSS文件的第94行，更改display: inherit;的{{1}}。 inherit属性将下拉菜单显示为内联块。

Answer 2

我建议您使用软件Web菜单制作工具＆amp;按钮制造商这个软件让你用java脚本或只用css创建专业和漂亮的菜单和按钮。

http://www.easymenumaker.com/

CSS下拉菜单对齐问题

2 个答案: