css - 使用 CSS HOVER 制作最简单的下拉菜单

标签 css html

其实我是网络开发的新手,这个问题可以很简单,但请帮助我。 可以提供帮助的人。我试图在将鼠标悬停在按钮上时制作一些下拉菜单。 怎么了?

.clicker {
    border: none;
    height: 30px;
    width: 120px;
    background-color: orange;
    color: blue;
    cursor: pointer;
    border-radius: 5px;
    position: absolute;
}
.dropdownKeeper {
    display: none;
    position: relative;
    top: 15px;
    left: 150px;
}
button:hover .dropdownKeeper {
    display: block;
}
<!DOCTYPE html>
<html>
    <head>
        <title>a</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <button class="clicker">Click Me</button>
        <div class="dropdownKeeper">
            <a href="#">ajsghj</a>
            <a href="#">ajsghj</a>
            <a href="#">ajsghj</a>
        </div>
    </body>
</html>

最佳答案

最好在css文件中使用类名,因为你的网站应该有更多的一个按钮。

button.clicker:hover + .dropdownKeeper {
    display: block;
}

关于css - 使用 CSS HOVER 制作最简单的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39724741/

相关文章:

css - 边框图像 : workaround for IE

html - 将 INPUT 与 div 完美对齐

python - 用 Mechanize 打开网页后,如何继续提交

javascript - HTML - 将 SELECT 标记内容放入 INPUT type = "text"

jquery - 页面中的透明图像

Javascript箭头选择+滚动条

jquery - 放大和重新定位光滑 slider 的箭头

html - 如何防止光标输入垃圾邮件悬停元素?

html - 为 TRichEdit 添加真正的超链接支持

javascript - jquery 可调整大小的处理程序随内容移动?