How to make A click active for the whole LI

Question

How to make A click active for the whole LI

Navigation

#1 by (5 votes)
#2 by (2 votes)

3

I have a li with a inside, and would like to enable the click of a for all li . That is, when I click on 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

asked by anonymous 17.12.2014 / 13:22

2 answers

2

I would recommend using display: inline-block in the a tag so that it fills all li , so everything you click inside 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 it will use, inside the a tag, since it has to fill in the li .

17.12.2014 / 13:41

How to open an activity from a java notification in android? Change value of a vector in a function

score 5 · Accepted Answer

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

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

Looking like this:

.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>