類比windows平台的操作功能表效果代碼
來源:互聯網
上載者:User
代碼示範:<meta charset="utf-8"><br /><style> <!-- body{background: #222; font: 14px 'Microsoft Yahei', Arial;} ul,li{list-style: none;padding:0;margin:0;} a{text-decoration: none;color:#000;} </p><p>#wrap { width: 800px; height: 550px; border:1px solid #FF9C00; background: #F0E6AF; position:relative; margin: .5em auto; } #wrap ul { background: #eee; border: 1px solid #999; width: 150px; position: absolute; display: none; -moz-box-shadow: 3px 3px 9px #999; -webkit-box-shadow: 3px 3px 9px #999; -o-box-shadow: 3px 3px 9px #999; box-shadow: 3px 3px 9px #999; } #wrap ul li { border-bottom: 1px solid #ddd; line-height: 24px; } #wrap li.no {border-bottom: none;} #wrap ul li a { display: block; padding-left: .5em; } #wrap ul li a:hover { background-color: #FFBD00; } --> </style><p><p>單擊右鍵看效果~</p><ul id="menu"><li>撤銷</li><li>重做</li><li>複製</li><li>粘貼</li><li>大小寫轉換</li><li>斷行符號</li><li>拼字檢查</li><li>建立</li><li>自訂</li><li>圖形選項</li><li class="no">關閉</li></ul><p>