我有链接和一个div.我想在用户点击链接时在链接下显示div.我想通过代码将div放在链接下面,这意味着div的top和left将根据链接的顶部和左侧位置由代码设置.需要帮忙.
<a id="link">About</a>
<div id="submenu">
<a href="#">About the company</a><br />
<a href="#">Careers</a>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
a#link
{
background: #CCC;
padding: 10px;
cursor: pointer;
margin-left: 600px;
margin-top: 200px;
position: absolute;
}
a#link1
{
background: #CCC;
padding: 10px;
cursor: pointer;
margin-left: 600px;
margin-top: 250px;
position: absolute;
}
div#submenu
{
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 165px;
display: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
border:5px solid;
border-color:#F1F2F2;
z-index:9999;
} …
ul#listcontainer .li1 {
display: block;
width: 210px;
height: 130px;
border: 1px solid red;
position: relative;
}
.li1 span {
position: absolute;
top: 140px;
left: 0px;
right: 0;
width: 220px;
padding: 2px 0;
background-color: #000;
background-color: rgba(0, 0, 0, 0.65);
color: #fff;
opacity: 0;
transition: opacity .5s ease-in-out;
text-align: center;
font-family: Arial;
font-size: 14px;
}
.li1:hover span {
opacity: 1;
}
.li1:hover span:hover {
opacity: 0;
}<ul id="listcontainer">
<li class="li1">
<img src="images/li1.png"><span><b>Exteriors:</b> <br>Minimal Wear, Battle Scarred<br><br><img src="images/tick.png"><br> </span>
</li>
</ul> …