我有一个奇怪的问题，当我点击special-treatment.html链接时，该链接无效？有些人可以帮助我。
我的HTML代码在这里
<div id="navbar-collapse-1" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="special-treatment.html" data-toggle="dropdown" class="dropdown-toggle">Special Treatments </a>
<ul class="dropdown-menu" role="menu">
<li><a href="psoriasis-treatment.html">Psoriasis Treatment</a></li>
<li><a href="arthritis-treatment.html">Arthritis Treatment</a></li>
<li><a href="paralysis-treatment.html">Paralysis Treatment</a></li>
<li><a href="asthma-treatment.html">Asthma Treatment</a></li>
<li><a href="diabetes-treatment.html">Diabetes Treatment</a></li>
<li><a href="hypertension-treatment.html">Hypertension Treatment</a></li>
<li><a href="facial-paralysis-treatment.html">Facial Paralysis Treatment</a></li>
<li><a href="cervical-spondylosis-treatment.html">Cervical Spondylosis Treatment</a></li>
<li><a href="schelerosis-treatment.html">Multiple Schelerosis Treatment</a></li>
</ul><!-- end dropdown-menu -->
</li><!-- end standard drop down -->
<li class="dropdown"><a href="knowledge-base.html" data-toggle="dropdown" class="dropdown-toggle">Knowledge Base </a>
<ul class="dropdown-menu" role="menu">
<li><a href="panchakarma.html">Panchakarma</a></li>
<li><a href="women-health.html">Women Health</a></li>
<li><a href="herbs.html">Medicinal Herbs</a></li>
<li><a href="yoga.html">Yoga</a></li>
<li><a href="music-therapy.html">Music Therapy</a></li>
<!--<li><a href="#.html">Appointment Form</a></li>-->
<li><a href="principles-of-ayurveda.html">Principles of Ayurveda</a></li>
</ul><!-- end drop down menu -->
</li><!-- end drop down -->
</ul><!-- end navbar-nav -->
</div><!-- #navbar-collapse-1 -->
答案 0 :(得分：1)
我能看到你做这项工作的唯一方法就是这样：
您无法将特殊处理按钮同时作为下拉列表的链接和按钮，因此请添加下拉箭头，然后将特殊处理作为链接。
http://jsfiddle.net/Lctfn3j2/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div>
<ul>
<li class="dropdown"><a href="special-treatment.html">Special Treatments</a><a href="" data-toggle="dropdown" class="dropdown-toggle"><img src="http://cdns2.freepik.com/free-photo/down-arrow-in-small-circle_318-25293.jpg" width="30" /></a>
<ul class="dropdown-menu" role="menu">
<li><a href="psoriasis-treatment.html">Psoriasis Treatment</a>
</li>
<li><a href="arthritis-treatment.html">Arthritis Treatment</a>
</li>
<li><a href="paralysis-treatment.html">Paralysis Treatment</a>
</li>
<li><a href="asthma-treatment.html">Asthma Treatment</a>
</li>
<li><a href="diabetes-treatment.html">Diabetes Treatment</a>
</li>
<li><a href="hypertension-treatment.html">Hypertension Treatment</a>
</li>
<li><a href="facial-paralysis-treatment.html">Facial Paralysis Treatment</a>
</li>
<li><a href="cervical-spondylosis-treatment.html">Cervical Spondylosis Treatment</a>
</li>
<li><a href="schelerosis-treatment.html">Multiple Schelerosis Treatment</a>
</li>
</ul>
<!-- end dropdown-menu -->
</li>
<!-- end standard drop down -->
<li class="dropdown"><a href="knowledge-base.html">Knowledge Base</a><a href="" data-toggle="dropdown" class="dropdown-toggle"><img src="http://cdns2.freepik.com/free-photo/down-arrow-in-small-circle_318-25293.jpg" width="30" /></a>
<ul class="dropdown-menu" role="menu">
<li><a href="panchakarma.html">Panchakarma</a>
</li>
<li><a href="women-health.html">Women Health</a>
</li>
<li><a href="herbs.html">Medicinal Herbs</a>
</li>
<li><a href="yoga.html">Yoga</a>
</li>
<li><a href="music-therapy.html">Music Therapy</a>
</li>
<!--<li><a href="#.html">Appointment Form</a></li>-->
<li><a href="principles-of-ayurveda.html">Principles of Ayurveda</a>
</li>
</ul>
<!-- end drop down menu -->
</li>
<!-- end drop down -->
</ul>
<!-- end navbar-nav -->
</div>
<!-- #navbar-collapse-1 -->
答案 1 :(得分：0)
如果你想让它作为悬停下拉导航使用类似这样的东西（这个例子使用bootstrap，但有更简单的那些是纯css）：
（这些示例将在单击时打开页面，但可能不会在CodePen中执行此操作）
http://codepen.io/unavezfui/pen/okzJi
更简单的纯CSS版本示例：http://codepen.io/andornagy/pen/xhiJH
/*
No use bootstrap js library
*/
$(document).ready(function() {
$('.nav .dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
});.dropdown-menu{
margin: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http:////netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
<li class="dropdown">
<a id="drop1" role="button" href="http://www.google.com">Dropdown 1</a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" role="button" href="http://www.google.com">Dropdown 2</a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop3" role="button" href="http://www.google.com">Dropdown 3</a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">Separated link</a></li>
</ul>
</li>
</ul>