如何添加下拉菜单? [英] How to add drop-down menu?
本文介绍了如何添加下拉菜单?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下水平菜单,我需要为报告菜单项添加下拉菜单。
请帮我解决这个问题。谢谢。
Hi,
I have below horizontal menu and I need to add drop-down for Report menu item.
please help me how to do this. Thanks.
<div id="talltabs-maroon">
<ul>
<li class="first"><a href="#">Home <span>Page</span></a></li>
<li class="active"><a href="#"><span>About us</span></a></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last"><a href="#">Contact <span>Us</span></a></li>
</ul>
</div>
css for horizontal menu
css for horizontal menu
#talltabs-maroon {
clear:left;
float:left;
padding:0;
border-top:6px solid #CD324F;
width:100%;
overflow:hidden;
font-family:Georgia, serif;
}
#talltabs-maroon ul {
float:left;
margin:0;
padding:0;
list-style:none;
position:relative;
left:50%;
text-align:center;
}
#talltabs-maroon ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#talltabs-maroon ul li a {
display:block;
float:left;
margin:0 1px 0 0;
padding:30px 10px 6px 10px;
background:#CD324F;
text-decoration:none;
color:#fff;
}
#talltabs-maroon ul li a:hover {
padding:35px 10px 6px 10px;
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding:40px 10px 6px 10px;
}
我的尝试:
What I have tried:
.dropbtn {
list-style-type: none;
color: white;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: relative;
right: 0;
background-color: black;
/*background-image: url('../../Images/black-olive.jpg'); dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 0;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
推荐答案
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
css
css
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
关于JSFiddle的例子
https://jsfiddle.net/qtbcpnp2/
< tr>
< td>
RELIGION:< / td>
< td>
< select name =rel>
<选择选项=值=默认>(请选择您的宗教信仰)< / option>
< option value =Buddhist>佛教< / option>
< option value =Catholic> Catholic< / option>
< option value =Christian> Christian< / option> ;
< option value =Hindu> Hindu< / option>
< option value =Muslim> Muslim< / option>
< option value =Others> Others< / option>
< / select>
< / td>
< / tr>
<tr>
<td>
RELIGION :</td>
<td>
<select name="rel">
<option selected="" value="Default">(Please select your Religion)</option>
<option value="Buddhist">Buddhist</option>
<option value="Catholic">Catholic</option>
<option value="Christian">Christian</option>
<option value="Hindu">Hindu</option>
<option value="Muslim">Muslim</option>
<option value="Others">Others</option>
</select>
</td>
</tr>
这篇关于如何添加下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文