How to make the A click active for all LI

Asked

Viewed 212 times

3

I have a li with a inside, and would like to activate the click of a for the whole of li. I mean, when I click the corner of li it enters the link anyway, I want to do this without Jquery.

My structure:

.topo {
    width: 570px;
    margin-left: 95px;
    margin-top: 45px;
    float: left;
}
.topo > li {
    float: left;
    margin-left: 25px;
    position: relative;
}
.topo li span {
    font-family:'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #254261;
    cursor: pointer;
    padding-bottom: 8px;
}
.topo li:first-child {
    margin-left: 0px;
}
.topoBusca {
    background: url("../imagens/buscaTopo.png") no-repeat center;
    width: 41px;
    height: 42px;
    float: left;
}
.flechaSubmenu {
    background: url("../imagens/flechaSubmenu.png") no-repeat center;
    width: 8px;
    height: 5px;
    display: none;
    padding-top: 8px;
}
.topo li:hover .flechaSubmenu, .topo li:hover .subMenu {
    display: block;
    width: auto;
}
.subMenu {
    width: 200px;
    position: absolute;
    display: none;
    padding-top: 21px;
}
.subMenu li {
    width: 200px;
    height: 42px;
    padding-left: 25px;
    box-sizing: border-box;
    border-bottom: 1px solid #dddedf;
    background-color: #ffffff;
    font-family:"Titillium Web", sans-serif;
    font-size: 16px;
    line-height: 42px;
    color: #7E7E7E;
    font-style: normal;
    cursor: pointer;
}
.subMenu li:hover {
    color: #254261;
    box-sizing: border-box;
    border-bottom: 3px solid #f7bb57;
}
<ul class="topo">
    <li>	<span>Home</span>

        <div class="flechaSubmenu"></div>
        <ul class="subMenu">
            <li>	<a href="/analise-de-riscos">Análise de Risco</a>

            </li>
        </ul>
    </li>
</ul>

css

2 answers

5


Removes the width and the padding-left of .subMenu li and passes these properties to the link, also adding a display: block:

.subMenu li a {
    display: block;
    width: 200px;
    padding-left: 25px;
}

Thus remaining:

.topo {
    width: 570px;
    margin-left: 95px;
    margin-top: 45px;
    float: left;
}
.topo > li {
    float: left;
    margin-left: 25px;
    position: relative;
}
.topo li span {
    font-family:'Titillium Web', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #254261;
    cursor: pointer;
    padding-bottom: 8px;
}
.topo li:first-child {
    margin-left: 0px;
}
.topoBusca {
    background: url("../imagens/buscaTopo.png") no-repeat center;
    width: 41px;
    height: 42px;
    float: left;
}
.flechaSubmenu {
    background: url("../imagens/flechaSubmenu.png") no-repeat center;
    width: 8px;
    height: 5px;
    display: none;
    padding-top: 8px;
}
.topo li:hover .flechaSubmenu, .topo li:hover .subMenu {
    display: block;
    width: auto;
}
.subMenu {
    width: 200px;
    position: absolute;
    display: none;
    padding-top: 21px;
}
.subMenu li {
    height: 42px;
    box-sizing: border-box;
    border-bottom: 1px solid #dddedf;
    background-color: #ffffff;
    font-family:"Titillium Web", sans-serif;
    font-size: 16px;
    line-height: 42px;
    color: #7E7E7E;
    font-style: normal;
    cursor: pointer;
}
.subMenu li a {
    display: block;
    width: 200px;
    padding-left: 25px;
}
.subMenu li:hover {
    color: #254261;
    box-sizing: border-box;
    border-bottom: 3px solid #f7bb57;
}
<ul class="topo">
    <li>	<span>Home</span>

        <div class="flechaSubmenu"></div>
        <ul class="subMenu">
            <li>	<a href="/analise-de-riscos">Análise de Risco</a>

            </li>
        </ul>
    </li>
</ul>

2

I would recommend using the display: inline-block on the tag a This makes it fill the whole li, so whatever you click in li will open the link (tag a)

ex:

ul{
  padding: 0px;
  list-style:none;
}

ul li a{
  background: #DDD;
  display: inline-block;
  padding: 3px 10px;
}

ul li a:hover{
  background: #464646;
  color: white;
}

.menu-2 li{
  display: inline-block;
}
<h2> Menu 1</h2>
<ul class="menu-1">
  <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>
<h2> Menu 2</h2>

<ul class="menu-2">
  <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>

But remember, put the padding, margin or width and height if using, inside the tag a because she’s the one who has to fill out the tag li with in the example.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.