I have navigation menu that contains links, what I want to achieve is to make the whole li element clickable as a link. so how to achieve that please? I'm using bootstrap 3.2 library. below is the HTML and CSS code. User wants to able to click on the Link from anywhere inside the li html element
.navbar {
position: relative;
min-height: 40px !important;
margin-bottom: 20px;
border: none !important;
}
#navbarSupportedContent .nav-item {
text-transform: uppercase;
text-align: center;
font-weight: 800;
border-right: 1px solid #01154D;
padding: 10px 24px;
}
#navbarSupportedContent .nav-item:hover {
background-color: #DBDDFD;
color: #000 !important;
}<div role="navigation">
<div class="container">
<div id="undefined-sticky-wrapper" class="sticky-wrapper" style="height: 42px;"><nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto" style="float:inherit;">
<li class="nav-item active">
<a class="nav-link" href="/webcenter/portal/dummy/pages_en">
<span id="submenu1">Home</span>
</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_employeetools">
<span id="submenu1">Employee Tools</span>
</a>
</li>
<li class="nav-item ">
<div class="dropdown show">
<a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
<div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/photogallery">PHOTO GALLERY</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/news1">NEWS</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/newpage">dummy MAGAZINE</a>
<a class="dropdown-item" href="/webcenter/portal/dummy/pages_mediacenter/ashurtiassagheer">dummy</a>
</div>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="/webcenter/portal/dummy/pages_documents">
<span id="submenu1">Documents</span>
</a>
</li>
<li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
<i aria-hidden="true" class="fa fa-language"></i></a>
</li>
<li class="nav-item" style="margin-left: auto;"><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-link glyphicon glyphicon-log-out xf0 p_AFTextOnly" style="" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
</li>
</ul><span id="T:search2" class="x1a">
<div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
</div></span>
</div>
</nav></div>
</div>
</div>
