I am currently working on a page and have encountered an issue. The problem lies in the fact that users must click on a link before they are redirected to the target page. Is there a way to make the highlighted box for each of those links active so it responds to a click as well?
My users have been giving feedback that clicking in the box does not work unless they click on the actual link.
Any assistance on this matter would be greatly appreciated.
<html>
<head>
</head>
<style type="text/css">
li {
background-color: #F5F2EE;
background-position: left top;
background-repeat: no-repeat;
border: 1px solid #E9E3DD;
height: auto;
width: 100px;
margin-bottom: 4px;
padding: 4px 5px 4px 20px;
}
li a, span {
color: #4B0F19;
text-decoration: none;
}
li:hover {
background-color: #DEB887;
cursor: pointer;
}
</style>
<body>
Hello world
<ul>
<li><a href="http://google.com">Please see this</a></li>
<li><a href="http://msn.com">Another link</a></li>
<li><a href="http://twitter.com">The main link</a></li>
<li><a href="http://bbc.co.uk">fourth link</a></li>
</ul>
</body>
</html>