用CSS制作帶箭頭的菜單主要是實現箭頭,下面為代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>箭頭菜單</title> <style type="text/css"> .menu { font-family:Arial; font-size:16px; width:140px; border:solid 1px #CCCCCC; margin:0 auto; } .menu a,.menu a:visited { text-decoration:none; text-align:center; color:#CC0000; display:block; padding:4px; background-color:#FFFFFF; border:solid 1px #FFFFFF; position:relative; } .menu a:hover { border-color:#CC0000; } .menu a span { display:none; } .menu a:hover span { display:block; position:absolute; height:0; width:0; overflow:hidden; border:solid 8px #FFFFFF; top:4px; } .menu a:hover span.left { border-left-color:#CC0000; left:8px; } .menu a:hover span.right { border-right-color:#CC0000; right:8px; } .menu a:hover span.tip { color:#000000; font-size:12px; display:block; position:absolute; left:150px; top:0px; width:100px; height:auto; padding:5px; background-color:#EEEEEE; border:1px dashed #223344; } </style> </head> <body> <div class="menu"> <a href="#"> <span class="left"></span> Home <span class="right"></span> <span class="tip">這里說明Home菜單項</span> </a> <a href="#"> <span class="left"></span> Contact <span class="right"></span> <span class="tip">這里說明Contact菜單項</span> </a> <a href="#"> <span class="left"></span> Web Dev <span class="right"></span> <span class="tip">這里說明Web Dev菜單項</span> </a> <a href="#"> <span class="left"></span> Web Design <span class="right"></span> <span class="tip">這里說明Web Design菜單項</span> </a> <a href="#"> <span class="left"></span> Map <span class="right"></span> <span class="tip">這里說明Map菜單項</span> </a> </div> </body> </html>
