CODEWITHSUNDEEP
htmlcss
THEBROTAKU
THEBROTAKU

Reputation: 1

How to make my unordered list in html clickable all over

Hello I was just wondering how to make the unordered list I have in my html clickable in the box and not just on the text. It is currently only redirecting if you click directly on the text. here is my html

    <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="page 1.html" class="button">page 1</a></li>
        <li><a href="page 2.html" class="button">page 2</a></li>
        <li><a href="page 3.html" class="button">page 3</a></li>
        <li><a href="page 4.html" class="button">page 4</a></li>
    </ul>

and here is my CSS

.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #f0f;
color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
}
.menu li:hover {
background-color: #0099cc;
}
.button {
text-decoration: none;
color:white;
}

Thanks in advance.

Upvotes: 0

Views: 832

Answers (2)

frnt
frnt

Reputation: 8795

Try as below, change display of a tag to display:inline-block and assign it a width of 100% thus this works, as you can't change your html format so this works.

.menu li > a{
  width:100%;
  display:inline-block;
}


.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color: #f0f;
color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition-property: background-color;
transition-duration: 0.2s;
transition-timing-function: linear;
transition-delay: 0s;
}
.menu li:hover {
background-color: #0099cc;
}
.menu li > a{
  width:100%;
  display:inline-block;
}
.button {
text-decoration: none;
color:white;
}
<div class="menu">
<ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="page 1.html" class="button">page 1</a></li>
        <li><a href="page 2.html" class="button">page 2</a></li>
        <li><a href="page 3.html" class="button">page 3</a></li>
        <li><a href="page 4.html" class="button">page 4</a></li>
    </ul>
    </div>

Upvotes: 0

user7784189
user7784189

Reputation:

Add display: block; to your button element: 

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #f0f;
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition-property: background-color;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
}
.menu li:hover {
  
}
.button {
  text-decoration: none;
  color:red;
  display: block;
}
<html>
<body class="Site" cz-shortcut-listen="true">

 <div class="container">
 <div id="main">
      
    <ul>
        <li><a href="index.html" class="button">Home</a></li>
        <li><a href="page 1.html" class="button">page 1</a></li>
        <li><a href="page 2.html" class="button">page 2</a></li>
        <li><a href="page 3.html" class="button">page 3</a></li>
        <li><a href="page 4.html" class="button">page 4</a></li>
    </ul>
    
</body>
</html>

Upvotes: 2

Related Questions