gpt4 book ai didi

html - 使div菜单按钮下拉

转载 作者:行者123 更新时间:2023-11-28 16:09:58 25 4
gpt4 key购买 nike

如何仅使用 HTML 和 CSS 使 div 菜单按钮下拉并向其添加子菜单。

HTML:

<div class="right_menu"><a href="#" class="menu_button">Change Password</a>
<a href="#" tabindex='1' class="sign_out_button">Sign Out</a>
</div>

CSS:

 .sign_out_button{
background-color: #2fa4e7;
padding-top: 16px;
padding-bottom: 16px;
padding-left:10px;
padding-right:10px;
color: #FFF;
float: left;
text-decoration: none;
}
.sign_out_button:hover{background-color:#1892d7;}
.sign_out_button a{color:#FFF;
text-decoration: none;}

最佳答案

这是另一种没有 javascript 的选择,它也能正常工作

<ul>
<li>
Menu
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>

这是您的 html,插入您的页面。现在来了 CSS

ul {
width:200px;
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {width:200px;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width:200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}

这里有一个演示

https://jsfiddle.net/r50kbnq7/

关于html - 使div菜单按钮下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28864194/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com