Question

也许我并不是为了这个东西，但我无法弄清楚如何在我的网站上放置翻转菜单。我想要一个居中的下拉菜单，其中隐藏文本，直到您翻转图像。我已经有了这个形象，我只是不知道该怎么做。我从其他网站上采取了CSS来尝试向后理解它，但这确实没有帮助。

我更喜欢它只是因为我对JS更糟糕

编辑：这是一个JSFiddle：http://tinyurl.com/prwcm8g

Answer 1

代码非常简单，如果你想要的只是翻转菜单，你可以使用伪类，例如a：hover和a：visited see：pseudo classes

至于以前的评论员建议使用预处理器，请不要理会。如果您对HTML / CSS学习没有清楚的了解，预处理器脚本（SASS / LESS）只会影响您对使用样式编码的结构编码如何相互作用的教育。

代码：

<html>
<head>
<style>
.menu {
    margin: 0px;
    padding: 0px;
    color: #000;
    width: 120px;
    list-style: none;
}
.menu li {
    padding: 2px 2px 0px 0px;
    margin: 0px;
}
.menu li a, .menu li a:visited {
    margin: 0px;
    padding: 3px 3px;
    color: #fff;
    display: block;
    border: #ccc 1px solid;
    background: #666;
    text-decoration: none;
}
.menu li a:hover {
    color: #000;
    background: #ccc;
    border: #000 1px solid;
}
</style>
</head>
<body>
<ul class="menu">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">links</a></li>
</ul>
</body>
</html>

根据图像创建翻转菜单

1 个答案: