18008 sujets

Questions générales et questions de débutants

Liens cliquables sur toute la surface d'une li avec flex

Bonjour,

J'essaie de faire un menu avec flex mais je n'arrive pas à rendre la totalité de la surface de mes li cliquables voici mon html:

<ul class="menu">
            <li class="item-menu"><a href="#">Test 1</a></li>
            <li class="item-menu"><a href="#">Test 2</a></li>
            <li class="item-menu"><a href="#">Test 3</a></li>
            <li class="item-menu"><a href="#">Test 4</a></li>
            <li class="item-menu"><a href="#">Test 5</a></li>
        </ul>

et mon css:

.menu{
    display: flex;
    justify-content: space-around;
    background: #ddd;
}
.menu li{
    padding: 10px 30px 10px 30px;
    border-right:1px solid #acacac;
}
.menu li:hover{
    background: #acacac;
    cursor: pointer;
}
.menu li:first-child{
    border-left:1px solid #acacac;
}
.item-menu{
    flex: 1 0 0;/*Les li prennent toute la largeur*/
    text-align: center;
}
.item-menu>a{
    padding: 10px 30px 10px 30px;
    color:red;
}
.item-menu>a:hover{
    color:#fff;
}

Je vous remercie de votre aide.
Modérateur
Salut,

Et si t'essayais de passer tes liens en display: block, d'enlever tes padding à tes éléments de liste et peut-être doubler les padding de tes liens ?!
Bonjour barale61,
en .js existent onmouseenter puis onmouseleave qui considèrent la surface entière d'un id à sélectionner et qui englobent d'impertinents interlignes ; c'est peu connu mais bonace !

Ensuite à toi d'y affecter la bonne function que tu vas créer, telle que des id dans le .html soient envisagés.

Ce n'est évidemment qu'une proposition de solution, or elle va fonctionner.

Mais peut-être qu'en .css le hover pourrait s'exprimer sur li, non sur des déclinaisons sophistiquées ...
Modifié par pictural (23 Sep 2016 - 18:51)
Sujet clos
Aller à