Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
​
<style>
.storytitles { padding-top:50px; }
.storytitles ul{margin:0; padding:0; position:relative; width:500px;}
.storytitles li{list-style-type:none; display:block; font-size:12px; margin:0; padding:0 0 8px 5px;}
.tip{  padding:15px 20px 15px 15px; background:#ccc; display:none; overflow:hidden; z-index:10; position:absolute; font-size:12px; margin-top:-50px; left:300px;}
        
.tip h4{ display:block; font-size:16px; margin:0; padding:0; color:#b02a30;}
​
.tip p{ font-size:12px; margin:0; padding:5px 0 0 0}
</style>
<script>
    $(document).ready(function(){
    $("a[id$='_down']").hover(function(){
        $(this).parent().next().toggle()
    });
});
​
</script>
</head>
​
<body>
<div class="storytitles">
   <ul>
   <li> <a href="success_story_bfsi.aspx" id="a1_down">Link 1</a></li>
    <div id="tip1_down" style="display:none;" class="tip">
    abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 ...</div>
    <li>
    <a href="success_story_InMobi.aspx" id="a2_down">Link 2</a></li>
    <div id="tip2_down" style="display:none;" class="tip">abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 ...</div>
    
    <li><a href="case_study.aspx" id="a3_down">Link 3</a></li>
    <div id="tip3_down" style="display:none;" class="tip">
    abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 ...</div>
    
    <li>
    <a href="success_story_nehajain.aspx" id="a4_down">Link 4</a></li>
    <div id="tip4_down" style="display:none;" class="tip">abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 ...</div>
    
    <li>
    <a href="educomp.aspx" id="a4_down">Link 5</a></li>
    <div id="tip4_down" style="display:none;" class="tip">abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 abc content1 ...</div>
    </ul>
    </div>
</body>
</html>
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers