html中用无序列表实现简单的右键菜单

约定不等于承诺〃 2021-09-15 11:30 383阅读 0赞

<!DOCTYPE html>  
<html lang="zh-CH">  
<head>  
<meta charset="UTF-8">  
<title>无序列表右键菜单</title>  
<style type="text/css">  
\*\{  
margin: 0px;  
padding: 0px;  
list-style: none;  
\}  
  
.bigbox\{  
          width: 250px;  
          height: 700px;  
          background-color: \#CCCCCC;  
\}  
ul\{  
padding-left: 20px;  
padding-right:20px;  
\}  
       li\{  
        widows: 280px;  
        height: 30px;  
        padding-left: 40px;  
          
        line-height: 30px;  
        font-size: 18px;  
        padding-top: 12px;  
        padding-bottom: 11px;  
  
  
       \}  
       li:hover\{  
        background-color: \#0080FF;  
       \}  
  
  
       .lithree,.lieight,.linine,.lieleven\{  
        border-bottom: 2px solid \#808080;  
       \}  
       .lisecond\{  
        background:url(img/con1\_bg2.png) no-repeat left center;  
       \}  
       .lione,.lithree,.linine,.litwelve\{  
        background: url(img/con1\_bg1.png) no-repeat right center;  
       \}  
       .lifour\{  
        background: url(img/con2\_bg1.png) no-repeat left center;  
       \}  
  
  
</style>  
</head>  
<body>  
<div class="bigbox">  
<ul>  
<li class="lione">工具栏</li>  
<li class="lisecond">状态栏</li>  
<li class="lithree">浏览器栏</li>  
<li class="lifour">缩略图</li>  
<li>平铺</li>  
<li>图标</li>  
<li>列表</li>  
<li class="lieight">详细信息</li>  
<li class="linine">排列图标</li>  
<li>选择详细信息</li>  
<li class="lieleven">自定义文件夹</li>  
<li class="litwelve">转到</li>  
<li>刷新</li>  
</ul>  
</div>  
  
</body>

</html>

![70][] ![70 1][]

[70]: https://img-blog.csdn.net/20180523220534582?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20210813/d63cf10d0f0b493d845e8e8b9259ff9d.png