Currently, all buttons have a hovering effect, but I only want one button to behave this way. I need two buttons to immediately redirect to another page upon clicking, without any hover effect. The CSS styling code has been provided below:
#wrapper {
width:173px;
margin: 0 3px 0 0;
display: inline-block;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
/* CSS code continues here */
The HTML code snippet is as follows:
<div id="wrapper">
<ul class="menu">
<li class="item1"><a href="?page=overview">{$lm_overview} </a>
</li>
<ul>
<li class="item2"><a href="?page=chat">{$lm_chat} <span>{$chatusers}</span></a>
</li>
</ul>
<li class="item3"><a href="#">{$lm_research} </a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens </a></li>
<li class="subitem2"><a href="#">Strange "Stuff" </a></li>
<li class="subitem3"><a href="#">Automatic Fails </a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
/* JavaScript code for functionality */
</script>
For a visual representation, you can view the image here.
The "Overview" and "Chat" buttons should not have a hover effect and should immediately redirect you to another page upon clicking. The rest of the buttons should retain their hover functionality. The issue here is that even when clicking on the "Overview" button, it still triggers the hover effect instead of redirecting.