I'm new to html and css but I'm struggling... (I'm sorry for my english btw)
I have many problems :
- When I pass my cursor on the sub menu, it activates the hover
- The end of the transition effect is not right because of the padding but I cannot change the design, I don't know what to do
- The underline effect's width cover the entire li while I only want it under the link
- The underline only appears when the cursor is on the link and not on the li
CSS AND HTML
#menu ul {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-evenly;
list-style: none;
position: fixed;
background-color: transparent;
z-index: 90;
font-size: 15px;
letter-spacing: 0.26em;
line-height: 69.6px;
margin-top: 0;
}
#menu ul li {
display: inline-block;
vertical-align: top;
text-align: center;
background-color: white;
}
#menu .logo_area{
background-color: transparent;
}
#menu .logo_area img {
vertical-align: middle;
}
#menu li .sous {
display: block;
position: relative;
height: 0px;
padding: 0px 24px;
opacity: 0;
transition: 0.2s
}
#menu > ul li:hover .sous {
padding: 28px 24px;
height: auto;
opacity: 100;
}
#menu ul li .vide {
width: 122px;
padding: 0px 24px;
}
#menu li:hover > .vide {
padding: 10px 24px;
height: auto;
visibility: inherit;
}
#menu ul li .sous li {
display: block;
text-align: center;
line-height: 30px;
padding: 5px 0px;
transition: padding 3s linear, height .2s linear, opacity .2s linear;
}
#menu ul li .sous #br {
line-height: 20px;
}
a {
text-decoration: none;
}
/* unvisited link */
a:link {
color: #1f2439;
}
/* visited link */
a:visited {
color: #1f2439;
}
/* mouse over link */
a:hover {
color: #1f2439;
}
/* selected link */
a:active {
color: #1f2439;
}
#menu ul li a:after {
content: '';
display: block;
margin: auto;
height: 1px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
#menu ul li a:hover:after {
width: 50%;
background: #1f2439;
}
#menu ul li .sous a:hover:after {
width: 100%;<nav id="menu">
<ul class="roboto" style="width: 85%">
<li>
<a href="">Fruit</a>
<ul class="sous">
<li><a href="#expertises">Apple</a></li>
<li><a href="#valeurs">Banana</a></li>
<li><a href="#metiers">Orange</a></li>
<li><a href="#equipe">Strawberry</a></li>
</ul>
</li>
<li>
<a href="">Vegetable</a>
<ul class="sous">
<li id="br">
<a class="sousli" href="#">Beans</a>
</li>
<li><a class="sousli" href="#">Courgette</a></li>
<li><a href="#">Eggplant</a></li>
</ul>
</li>
<li class="logo_area">
<a href="">
<img
src="/img.png"
alt=""
/>
</a>
</li>
<li>
<a href="">Sport</a>
<ul class="sous">
<li><a href="#">Dance</a></li>
<li><a href="#">Tennis</a></li>
</ul>
</li>
<li>
<a href="">Info</a>
<ul class="sous vide">
<li><a href="#"></a></li>
</ul>
</li>
<li><a href="">Eng</a></li>
</ul>
</nav>
<div class="rectangle" style="height : 250px; width : 100%; background-color : beige; "></div>This isn't the real result because I removed some things but you can see the problems.. (The beige rectangle is only here so we can see the drop down menu)
Please, can someone help me... I'm losing hope :(