css - 如何让父母无法点击和无法点击

Question

我在这方面完全是新手，所以我希望我能弄清楚我在http://test.lawsart.com/css3menu_2.html上遇到的问题。css3menu 的人没有阅读我的问题。问题是，当您滚动顶级菜单项“投资组合”或三个子菜单之一并单击时，您将被发送到只有菜单的浏览器页面。在该页面上，投资组合和三个子菜单标题不可点击，这是应该的。您将在 html 标记中看到 href 引用是“#”，我认为这会起作用。有没有办法在 html 标记或 style.css 文件中执行此操作？如果没有，我该如何用 jQuery 修复它？如果答案是查询，请非常非常具体，因为我对 jQuery 或如何实现它知之甚少。谢谢。

这是html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>css3menu.com</title>
    <!-- Start css3menu.com HEAD section -->
    <link rel="stylesheet" href="../css3menuH/style.css" type="text/css" /><style type="text/css">._css3m{display:none}</style>
    <!-- End css3menu.com HEAD section -->

</head>
<body style="background-color:#">

<!-- Start css3menu.com BODY section -->
<ul id="css3menu1" class="topmenu">
    <li class="topmenu"><a href="http://test.lawsart.com/Home.html" style="width:48px;height:17px;line-height:17px;">Home</a></li>
    <li class="topmenu"><a href="http://test.lawsart.com/About.html" style="width:62px;height:17px;line-height:17px;">About Me</a></li>
    <li class="topmenu"><a href="#" style="width:64px;height:17px;line-height:17px;"><span>Portfolios</span></a>
    <ul>
        <li class="subfirst"><a href="#"><span>Horses</span></a>
        <ul>
            <li class="subfirst"><a href="http://test.lawsart.com/Horse.html">Horses I</a></li>
            <li><a href="http://test.lawsart.com/Home.html">Horses II</a></li>
            <li><a href="http://test.lawsart.com/Home.html">Horses III</a></li>
            <li><a href="http://test.lawsart.com/Home.html">Horses IV</a></li>
            <li><a href="http://test.lawsart.com/Home.html">Horses V</a></li>
            <li><a href="http://test.lawsart.com/Home.html">Horses VI</a></li>
            <li class="sublast"><a href="http://test.lawsart.com/Home.html">Horses VII</a></li>
        </ul></li>
        <li><a href="#"><span>Dogs</span></a>
        <ul>
            <li class="subfirst"><a href="http://test.lawsart.com/Dog.html">Dogs I</a></li>
            <li class="sublast"><a href="http://test.lawsart.com/Home.html">Dogs II</a></li>
        </ul></li>
        <li><a href="#"><span>People</span></a>
        <ul>
            <li class="subfirst"><a href="http://test.lawsart.com/People.html">People I</a></li>
            <li class="sublast"><a href="http://test.lawsart.com/Home.html">People II</a></li>
        </ul></li>
        <li class="sublast"><a href="http://test.lawsart.com/Stills.html">Stills</a></li>
    </ul></li>
    <li class="topmenu"><a href="http://test.lawsart.com/Order.html" style="width:47px;height:17px;line-height:17px;">Order</a></li>
    <li class="topmenu"><a href="http://test.lawsart.com/Contact.html" style="height:17px;line-height:17px;">Contact Me</a></li>
</ul><p class="_css3m"><a href="http://css3menu.com/">CSS3 Drop Down Menu Free Css3Menu.com</a></p>
<!-- End css3menu.com BODY section -->

</body>
</html>

这是 style.css 文件：

ul#css3menu1,ul#css3menu1 ul{
    margin:0;list-style:none;padding:0;background-color:#018b01;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));   background-image:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(255,255,255,0.16));background-repeat:repeat;border-width:1px;border-style:solid;border-color:#343434;-moz-border-radius:28px;-webkit-border-radius:28px;border-radius:28px;}
ul#css3menu1 ul{
    display:none;position:absolute;left:0;top:100%;-moz-box-shadow:1.4px 1.4px 2px #B1B1B1;-webkit-box-shadow:1.4px 1.4px 2px #B1B1B1;box-shadow:1.4px 1.4px 2px #B1B1B1;background-color:#018b01;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));   background-image:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.16),rgba(255,255,255,0));border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;border-color:#000000;padding:0;}
ul#css3menu1 li:hover>*{
    display:block;}
ul#css3menu1 li{
    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{
    z-index:1;}
ul#css3menu1 ul ul{
    position:absolute;left:100%;top:0;}
ul#css3menu1{
    font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:1px 1px 1px 0;
    *display:inline;}
* html ul#css3menu1 li a{
    display:inline-block;}
ul#css3menu1>li{
    margin:0 0 0 1px;}
ul#css3menu1 ul>li{
    margin:1px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
    outline-style:none;}
ul#css3menu1 a{
    display:block;vertical-align:middle;text-align:left;text-decoration:none;font:12px Arial;color:#E7E5E5;cursor:pointer;padding:2px 20px 2px 20px;background-color:;background-repeat:repeat;border-width:0;border-style:solid;border-color:transparent;}
ul#css3menu1 ul li{
    float:none;margin:0;}
ul#css3menu1 ul a{
    text-align:left;}
ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{
    background-color:#7ACF27;border-color:#F8F8F8;border-style:solid;color:#333;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));   background-image:linear-gradient(180deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.38),rgba(85,170,0,0.7));text-decoration:none;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#60FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 ul span{
    background-image:none;padding-right:2px;}
ul#css3menu1 li.topmenu>a{
    background-color:;border-width:1px 0 0 0;border-style:solid;border-color:;border-radius:16px;-moz-border-radius:16px;-webkit-border-radius:16px;font:bold 13px Arial;color:#E7E5E5;text-decoration:none;text-shadow:0 1px 1px #000000;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu a.pressed{
    background-color:#7dfa00;background-image:-o-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7)); background-image:-moz-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));   background-image:linear-gradient(180deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));  background-image:-webkit-linear-gradient(-90deg,rgba(255,255,255,0.77),rgba(85,170,0,0.7));border-style:solid;border-color:#F8F8F8;color:#333;text-decoration:none;text-shadow:0 1px 0 #C5EAA1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0,startColorstr=#C6FFFFFF,endColorstr=#B355AA00)}
ul#css3menu1 li.subfirst>a{
    border-radius:9px 9px 0 0;-moz-border-radius:9px 9px 0 0;-webkit-border-radius:9px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;}
ul#css3menu1 li.sublast>a{
    border-radius:0 0 9px 9px;-moz-border-radius:0 0 9px 9px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:9px;-webkit-border-bottom-left-radius:9px;}

score 1 · Accepted Answer

您发布的 HTML 看起来不错，但在实时页面本身上存在导致链接处于活动状态的额外属性。这是现场网站上“马”的代码：

<li class="subfirst"><a href="#" target="_top"><span>Horses</span></a>
  <ul>
    <li class="subfirst"><a href="http://test.lawsart.com/Horse.html" target="_top">Horses I</a></li>
    <li><a href="http://test.lawsart.com/Home.html" target="_top">Horses II</a></li>
    <li><a href="http://test.lawsart.com/Home.html" target="_top">Horses III</a></li>
    <li><a href="http://test.lawsart.com/Home.html" target="_top">Horses IV</a></li>
    <li><a href="http://test.lawsart.com/Home.html" target="_top">Horses V</a></li>
    <li><a href="http://test.lawsart.com/Home.html" target="_top">Horses VI</a></li>
    <li class="sublast"><a href="http://test.lawsart.com/Home.html" target="_top">Horses VII</a></li>
  </ul>
</li>

target="_top"属性是问题。看起来那段代码正在插入到实时 HTML 中。

一次可能的解决方案：替换#为javascript: void(0). 这可以防止链接处于活动状态，并且即使使用target="_top".

css - 如何让父母无法点击和无法点击

1 回答 1

Related

Reference