I simply need each entire button to be clickable as opposed to just the text when you hover over it. It was working before but I messes with some stuff and now its back to only reading the text as the <a href.
there's what I got.(p.s. i'm still new to this kind of teaching myself as I go along)
<!DOCTYPE html>
<html>
<head>
<style>
#menubar {
width: 200px;
height: 50px;
background: black;
text-decoration: none;
transition: all .25s;
-webkit-transition: all .25s;
background: linear-gradient(silver, black);
background: -webkit-linear-gradient(silver,black);
}
#menubar:hover {
width: 225px;
background: linear-gradient(lightskyblue, blue);
background: -webkit-linear-gradient(lightskyblue,blue);
}
/* Code to make whole menu bar div clickable */
.default-link{
position:absolute;
width:200px;
height:50px;
}
#menubar ul {
list-style-type: none;
padding: 10px;
margin: 0 50px;
}
#menubar ul li a {
color: white;
font-size:25px;
text-decoration:none;
position:inherit;
}
.auto-style1 {
margin-left: 0px;
}
</style>
</head>
<body>
<!--Left Side Menu Bar Code-->
<div id="menubar">
<ul>
<li class="auto-style1" style="width: 137px">
<a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 16px; width: 200px; height: 50px">
Menu 1</a>
</li>
</ul>
</div>
<div id="menubar">
<ul>
<li>
<a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 66px; width: 200px; height: 50px">
Menu 2</a>
</li>
</ul>
</div>
<div id="menubar">
<ul>
<li>
<a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 116px; width: 200px; height: 50px">
Menu 3</a>
</li>
</ul>
</div>
<div id="menubar">
<ul>
<li>
<a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 166px; width: 200px; height: 50px">
Menu 4</a>
</li>
</ul>
</div>
<div id="menubar">
<ul>
<li>
<a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 216px; width: 200px; height: 50px">
Menu 5</a>
</li>
</ul>
</div>
<div id="menubar">
<ul>
<li>
<a class='default-link' href='javascript:void(0)' onclick='window.location = "#"' style="left: 11px; top: 266px; width: 200px; height: 50px">
Menu 6</a>
</li>
</ul>
</div>
</body>
</html>
code you have shared need lots of cleanup .. Id is unique identifier you can not use it repeatedly. Moreover you can optimize your code there are many unwanted
divandultags.Please check this JSFiddle.
Hope it will help you.