- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Demo</title>
- <script type="text/javascript">
- window.onload = function(){
- var btn = document.getElementsByTagName('button')[0];
- var flt = document.getElementsByTagName('div')[0];
- btn.onclick = function(){
- event.cancelBubble = true;
- var x = btn.offsetLeft - 15 + 'px';
- var y = btn.offsetTop - 100 + 'px';
- flt.style.top = y;
- flt.style.left = x;
- flt.style.display = 'block';
- }
- document.onclick = function(){
- flt.style.display = 'none';
- }
- }
- </script>
- <style type="text/CSS">
- *{
- margin: 0px;
- padding: 0px;
- }
- div{
- width: 60px;
- height: 100px;
- background: #33ccff;
- display: none;
- position: absolute;
- }
- div ul{
- text-align: center;
- }
- div li{
- list-style-type: none;
- }
- button{
- top: 300px;
- left: 400px;
- position: absolute;
- }
- </style>
- </head>
- <body>
- <button id="btn">Click</button>
- <div>
- <ul id="nav">
- <li class="item1"><a href="">Demo 1</a></li>
- <li class="item2"><a href="">Demo 2</a></li>
- <li class="item3"><a href="">Demo 3</a></li>
- <li class="item4"><a href="">Demo 4</a></li>
- <li class="item5"><a href="">Demo 5</a></li>
- </ul>
- </div>
- </body>
- </html>
来源: http://www.phpxs.com/code/1003922/