html - 在 HTML 和 CSS 中制作下拉菜单
问题描述
我想只使用 html 和 css 制作一个下拉菜单。但是,我无法做到这一点。我想让其他列表项成为 dropdwon 菜单。任何人都可以帮助我吗?
这是我的 CSS 代码:
```
nav {
background-color: #01a6f0;
}
.navbar {
list-style: none;
float: right;
margin-right: 10rem;
margin-top: 2.6rem;
margin-bottom: .5rem;
}
.navbar li {
display: inline-block;
padding: 1rem 1rem;
}
.navbar li:hover {
background-color: #01A6FE;
}
.navbar li a {
color: #fff;
}
```
Here's the HTML code
```
<nav>
<ul class="navbar">
<li><a href="./home.html">Home</a></li>
<li><a href="./puzzles.html">Puzzles</a></li>
<li><a href="./stories.html">Stories</a></li>
<li><a href="./goods.html">Goods</a></li>
<li class="dropdown-link">Others
<ul class="dropdown-menu">
<li><a href="./story_show.html">Under The Sea</a></li>
<li><a href="./story_show.html">Middle The Sea</a></li>
<li><a href="./goods_show.html">Ovver The Sea</a></li>
</ul>
</li>
</ul>
</nav>
解决方案
试试这个例子HTML
和CSS
:
如果您想了解有关此代码的更多信息,请访问此站点: https ://css-tricks.com/solved-with-css-dropdown-menus/
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a>
<ul class="dropdown">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
</ul>
</nav>
推荐阅读
- django - Django:过滤我的艺术家模型以显示来自请求用户的对象时遇到问题
- mule - 尝试将日期值从 mule 数据库连接器传递到 UDT 时出错
- javascript - 尽管使用了 zIndex,但 React-native-paper 菜单隐藏在其他元素后面。我如何将元素置于顶部?
- php - 更新sql记录到两个表
- python - 在新屏幕中输出输入文本
- ios - 具有唯一查询字符串的 iOS WKWebView 离线缓存?
- python - Dask Dataframe nunique 操作:Worker 内存不足(MRE)
- ide - 我在哪里可以获得带有文本框输入到程序、stderr 框和输出框等的多语言 ide 的离线版本?
- sql - 如何使用一个表的列中的值来确定要在另一个表中的选择中使用的列
- reactjs - 如何在 React Native 中设置相对于设备屏幕的容器样式