в настоящее время, когда вы наводите курсор на выпадающий список, вы увидите раскрывающиеся ссылки. в выпадающем меню слева от ссылок есть пробел. Я хотел бы, чтобы этот пробел был удален.
это для моей панели навигации, выпадающей только в режиме рабочего стола.
это для моего сайта JGittech.com.
мне нужно, чтобы введите больше
вся помощь будет оценена
/*! CSS Used from: https://jgittech.com/stylesheets/nav.v5.css */
* {
box-sizing: border-box;
font-family: Arial,Helvetica,sans-serif
}
.menu-item-has-children .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li:hover {
background: #006084;
color: #fff
}
.navcontainer {
z-index: 999;
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%
}
.active {
background: #009fd8;
color: #fff
}
.main-navigation {
background: #333
}
.nav-ul,body {
list-style-type: none;
padding: 0;
margin: 0
}
.fixednav,.menu {
display: flex
}
.menu {
flex-direction: column
}
.menu-li {
display: block;
list-style-type: none
}
.menu .nav-ul-li-a {
display: block;
text-align: center;
text-decoration: none;
color: #fff;
padding: 20px 1rem
}
.menu-li .nav-ul-li-a:hover,a:hover {
color: #fff
}
.nav-ul-ul {
display: none
}
.nav-ul .menu-li:hover>ul {
max-width: 100%;
display: block;
color: #fff
}
.fixednav {
flex-direction: row;
z-index: 9999;
width: 100%;
height: 60px
}
.leftnav {
line-height: 20px
}
@media (min-width:800px) {
.menu {
display: flex;
flex-direction: row;
justify-content: flex-start
}
.nav-ul .menu-li:hover>ul {
background: #333
}
.nav-ul .menu-li:hover>.nav-ul-li-a,.sub-menu .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li:hover {
background: #006084;
color: #fff
}
.sub-menu .menu-li {
display: flex;
padding-right: 1em
}
.nav-ul-ul {
position: absolute
}
.nav-ul-ul,input[data-function*=swipe],label[data-function*=swipe] {
display: none
}
}
@media (max-width:799px) {
.nav-ul .menu-li:hover>ul {
background: #263249
}
.nav-ul .menu-li:hover>.nav-ul-li-a {
color: #fff
}
.menu-item-has-children .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li .nav-ul-li-a:hover,.sub-menu .menu-li:hover {
background: #006084;
color: #fff
}
.fixednav,.nav-ul-ul {
display: block
}
label[data-function*=swipe] {
display: block;
position: absolute;
top: 30px;
left: 30px;
z-index: 1;
width: 42px;
height: 42px;
font: 42px fontawesome;
text-align: center;
color: #333;
cursor: pointer;
transform: translate3d(0,0,0);
transition: transform .3s
}
.fixednav {
text-align: left
}
.menu .nav-ul-li-a {
display: block;
text-decoration: none;
padding: 0 20px;
color: #fff;
border: 3px solid #fff;
text-align: center;
font-size: 18px;
font-weight: 900;
padding: 20px 1rem;
margin: 0 20px
}
.nav1contain {
display: flex;
height: 60px
}
input[data-function*=swipe] {
position: absolute;
opacity: 0
}
label[data-function*=swipe]:hover {
color: #263249
}
input[data-function*=swipe]:checked~label[data-function*=swipe] {
transform: translate3d(280px,0,0)
}
label[data-function*=swipe]:checked {
display: block
}
label:nth-child(2) {
display: none
}
input[data-function*=swipe]:checked~label:nth-child(2) {
display: block;
transform: translate3d(280px,0,0)
}
input[data-function*=swipe]:checked~label:nth-child(3) {
display: none
}
input[data-function*=swipe]:checked~.sidebar {
transform: translate3d(0,0,0)
}
input[data-function*=swipe]:checked~.sidebar .menu-li {
width: 100%
}
.sidebar {
transform: translate3d(-280px,0,0);
position: absolute;
width: 280px;
background: #263249;
color: #eee;
left: 0;
transition: all .3s
}
.menu-li {
display: inline-block;
padding: 10px;
list-style: none;
background: #263249;
list-style-type: none
}
.menu-item-has-children:hover {
display: block
}
}
.button {
display: block;
width: calc(100% - 30px);
height: 40px;
margin: 2% 15px;
background-color: #009fd8;
box-shadow: 0 6px 9px rgba(50,50,93,.06),0 2px 5px rgba(0,0,0,.08),inset 0 1px 0 #ffb9f6;
border-radius: 4px;
color: #fff;
font-weight: 600;
cursor: pointer
}
.active2 {
background: #00569b;
color: #fff
}
<div class="nav1contain">
<input data-function="swipe" id="swipe" type="checkbox">
<label data-function="swipe" for="swipe"></label>
<label data-function="swipe" for="swipe"></label>
<div class="navcontainer sidebar">
<nav class="main-navigation fixednav menu">
<ul class="menu nav-ul">
<li class = "menu-li"><a class = " active leftnav nav-ul-li-a" href="../index.html">Home</a></li>
<li class = "menu-li"> <a class = "nav-ul-li-a " href="pages/about.html">About</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/products.html">Products</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/contact.html">Contact</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="https://statuspage.freshping.io/13300-JGittechLLCStatusPage/check/91333">Status</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="../sitemap.html">Sitemap</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/video.html">Videos</a> </li>
<li class="menu-item-has-children menu-li"> <a class ="nav-ul-li-a" href="#">Legal +</a>
<ul class="nav-ul-ul">
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/terms.pdf">Terms of Use</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/privacy.pdf">Privacy Policy</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/disclaimer.pdf">Disclaimer Policy</a> </li>
<li class = "menu-li"><a class = "nav-ul-li-a" href="pages/legal/cookie.html">Cookie Policy</a> </li>
<li class = "menu-li"> <a class = "nav-ul-li-a" href="pages/legal/return.pdf">Return Policy</a> </li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
.