右键点击

最新推荐文章于 2026-05-19 10:43:04 发布
原创最新推荐文章于 2026-05-19 10:43:04 发布 · 1k 阅读
本内容遵循CC 4.0 BY-SA版权协议
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding: 0;list-style: none}

        .ul1{
            width: 250px;
            height: 273px;
            background: #F2F2F2;
            position: absolute;
            display: none;
        }
        .word1{
            margin-left: 160px;
        }
        .word2{
            margin-left: 114px;
        }
        .word3{
            margin-left: 160px;
        }
        .ul2{
            width: 250px;
            height: 140px;
            background: #F2F2F2;
            border-left: 1px solid #A0A0A0;
            display: none;
            position: absolute;
            top: 0;
            left: 250px;
        }
        .ul3{
            width: 250px;
            height: 140px;
            background: #F2F2F2;
            border-left: 1px solid #A0A0A0;
            position: relative;
            top:-240px;
            left: 250px;
            display: none;
        }
        .ul4{
            width: 250px;
            height: 140px;
            background: #F2F2F2;
            border-left: 1px solid #A0A0A0;
            position: relative;
            top:-75px;
            left: 250px;
            display: none;
        }
        li{
            margin-top: 2px;
        }
        li:hover{
               background: #D9D9D9;
        }

    </style>
</head>
<body>

<ul class="ul1">
    <li class="word4">查看（V) <span class="word1">></span></li>
    <li class="word5">排序方式（O）  <span class="word2">></span></li>
    <li>刷新（E）</li>
    <li><hr></li>
    <li>粘贴（P）</li>
    <li>粘贴快捷方式（S）</li>
    <li>撤销 重命名（U）      Crtl+Z</li>
    <li>在Visula Studio中打开（V）</li>
    <li><hr></li>
    <li>英特尔@显卡设置</li>
    <li><hr></li>
    <li class="word6">新建（W )<span class="word3">></span></li>
    <li><hr></li>
    <li>显示设置（D）</li>
    <li>个性化（R）</li>
    <ul class="ul2">
        <li>大图标（R）</li>
        <li>中等图标（M）</li>
        <li>小图标（N）</li>
        <li>自动排列图标（A）</li>
        <li>将图标与网络对齐（I）</li>
        <li>显示桌面图标（D）</li>
    </ul>
    <ul class="ul3">
        <li>大图标（R）</li>
        <li>中等图标（M）</li>
        <li>sadfsdfa</li>
        <li>自动排列图标（A）</li>
        <li>将图标与网络对齐（I）</li>
        <li>显示桌面图标（D）</li>
    </ul>
    <ul class="ul4">
        <li>大图标（R）</li>
        <li>中等图标（M）</li>
        <li>sadfsdfa</li>
        <li>asdfsdaf</li>
        <li>将图标与网络对齐（I）</li>
        <li>显示桌面图标（D）</li>
    </ul>
</ul>




<script>
    var ul1=document.getElementsByClassName("ul1")[0];
    var ul2=document.getElementsByClassName("ul2")[0];
    var ul3=document.getElementsByClassName("ul3")[0];
    var ul4=document.getElementsByClassName("ul4")[0];
    var word4=document.getElementsByClassName("word4")[0];
    var word5=document.getElementsByClassName("word5")[0];
    var word6=document.getElementsByClassName("word6")[0];



      document.onclick=function () {
          ul1.style.display="none";
          ul2.style.display="none";
          ul3.style.display="none";
          ul4.style.display="none";
      };
      document.oncontextmenu=function (ev) {
          var evt=window.event||ev;
          ul1.style.left=evt.clientX+"px";
          ul1.style.top=evt.clientY+"px";
          ul1.style.display="block";
          return false;
      };
    word4.onmouseover=function (ev) {
        var evt=window.event||ev;
        ul2.style.display="block";
        ul3.style.display="none";
        ul4.style.display="none";
    };
    word5.onmouseover=function (ev) {
        var evt=window.event||ev;
        ul2.style.display="none";
        ul3.style.display="block";
        ul4.style.display="none";
    };
    word6.onmouseover=function (ev) {
        var evt=window.event||ev;
        ul2.style.display="none";
        ul3.style.display="none";
        ul4.style.display="block";
    }

</script>
</body>
</html>