.navbar
{
list-style-type: none;
line-height: 3em;
padding: 5px;
}
.navbar li
{
position: relative;
padding-right: 200px;
top: -5px;
display: inline;
cursor: pointer;
}
.navbar li:nth-child(2) a:hover + .connection-navbar li:first-child
{
display: block;
left: 214px;
}
.navbar li:nth-child(2) :hover + .connection-navbar li:nth-child(2)
{
display: block;
left: 214px;
}
.connection-navbar
{
list-style-type: none;
}
.connection-navbar li
{
position: relative;
line-height: 4em;
display: none;
}<ul class="navbar">
<li>
<a href="">Accueil</a>
</li>
<li>
<a href="">Se connecter</a>
<ul class="connection-navbar">
<li>
<a href="">Se connecter via e-mail</a>
</li>
<li>
<a href="">Se connecter via nom d'utilisateur</a>
</li>
</li>
</ul>
</ul>I’d like to define a box in which my :hover effect can remain active, because my problem is as follows: when I hover over my “log in” field I can actually see my other two elements displayed unfortunately I don’t know how to keep it active as long as the user is in a certain predefined area, I started css very recently and it’s for a python project (I work with the flask framework) I tried putting a margin to my “log in” field unfortunately the links shook and were displayed then removed, if anyone has an idea it would help me a lot.
I tried with a margin on my “connect” field, thinking it would make the “box” that would keep the effect active. Unfortunately, the margin collided with my other two fields.
Melchior Dengis is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2