该网址无法正常工作

Question

此网址的链接无效，我正在使用bootstrap作为下拉菜单。

<a data-target="#" href="washington-record-sealing/" role="button" class="dropdown-toggle" data-toggle="dropdown"> 
    Record Sealing <i class="fa fa-angle-down"></i> 
</a> 

Answer 1

我想你在寻找这些。

a { 
 
    text-decoration: none; 
 
} 
 

 
a:hover { 
 
    color: #ec4445; 
 
    text-decoration: none; 
 
} 
 

 
a:active, a:hover { 
 
    outline: 0 none; 
 
} 
 

 
ul { 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 

 

 
.main-menu ul li { 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
.main-menu ul li a { 
 
    color: #444; 
 
    display: block; 
 
    font-size: 14px; 
 
    font-weight: 600; 
 
    padding: 15px 20px; 
 
    text-transform: uppercase; 
 
} 
 

 
.main-menu > ul > li:hover > a { 
 
    color: #83cbdc; 
 
} 
 

 
.main-menu ul li::before { 
 
    background: #ddd none repeat scroll 0 0; 
 
    content: ""; 
 
    height: 40px; 
 
    left: 0; 
 
    position: absolute; 
 
    top: 10px; 
 
    width: 1px; 
 
} 
 

 
.main-menu ul li ul { 
 
    background: #393939 none repeat scroll 0 0; 
 
    left: 0; 
 
    position: absolute; 
 
    width: 200px; 
 
    transition: 0.3s; 
 
    opacity: 0; 
 
    top: 160%; 
 
    visibility: hidden; 
 
} 
 

 
.main-menu ul li:hover ul { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 100%; 
 
} 
 

 
.main-menu ul li ul li:before { 
 
    display: none; 
 
} 
 

 
.main-menu ul li ul li { 
 
    float: none; 
 
} 
 

 
.main-menu ul li ul li a { 
 
    color: #9e9e9e; 
 
    font-weight: 400; 
 
    padding: 7px 20px; 
 
    text-transform: capitalize; 
 
    transition: 0.3s; 
 
} 
 

 
.main-menu ul li ul li:hover a { 
 
    color: #5eb4dc; 
 
    font-weight: 500; 
 
    padding-left: 30px; 
 
} 
 

 
.main-menu ul li .mega-menu { 
 
    background: #393939; 
 
    left: 0; 
 
    width: 700px; 
 
    position: absolute; 
 
    top: 160%; 
 
    transition: 0.3s; 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    text-align: left; 
 
} 
 

 
.main-menu ul li:hover .mega-menu { 
 
    opacity: 1; 
 
    visibility: visible; 
 
    top: 100%; 
 
} 
 

 
.main-menu ul li .mega-menu span { 
 
    width: 33.33%; 
 
    float: left; 
 
} 
 

 
.main-menu ul li .mega-menu span a { 
 
    color: #9e9e9e; 
 
    font-weight: normal; 
 
    font-size: 13px; 
 
    margin: 0 25px; 
 
    padding: 8px 0; 
 
    text-transform: capitalize; 
 
    transition: 0.4s; 
 
} 
 

 
.main-menu ul li .mega-menu span a:hover { 
 
    color: #6cc6d6; 
 
    font-weight: 500; 
 
    padding-left: 15px; 
 
} 
 

 
.main-menu ul li .mega-menu span a.mega-title { 
 
    border-bottom: 1px solid #9e9e9e; 
 
    font-weight: 600; 
 
    margin-bottom: 10px; 
 
    margin-top: 15px; 
 
    text-transform: uppercase; 
 
} 
 

 
.main-menu ul li .mega-menu span a.mega-title:hover { 
 
    padding-left: 0; 
 
}

<div class="main-menu-area"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-11"> 
 
       <div class="main-menu"> 
 
        <nav> 
 
         <ul> 
 
          <li><a href="#">home <i class="fa fa-caret-down"></i></a> 
 
           <ul> 
 
            <li><a href="#">home version 1</a></li> 
 
            <li><a href="#">home version 1</a></li> 
 
            <li><a href="#">home version 1</a></li> 
 
            <li><a href="#">home version 1</a></li> 
 
            <li><a href="#">home version 1</a></li> 
 
            <li><a href="#">home version 1</a></li> 
 
           </ul> 
 
          </li> 
 

 
          <li><a href="#">mega menu <i class="fa fa-caret-down"></i></a> 
 
           <div class="mega-menu"> 
 
            <span> 
 
             <a class="mega-title" href="#">Mega title</a> 
 
             <a href="#">Mega item 1</a> 
 
             <a href="#">Mega item 2</a> 
 
             <a href="#">Mega item 3</a> 
 
             <a href="#">Mega item 4</a> 
 
             <a href="#">Mega item 5</a> 
 
            </span> 
 
            <span> 
 
             <a class="mega-title" href="#">Mega title</a> 
 
             <a href="#">Mega item 1</a> 
 
             <a href="#">Mega item 2</a> 
 
             <a href="#">Mega item 3</a> 
 
             <a href="#">Mega item 4</a> 
 
             <a href="#">Mega item 5</a> 
 
            </span> 
 
            <span> 
 
             <a class="mega-title" href="#">Mega title</a> 
 
             <a href="#">Mega item 1</a> 
 
             <a href="#">Mega item 2</a> 
 
             <a href="#">Mega item 3</a> 
 
             <a href="#">Mega item 4</a> 
 
             <a href="#">Mega item 5</a> 
 
            </span> 
 
           </div> 
 
          </li> 
 
          <li><a href="#">work <i class="fa fa-caret-down"></i></a></li> 
 
          <li><a href="#">shop <i class="fa fa-caret-down"></i></a></li> 
 
          <li><a href="#">blog <i class="fa fa-caret-down"></i></a> 
 
           <ul> 
 
            <li><a href="#">blog page 1</a></li> 
 
            <li><a href="#">blog page 1</a></li> 
 
            <li><a href="#">blog page 1</a></li> 
 
            <li><a href="#">blog page 1</a></li> 
 
            <li><a href="#">blog page 1</a></li> 
 
           </ul> 
 
          </li> 
 
          <li><a href="#">contact <i class="fa fa-caret-down"></i></a></li> 
 
         </ul> 
 
        </nav> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

点击该链接时，它显示的下拉菜单，但不能进入link.I