Question

你可以帮帮我吗？我想在焦点纯粹的css no jquery

时创建一个下拉菜单

HTML

<div class="pp-nav-menu">
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="">Furoms</a></li>

                <li tabindex="1" class="pp-dropdown-toggle">
                    <a href="#">Blogs</a>
                    <ul class="pp-dropdown">
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Application</a></li>
                        <li><a href="#">Board</a></li>
                        <li><a href="#">Options</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>

CSS

.pp-dropdown-toggle {
  position: relative;
 }

.pp-dropdown-toggle .pp-dropdown {
    visibility: hidden;
    position: absolute;
    top:100%;
}

.pp-dropdown-toggle:focus ul.pp-dropdown {
    visibility: visible;
}

此代码适用于Chrome，但是在mozilla中它不起作用你能帮我解决这个问题吗？

Answer 1

只需将CSS选择器更改为：

Demo Fiddle

.pp-dropdown-toggle:focus ul.pp-dropdown, .pp-dropdown-toggle a:focus + ul.pp-dropdown {
    visibility: visible;
}

Answer 2

我更喜欢this：

.pp-dropdown-toggle {
  position: relative;
 }

.pp-dropdown-toggle .pp-dropdown {
    visibility: hidden;
    position: absolute;
    top:100%;
}
/* if you also need hover */
/* it is behind the css3, so you can not to worry about cross browser compatibility  */
.pp-dropdown-toggle:focus > ul.pp-dropdown, .pp-dropdown-toggle:hover > ul.pp-dropdown {
    visibility: visible;
}
/* answer for your question in the comments */
.pp-dropdown-toggle:not(:focus) > ul.pp-dropdown, .pp-dropdown-toggle:not(:hover) > ul.pp-dropdown {
    visibility: hidden;
}

如果它没有帮助尝试不针对li元素而是针对链接，例如this。

在焦点时创建下拉菜单

2 个答案:

Demo Fiddle