Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #panel {
- position: fixed;
- top: 0px;
- right: 20%;
- bottom: 0px;
- background: snow;
- }
- .contact {
- background: skyblue;
- position: relative;
- height:50px;
- }
- .std {
- width: 80px;
- }
- .vtl {
- position: absolute;
- background: red;
- display: none;
- left:-153px;
- margin-top:-35px;
- width: 150px;
- height: 50px;
- }
- .vtl:after {
- content: ' ';
- height: 0;
- position: absolute;
- width: 0;
- border: 10px solid transparent;
- border-left-color: red;
- left: 100%;
- top: 10px;
- }
- .contact:hover .vtl {
- display: block;
- }
- <div id="panel">
- <div class="contact">
- <div class="std">
- Hover me!
- </div>
- <div class="vtl">
- tools
- </div>
- </div>
- <div class="contact">
- <div class="std">
- Hover me!
- </div>
- <div class="vtl">
- tools
- </div>
- </div>
- <div class="contact">
- <div class="std">
- Hover me!
- </div>
- <div class="vtl">
- tools
- </div>
- </div>
- ......
- </div>
- <div id="panel">
- <div class="contact">
- <div class="std">
- Hover me!
- </div>
- <div class="vtl">
- tools
- </div>
- </div>
- </div>
- #panel {
- position: fixed;
- top: 0px;
- right: 20%;
- bottom: 0px;
- background: snow;
- width:260px;
- overflow: auto;
- }
- .contact {
- background: skyblue;
- position: relative;
- height:50px;
- }
- .std {
- width: 80px;
- float:right;
- }
- .vtl {
- position: absolute;
- background: red;
- display: none;
- width: 150px;
- margin-left:10px;
- margin-top:-10px;
- height: 50px;
- }
- .vtl:after {
- content: ' ';
- height: 0;
- position: absolute;
- width: 0;
- border: 10px solid transparent;
- border-left-color: red;
- left: 100%;
- top: 10px;
- }
- .contact:hover .vtl {
- display: block;
- }
- #panel {
- position: absolute;
- top: 0px;
- right: 20%;
- bottom: 0px;
- background: snow;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement