1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="test1.css"> 7 </head> 8 <body> 9 <div class="imagemap"> 10 <img src="1.jpg" alt="some of the team"> 11 <ul> 12 <li class="rich"><a href="http://www.clagnut.com/"> 13 <span class="outer"> 14 <span class="inner"> 15 <span class="note">Richard Rutter</span> 16 </span> 17 </span> 18 </a></li> 19 <li><a href=""></a></li> 20 <li><a href=""></a></li> 21 <li><a href=""></a></li> 22 <li><a href=""></a></li> 23 </ul> 24 25 </div> 26 </body> 27 </html>
1 .imagemap{ 2 width:333px; 3 height:500px; 4 position:relative; 5 } 6 .imagemap img{ 7 width:333px; 8 height:500px; 9 } 10 .imagemap ul{ 11 margin:0; 12 padding:0; 13 list-style: 0; 14 } 15 .imagemap a{ 16 position:absolute; 17 display:block; 18 background: greenyellow; 19 color:#000; 20 text-decoration: none; 21 border:1px solid transparent; 22 } 23 .imagemap a .outer{ 24 display:block; 25 border:1px solid transparent; 26 } 27 .imagemap a .inner{ 28 display: block; 29 width:50px; 30 height:60px; 31 border: 1px solid transparent; 32 } 33 .imagemap .rich a{ 34 top:50px; 35 left:80px; 36 } 37 .imagemap .rich .note{ 38 position:absolute; 39 bottom:-1.7em; 40 width:7em; 41 padding:0.2em 0.5em; 42 background: #ffc; 43 text-align:-webkit-center; 44 left:-1000em; 45 46 } 47 .imagemap a:hover .note,.imagemap a:focus .note{ 48 left:0px; 49 } 50 .imagemap:hover .inner{ 51 border-color: red; 52 margin:5px; 53 } 54 .imagemap:hover .outer{ 55 border-color: red; 56 57 }
设置导航栏的 下拉列表：可使用父元素相对定位，子元素绝对定位，一开始进行隐藏，悬停时，将定位位置更改让其出现。