how to make horizontal navigation bar with buttons - html

Question

Have to convert this horizontal navigation bar with button in place of anchor tags and let it behave and look the same way
https://codepen.io/shaswat/pen/GOrpKX
ever anchor tag should be removed and should be replaced with a button like <input type=button >
so it can look like a navigation bar
/* Menu CSS */
#cssmenu,
#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: blue;
margin: 0;
padding: 0;
position: relative;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Answer 1

Its just a matter of css if i understood what you wanted to do right:
https://codepen.io/anon/pen/JOENRY
/* Menu CSS */#cssmenu,
#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: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu button {
background-color: transparent;
border: 0px;
}
#cssmenu > ul > li > button {
padding: 15px 25px;
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 > button {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li.active > button,
#cssmenu > ul > li > button.active {
background: black;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
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: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li button {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu > ul ul li button:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li button:active {
background: green;
}
#cssmenu li button:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40% ;
right:5px;
}
#cssmenu li:hover > button:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top:-6px
}
<div id='cssmenu'>
<ul>
<li ><button href='#'>Home</button>
<ul>
<li><button href='#'>Product 1</button></li>
<li><button href='#'>Product 2</button></li>
<li><button href='#'>Product 3</button></li>
</ul>
</li>
<li><button class='active' href='#'>Products</button>
</li>
<li><button href='#'>About</button>
</li>
<li><button href='#'>Contact</button></li>
</ul>
</div>

Answer 2

try this code
/* Menu CSS */
#cssmenu,
#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: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 10px;
margin: 0;
padding: 0;
z-index: -1;
//box-shadow: 5px 5px 5px #808080;
display: block;
}
#cssmenu>ul li {
display: inline;
}
#cssmenu>ul li input {
text-decoration: none;
padding: 7px;
background-color: red;
border: none;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 32px;
left: 0;
display: block !important;
}
#cssmenu>ul ul li input {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
}
<div id='cssmenu'>
<ul>
<li><input type="button" value="Home">
<ul>
<li><input type="button" value="Product 1"></li>
<li><input type="button" value="Product 2"></li>
<li><input type="button" value="Product 3"></li>
</ul>
</li>
<li><input type="button" value="Products">
</li>
<li><input type="button" value="About">
</li>
<li><input type="button" value="Contact"></li>
</ul>
</div>

Answer 3

I just replaced a with button in html and css and added a button css tag (dont use it like this use a class instead this is for presentation purpose only). I gave bg color of blue to buttons and removed thier white border . Instead of href use onclick event and append them addEventlistner to tinker with them. Thought i wont recommend using buttons here but here you go.
/* Menu CSS */
#cssmenu,
#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: blue;
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>a {
padding: 15px 25px;
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>a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
background: black;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
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: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu>ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu>ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li a:active {
background: green;
}
#cssmenu li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40%;
right: 5px;
}
#cssmenu li:hover>a:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top: -6px
}
<div id='cssmenu'>
<ul>
<li><button>Home</button>
<ul>
<li><button>Product 1</button></li>
<li><button>Product 2</button></li>
<li><button>Product 3</button></li>
</ul>
</li>
<li><button class='active'>Products</button>
</li>
<li><button>About</button>
</li>
<li><button>Contact</button></li>
</ul>
</div>