How to add link without interfering with the css - html

Question

I cant put link on my buttons without it interfering with my css? How do I stop this. Every time I add the link tag it turns back into the normal button. I tried Everything to changing the css to changing the html.
#cssmenu input {
padding: 0;
border-right: 1px solid;
border-top: none;
border-bottom: none;
border-left: none;
background: none;
border-radius : 0px 5px 0px 0px;
}
#cssmenu > ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: #00bfff;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > input {
padding: 12px 30px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > input {
background:violet;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
}
#cssmenu > ul > li.active > input,
#cssmenu > ul > li > input.active {
background: black;
color:#fff;
}
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #fff;
z-index: 2;
top: 40px;
left: 0;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li input {
padding: 12px ;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
#cssmenu > ul ul li input[type=submit]:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li input[type=submit]:active {
background: green;
}
.downArrow {
display: block;
position: absolute;
top: 12px;
right: 2px;
color:white;
}
.upArrow {
display: none;
position: absolute;
top: 12px;
right: 2px;
color:white;
}
#cssmenu li:first-child:hover .upArrow{
display: block;
}
#cssmenu li:first-child:hover .downArrow{
display: none;
}
<div id='cssmenu'>
<ul>
<li ><input type="submit" value="Destinations" />
<div class="downArrow"> ▼ </div>
<div class="upArrow"> ▲ </div>
<ul>
<li><input type="submit" value="Passi-Church" /></li>
<li><input type="submit" value="Cabuttan-Church" /></li>
<li><input type="submit" value="San-Jose-Church" /></li>
<li><input type="submit" value="Molo-Church" /></li>
<li><input type="submit" value="Miago-Church" /></li>
</ul>
</li>
<li><input type="submit" value="Delicacy" /> </li>
<li><input type="submit" value="History" /></li>
<li><input type="submit" value="About" /></li>
</ul>
</div>
Can You help me add link.

Answer 1

Buttons are used when you want to execute a function or something similar. Whenever linking anything, always use the <a> tag and you can style that to look like your buttons.
The reason your CSS was breaking when you were adding links is because they changed the hierarchy.
Here is your adjusted code:
#cssmenu .item {
padding: 0;
border-right: 1px solid;
border-top: none;
border-bottom: none;
border-left: none;
background: none;
border-radius: 0px 5px 0px 0px;
}
#cssmenu>ul {
background: black;
padding-bottom: 3px;
border-radius: 5px 5px 5px 5px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: #00bfff;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu>ul>li {
float: left;
position: relative;
}
#cssmenu>ul>li>.item {
padding: 12px 30px;
display: block;
color: white;
font-size: 15px;
text-decoration: none;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu>ul>li:hover>.item {
background: violet;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
transition: all 0.40s ease-in-out;
}
#cssmenu>ul>li.active>.item,
#cssmenu>ul>li>.item.active {
background: black;
color: #fff;
}
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 40px;
width: 150px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
box-shadow: 5px 5px 5px #808080;
text-align: center;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #fff;
z-index: 2;
top: 40px;
left: 0;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li .item {
padding: 12px;
display: block;
color: white;
font-size: 16px;
text-decoration: none;
border-left: 4px solid transparent;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
}
#cssmenu>ul ul li .item:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li .item:active {
background: green;
}
.downArrow {
display: block;
position: absolute;
top: 12px;
right: 2px;
color: white;
}
.upArrow {
display: none;
position: absolute;
top: 12px;
right: 2px;
color: white;
}
#cssmenu li:first-child:hover .upArrow {
display: block;
}
#cssmenu li:first-child:hover .downArrow {
display: none;
}
#csmenu ul li {
border-right: 1px solid #fff;
}
a:link {
color: #fff;
text-decoration: none;
}
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active {
color: #fff;
text-decoration: none;
}
<div id='cssmenu'>
<ul>
<li>Destinations
<div class="downArrow"> ▼ </div>
<div class="upArrow"> ▲ </div>
<ul>
<li>Passi-Church</li>
<li>Cabuttan-Church</li>
<li>San-Jose-Church</li>
<li>Molo-Church</li>
<li>Miago-Church</li>
</ul>
</li>
<li>Delicacy </li>
<li>History</li>
<li>About</li>
</ul>
</div>
Good luck! :)