cs
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Mountaintop Corner</title> 6 <style type="text/css"> 7 ul{ 8 height:26px; 9 margin:0; 10 padding:10px; 11 list-style-type:none; 12 background:#ddd; 13 } 14 .item{ 15 float:left; 16 width:100px; 17 margin:0 2px 0 0; 18 padding 0; 19 font: 14px Arial; 20 font-weight:bold; 21 } 22 23 .item p{ 24 padding:0 0 2px 0; 25 margin:0px; 26 text-align:center; 27 background:#cc6; 28 border:solid 1px #000; 29 border-top-width:0; 30 } 31 32 33 .item div{ 34 height:1px; 35 overflow:hidden; 36 background:#cc6; 37 border-left:solid 1px #000; 38 border-right:solid 1px #000; 39 } 40 41 .item .row1{ 42 margin:0 5px; 43 background:#000; 44 } 45 46 .item .row2{ 47 margin:0 3px; 48 border:0 2px; 49 } 50 51 .item .row3{ 52 margin:0 2px; 53 } 54 .item .row4{ 55 margin:0 1px; 56 height:2px; 57 } 58 59 60 .item a , .item a:visted{ 61 display:block; 62 color:#000; 63 text-decoration:none; 64 } 65 .item a:hover{ 66 background:transparent; 67 } 68 69 .item a:hover p{ 70 background:#884; 71 color:#fff; 72 } 73 74 .item a:hover .row2, 75 .item a:hover .row3 , 76 .item a:hover .row4{ 77 background:#884; 78 } 79 </style> 80 </head> 81 <body> 82 <ul> 83 <li class="item"><a href="#"> 84 <div class="row1"></div> <div class="row2"></div> 85 <div class="row3"></div> <div class="row4"></div> 86 <p>Home</p> 87 </a> 88 </li> 89 <li class="item"><a href="#"> 90 <div class="row1"></div> <div class="row2"></div> 91 <div class="row3"></div> <div class="row4"></div> 92 <p>Contact Us</p> 93 </a> 94 </li> 95 <li class="item"><a href="#"> 96 <div class="row1"></div> <div class="row2"></div> 97 <div class="row3"></div> <div class="row4"></div> 98 <p>Web Dev</p> 99 </a> 100 </li> 101 <li class="item"><a href="#"> 102 <div class="row1"></div> <div class="row2"></div> 103 <div class="row3"></div> <div class="row4"></div> 104 <p>Map</p> 105 </a> 106 </li> 107 </ul> 108 </body> 109 </html>