<title>導航菜單</title> <style> * { padding: 0px; margin: 0px; font-size: 14px; } .menu { width: 216px; margin-left: 100px; border: 2px solid #E4393C; } .title { height: 40px; line-height: 40px; background-color: #E4393C; padding-left: 20px; } .title a { color: white; text-decoration: none; font-weight:bold; } .title01 { height: 30px; line-height: 30px; padding-left: 10px; background: url("images/2.png") no-repeat right center; z-index:3; } /*爲後面的懸浮層做準備*/ .title01 a { color: #313131; text-decoration: none; font-size: 13px; } .title01 a:hover { text-decoration: underline; font-weight:bold; color: #E4393C; } .title01:hover { border: 1px solid #ddd; border-right: none; -webkit-box-shadow: 0 0 8px #ddd; /*陰影外發光效果*/ -moz-box-shadow: 0 0 8px #ddd; box-shadow: 0 0 8px #ddd; } .title01:hover .show_menu { display: block; } .title01:hover span { /*添加空標籤span來形成遮罩層擋住邊框線*/ width: 25px; height: 30px; background-color: #fff; position: relative; z-index:10; float: right; right: -2px; } .show_menu { display: none; position: absolute; z-index:4; top: 42px; left: 318px; border: 1px solid #ccc; width: 715px; background: #fff; } .left_div { width: 400px; float: left; margin: 0 5px; } .right_div { width: 300px; float: left; background-color: greenyellow; margin: 0 2px; } </style> </head> <body> <div class="menu"> <div class="title"><a href="#">全部商品分類</a></div> <div class="title01"><a href="#">圖書、音像、數字產品</a><span></span> <div class="show_menu"> <div class="left_div"> 左側分類區域<br/> 左側分類區域<br/> </div> <div class="right_div"> 右側分類區域<br/> 右側分類區域<br/> </div> </div> </div> 總結： 1，用div來寫導航 2，box-show來添加發光陰影效果 3，span空標籤來寫遮罩層，形成直通的效果 4，通過絕對定位的方式position和z-index的屬性來形成遮罩效果
