The url is not working - html

Question

The link of this url is not working , I am using bootstrap for dropdown.
<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

I think you looking for these.
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>home <i class="fa fa-caret-down"></i>
<ul>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
<li>home version 1</li>
</ul>
</li>
<li>mega menu <i class="fa fa-caret-down"></i>
<div class="mega-menu">
<span>
<a class="mega-title" href="#">Mega title</a>
Mega item 1
Mega item 2
Mega item 3
Mega item 4
Mega item 5
</span>
<span>
<a class="mega-title" href="#">Mega title</a>
Mega item 1
Mega item 2
Mega item 3
Mega item 4
Mega item 5
</span>
<span>
<a class="mega-title" href="#">Mega title</a>
Mega item 1
Mega item 2
Mega item 3
Mega item 4
Mega item 5
</span>
</div>
</li>
<li>work <i class="fa fa-caret-down"></i></li>
<li>shop <i class="fa fa-caret-down"></i></li>
<li>blog <i class="fa fa-caret-down"></i>
<ul>
<li>blog page 1</li>
<li>blog page 1</li>
<li>blog page 1</li>
<li>blog page 1</li>
<li>blog page 1</li>
</ul>
</li>
<li>contact <i class="fa fa-caret-down"></i></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>