2013-03-06 62 views
1

我是一个总新手在这个,所以我希望我可以让自己清楚我在http://test.lawsart.com/css3menu_2.html上遇到的问题。 css3menu的人没有阅读我的问题。问题在于,当您翻转顶层菜单项“Portfolios”或三个子菜单中的一个,然后单击仅用菜单发送到浏览器页面时。在该页面上,投资组合和三个子菜单标题是不可点击的,这应该是如何。你会在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;} 

回答

1

您发布的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"也应该可以正常工作。

+0

谢谢jeradg。这是完美的。 – user1887686 2013-03-06 15:48:04

+0

太棒了!你能接受这个答案,因为它对你有用吗? – jeradg 2013-03-06 16:15:09