Пожалуйста, помогите исправить этот код. когда я перемещаю курсор в родительское меню, весь фон меню прокручивается вниз, но показывает 1 часть, которую я хочу. Я хочу видеть только раскрывающееся меню, в котором я перемещаю курсор, и вся строка меню не должна прокручиваться. Я хочу видеть о / CC / подменю команды только ту часть, когда наведу на них курсор.
Вот HTML код: -
<html>
<body>
<div class="menu-bar">
<div class="navigate">
<ul class="d-flex flex-column flex-lg-row justify-content-lg-end align-content-center">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul class="dd-menu">
<li><a href="#">link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</li>
<li><a href="#" >CC</a>
<ul class="dd-menu">
<li><a href="">Link 5</a></li>
<li><a href="">Link 6</a></li>
<li><a href="">Link 7</a></li>
</ul>
</li>
<li><a href="#">Team</a>
<ul class="dd-menu">
<li><a href="#">Link 8</a></li>
<li><a href="">Link 9</a></li>
<li><a href="">Link 10</a></li>
</ul>
</li>
<li><a href="#"> Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
Вот CSS код: -
.menu-bar{
background-color:#0000FF;
width:100%;
}
.navigate{
display:flex;
flex-wrap:wrap;
justify-content:end;
align-items:center;
}
.navigate ul{
position: relative;
top:auto;
z-index:1;
max-width:100%;
height: auto;
padding: 10px 15px;
margin: 0;
list-style: none;
transition: all 0.5s;
}
.navigate ul li {
margin: 0 26px;
}
.navigate ul li a {
display: block;
padding: 10px;
font-size: 18px;
font-weight: 600;
line-height: 1;
color: #fff;
text-decoration: none;
transition: all .5s;
}
.navigate ul li a:hover
{
background-color:#CC0000;
}
.navigate ul li:hover .dd-menu{
border:0;
display:block;
padding:1px;
background-color:#2c97e4;
}
.navigate ul li:hover .dd-menu ul{
display:block;
}
.navigate ul li:hover .dd-menu ul li{
display:block;
position:absolute;
width:150px;
padding:10px;
border-down:1px dotted #FFFFFF;
text-align:left;
border-radius:0;
}
.navigate ul li:hover .dd-menu ul li a:hover
{
background-color:#CC0000;
}
