Trying to create a drop down menu with only css and html - html

I am currently learning how to create a drop down menu, but unsure how to use drop down menu. I tried reading the other problems and solutions, but to no avail. Here is my code:
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Programmes</li>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
<li>Staff</li>
<li>Students</li>
<li>Contact</li>
</ul>
</div> <!-- end of nav -->
http://jsfiddle.net/LJ3TG/


try this link.... With Full Explanation..
Click Here
Or just copy paste the following CSS
.nav ul ul {
display: none;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
.nav ul li:hover a {
color: #fff;
}
.nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
.nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
.nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
.nav ul ul ul {
position: absolute; left: 100%; top:0;
}
I HAVE UPDATED YOUR FIDDLE. DID A SMALL CHANGE. FIDDLE


<ul>
<li>Home</li>
<li>About</li>
<li>Programmes</li>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
<li>Staff</li>
<li>Students</li>
<li>Contact</li>
</ul>
CSS
ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li
{
display: block;
position: relative;
float: left;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #617F8A;
}
li:hover ul
{
display: block;
position: absolute;
}
li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #617F8A;
}
li:hover li a:hover
{
background: #95A9B1;
}
Here's a fiddle
For further reference visit this link


This is done by modifying your code:
StyleSheet
.nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
li {
float: left;
a {
display: inline-block;
width: 100px;
height: 30px;
line-height: 30px;
color: #FFF;
background-color: #999999;
text-decoration: none;
padding: 0 15px;
&:hover {
background-color: #CCCCCC;
}
&:active {
background-color: #66CCFF;
}
}
ul {
display: none;
}
&:hover {
ul {
display: list-item;
list-style-type: none;
li {
float: none;
a {
display: block;
}
}
}
}
}
}
HTML
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>
Programmes
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
<li>Item8</li>
</ul>
</li>
<li>Staff</li>
<li>Students</li>
<li>Contact</li>
</ul>
</div>
Here is the Demo


Demo
HTML
<div id="cssmenu">
<ul>
<li class="active"><span>Home</span></li>
<li class="has-sub"><span>Programmes</span>
<ul>
<li class="has-sub"><span>Item 1</span>
<ul>
<li><span>Sub Item 1</span></li>
<li class="last"><span>Sub Item 2</span></li>
</ul>
</li>
<li class="has-sub"><span>Item 2</span>
<ul>
<li><span>Sub Item 1</span></li>
<li class="last"><span>Sub Item 2</span></li>
</ul>
</li>
</ul>
</li>
<li><span>Staff</span></li>
<li><span>Students</span></li>
<li class="last"><span>Contact</span></li>
</ul>
</div>
css
#cssmenu{
width:100%;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
padding: 0;
margin: 0;
line-height: 1;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 500;
font-size: 16px;
color: #ffffff;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: '';
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
#cssmenu ul {
background: #3b5998;
border-radius: 3px;
border: 1px solid #2b4479;
border: 1px solid #2d4373;
-webkit-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
-o-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
-moz-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
-ms-box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
box-shadow: 0 1px 2px rgba(2, 2, 2, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
#cssmenu ul > li {
float: left;
list-style: none;
}
#cssmenu ul > li > a {
display: block;
text-decoration: none;
padding: 15px 44px;
position: relative;
}
#cssmenu ul > li > a:hover {
background: #2d4373;
-webkit-box-shadow: inset 0 0 1px #1e2e4f;
-o-box-shadow: inset 0 0 1px #1e2e4f;
-moz-box-shadow: inset 0 0 1px #1e2e4f;
-ms-box-shadow: inset 0 0 1px #1e2e4f;
box-shadow: inset 0 0 1px #1e2e4f;
-webkit-transition: all ease .3s;
-o-transition: all ease .3s;
-moz-transition: all ease .3s;
-ms-transition: all ease .3s;
transition: all ease .3s;
}
#cssmenu ul > li > a:hover:before {
content: '';
z-index: 2;
position: absolute;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
border-right: 0;
width: 100%;
height: 100%;
top: 0;
left: -1px;
opacity: .2;
}
#cssmenu ul > li > a:hover:after {
content: '';
z-index: 2;
position: absolute;
border: 1px solid white;
border-top: 0;
border-bottom: 0;
border-left: 0;
width: 100%;
height: 100%;
top: 0;
right: -1px;
opacity: .2;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
position: absolute;
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
visibility: visible;
position: absolute;
border-radius: 0 0 3px 3px;
-webkit-box-shadow: none;
-o-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
box-shadow: none;
-webkit-transition: all ease 1s;
-o-transition: all ease 1s;
-moz-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#cssmenu > ul > li > ul {
width: 200px;
position: absolute;
}
#cssmenu > ul > li > ul > li {
float: none;
position: relative;
}
#cssmenu > ul > li > ul > li > ul {
opacity: 0;
visibility: hidden;
position: absolute;
}
#cssmenu > ul > li > ul > li:hover > ul {
opacity: 1;
visibility: visible;
position: absolute;
-webkit-transition: all ease 1s;
-o-transition: all ease 1s;
-moz-transition: all ease 1s;
-ms-transition: all ease 1s;
transition: all ease 1s;
}
#cssmenu > ul > li > ul > li > ul {
left: 200px;
top: 1px;
width: 200px;
}
#cssmenu > ul > li > ul > li > ul > li {
float: none;
}

Related

Adding a dropdown arrow or triangle beside first button

In the below navigation bar
https://codepen.io/shaswat/pen/XzpRXL
how to create a down triangle or down-arrow beside home and when hover on home the triangle or arrow should convert to upside .
cant change any html(input type , value etc) but you can add some element that should not break the navigation bar how its looking now
no bootstrap
HTML
<div id='cssmenu'>
<ul>
<li ><input type=submit value=home>
<ul>
<li><input type=submit value=home1 /></li>
<li><input type=submit value=home2 /></li>
<li><input type=submit value=home3 /></li>
</ul>
</li>
<li><input type=submit value=products class=active />
</li>
<li><input type=submit value=about />
</li>
<li><input type=submit value=Contact /></li>
</ul>
</div>
CSS
#cssmenu > ul ul input{
border-top: 1px solid;
}
#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;
}
/* 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 > input {
padding: 12px 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 > input {
background: red;
-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;
}
/* Childs */
#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:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li input:active {
background: green;
}

use font awesome icons class fa-caret-up and fa-caret-down
and use javascript onmousehover and onmouseout functions to toggle caret up and down.
include font-awesome and jquery libs
<a onmouseover="changecaretup()" onmouseout="changecaretdown()" >home <i id="caret" class="fa fa-caret-down" aria-hidden="true"></i></a>
java script
function changecaretup(){
$("#caret").removeClass("fa-caret-down");
$("#caret").addClass("fa-caret-up");
}
function changecaretdown(){
$("#caret").removeClass("fa-caret-up");
$("#caret").addClass("fa-caret-down");
}

Atlast did it by myself , with HTML unicodes solution
https://codepen.io/shaswat/pen/XzpRXL
usin css only to make it transition between uparrow and downarrow
HTML
<div id='cssmenu'>
<ul>
<li ><input type=submit value='Home'/>
<div class="downArrow"> ▼ </div>
<div class="upArrow"> ▲ </div>
<ul>
<li><input type=submit value=home1 /></li>
<li><input type=submit value=home2 /></li>
<li><input type=submit value=home3 /></li>
</ul>
</li>
<li><input type=submit value=products class=active />
</li>
<li><input type=submit value=about />
</li>
<li><input type=submit value=Contact /></li>
</ul>
</div>
CSS
#cssmenu > ul ul input{
border-top: 1px solid;
}
#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;
}
/* 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 > 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;
}
/* Childs */
#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;
}

how to make horizontal navigation bar with buttons

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>

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>

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>

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>

How to make this box to a triangle in css [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
please check out this code pen link
want to make the square beside home to triangle upside down. when i hover - its working correctly
https://codepen.io/shaswat/pen/gXLBwo
please help me to make that square to triangle .creating a navigation bar
after I hover its working correctly by transforming to upside
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: black;
padding-bottom: 3px;
}
#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-transform: uppercase;
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: grey;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#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 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: -5px;
}
<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>

On the line 119 replace orange with transparent. And add border-top-color: orange;. If you make border-bottom-color instead of border-top-color arrow will be reversed.
border: 8px solid transparent;
border-top-color: orange;

Change the code of #cssmenu li a:first-child:nth-last-child(2):before like this :
#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;
}
the full code :
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
}
#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-transform: uppercase;
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: grey;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#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: -5px;
}
<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>

Instead of having #cssmenu li a:first-child:nth-last-child(2):before have border: 8px solid orange; replace it with border: 8px solid transparent; and border-top-color: orange;. This will give you a down arrow and when you hover it will turn into an up arrow.

As an alternative, you could use a font. Replace the last two rules with this:
#cssmenu>ul>li>a::after {
content: "⏷";
position: absolute;
line-height: .5;
font-size: 24px;
transform: rotate(0deg) translateY(0);
margin-left: 5px;
color:orange;
transition:.5s ease;
}
#cssmenu>ul>li:hover>a::after {
transform:rotate(180deg) translate(5px,-5px);
transform-origin:center;
transition:.5s ease;
}
Demo
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
}
#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-transform: uppercase;
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: grey;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#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>ul>li:first-of-type>a::after {
content: "⏷";
position: absolute;
line-height: .5;
font-size: 24px;
transform: rotate(0deg) translate(-5px,0);
margin-left: 5px;
color:orange;
transition:.5s ease;
}
#cssmenu>ul>li:first-of-type:hover>a::after {
transform:rotate(180deg) translate(5px,-5px);
transform-origin:center;
transition:.5s ease;
}
<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>

just change this styles
#cssmenu li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border-top: 8px solid orange;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: 40% ;
right:5px;
}

Sub Sub Menu Code Broken?

Not sure where I am going wrong. Can't seem to get my Sub Sub Menu to display under the "Supai" tab. Where am I going wrong? I can get the Sub Menu to work, but somehow the Sub Sub will not display. Ugh
Also, I am sure you are tired of these Sub Sub Menu questions. I've dug through them and have even used the exact code used in responses on this website. They work fine.....until I paste them into my blog on blogger. Thinking there may be something working against me within the Blogger code itself. Thoughts?
#cssnav {
float: left;
font: bold 12px Verdana, Helvetica, Sans-serif;
border: 2px solid #74BA94;
border-top: 1px solid #747BBA;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
}
#cssnav ul {
margin:0;
padding:0;
list-style:none;
}
#cssnav ul li {
float:left;
}
#cssnav ul li a {
float: left;
color:#EA1047;
padding: 10px 20px;
text-decoration:none;
background:#3F10EA;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
border-left: 1px solid rgba(255, 255, 255, 0.05);
border-right: 1px solid rgba(0,0,0,0.2);
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
#cssnav ul li a:hover,
#cssnav ul li:hover > a {
color: #252525;
background:#3C4042;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}
#cssnav li ul a:hover,
#cssnav ul li li:hover > a {
color: #2c2c2c;
background: #5C9ACD;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
border-bottom: 1px solid rgba(0,0,0,0.6);
border-top: 1px solid #7BAED9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}
#cssnav li ul {
background:#3C4042;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
-webkit-border-radius: 0 0 10px 10px;
left: -999em;
margin: 35px 0 0;
position: absolute;
width: 160px;
z-index: 9999;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
}
#cssnav li:hover ul {
left: auto;
}
#cssnav li ul a {
background: none;
border: 0 none;
margin-right: 0;
width: 120px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
#cssnav li li ul {
margin: -1px 0 0 160px;
-webkit-border-radius: 0 10px 10px 10px;
-moz-border-radius: 0 10px 10px 10px;
border-radius: 0 10px 10px 10px;
visibility:hidden;
}
#cssnav li li:hover ul {
visibility:visible;
}
#cssnav ul ul li:last-child > a {
-moz-border-radius:0 0 10px 10px;
-webkit-border-radius:0 0 10px 10px;
border-radius:0 0 10px 10px;
}
#cssnav li:hover ul ul {
display:none; // hide the unordered list that is inside the unordered list
}
#cssnav li ul li:hover ul {
display:block; // display the unordered list in the same way as your sub menu
}
#cssnav ul ul ul li:first-child > a {
-moz-border-radius:0 10px 0 0;
-webkit-border-radius:0 10px 0 0;
border-radius:0 10px 0 0;
}
<!doctype html>
<div id="cssnav">
<ul>
<li>Home</li>
<li>About Me</li>
<li>JOC: Book Series</li>
<li>Adventures
<ul>
<li>Supai</li>
<ul>
<li>Supai Walkthrough</li>
<li>The Drive</li>
<li>Hilltop</li>
<li>VillageTrek</li>
<li>Village</li>
<li>Navajo Falls</li>
<li>Havasu Falls</li>
<li>Campground</li>
<li>Mooney Falls</li>
<li>Beaver Trek</li>
<li>Beaver Falls</li>
<li>Colorado River Trek</li>
<li>Colorado River</li>
</ul>
<li>Never Summer Wilderness</li>
<li>Red River Gorge</li>
<li>Yellowstone</li>
<li>Sequoia Nat'l Park</li>
</ul>
<li>Contest</li>
<li>Fire Basics
</li></li></ul>
</div>
</!doctype>

Every submenu ul has to be inside of an li element of the higher level menu, so this code...
<li>Supai</li>
<ul>
<li>Supai Walkthrough</li>
<li>The Drive</li>
[ etc. ]
<li>Colorado River</li>
</ul>
...should be
<li>Supai
<ul>
<li>Supai Walkthrough</li>
<li>The Drive</li>
[ etc. ]
<li>Colorado River</li>
</ul>
</li>
(moved closing li tag)

place your sub submenu (contained in another ul tag) within the list tag and style as follows:
#cssnav ul li:hover #cssnav ul li ul li{
left:100%;
overflow:visible;
top: 0px;
margin: 0px;
left: 100%;
}
#cssnav ul li ul:hover {
visibility:visible;
overflow:visible;
}
click here for demo

$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #3b3f41;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ef547b;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #cccccc;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ef547b;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ef547b;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #99cdf5;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #ef547b;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #cccccc;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #ef547b;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #ef547b;
border-bottom: 2px solid #ef547b;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #ef547b;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #cccccc;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #cccccc;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #2f3234;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ef547b;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #cccccc;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ef547b;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li>About me</li>
<li>JOC: Book Series</li>
<li><i class="fa fa-fw fa-cog"></i> Adventures
<ul>
<li>Supai
<ul>
<li>Supai Walkthrough</li>
<li>The Drive</li>
<li>Hilltop</li>
<li>VillageTrek</li>
<li>Village</li>
<li>Navajo Falls</li>
<li>Havasu Falls</li>
<li>Campground</li>
<li>Mooney Falls</li>
<li>Beaver Trek</li>
<li>Beaver Falls</li>
<li>Colorado River Trek</li>
<li>Colorado River</li>
</ul>
</li>
<li>Never Summer Wilderness</li>
<li>Red River Gorge</li>
<li>Yellowstone</li>
<li>Sequoia Nat'l Park</li>
</ul>
</li>
<li>Contest</li>
<li>Fire Basics</li>
</ul>
</div>
</body>
</html>

Convert a vertical menu to horizontal in CSS

I am using a menu and I am trying to change the way it looks. I want the submenus (ul li) to be horizontal and not vertical. I tried everything on CSS like adding float but nothing worked.
I am using this HTML code :
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li class='has-sub'><a href='#'>Page2</a>
<ul>
<li><a href='#'>Page1</a></li>
<li><a href='#'>Page3</a></li>
<li class='last'><a href='#'>Page4</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>YOLO</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>
I am using this CSS code :
#cssmenu > ul {
background: url(images/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: url(images/menu-bg.png) repeat;
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: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #9e3825;
text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/active.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/highlight-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 64px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #de553b;
background: url(images/hover.png) repeat;
color: white;
text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) repeat;
}

You want something like this?
body{
background: #CCC;
}
#cssmenu > ul {
background: url(images/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #9e3825;
text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/active.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/highlight-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
position: absolute;
width: 100%;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #de553b;
background: url(images/hover.png) repeat;
color: white;
text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) repeat;
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li class='has-sub'><a href='#'>Page2</a>
<ul>
<li><a href='#'>Page1</a></li>
<li><a href='#'>Page3</a></li>
<li class='last'><a href='#'>Page4</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>YOLO</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>