I try to make dropdown menu but it only works click event, hover event but do not work. Anyone can help me why my code does not work? This is my code below:
=======================================================
html code
.topnav {
color: white;
overflow: hidden;
background-color: #5f5f5f;
}
.topnav a {
float: left;
display: block;
font-size: 17px;
color: #f1f1f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: black;
}
.topnav a:active,
a:focus {
background-color: #4CAF50 !important;
}
.is-active {
color: #f1f1f1;
background-color: #4CAF50;
}
.dropdown-menu {
padding: 0 !important;
background-color: #5f5f5f;
border-radius: 0 !important;
}
.dropdown-menu li a {
color: white;
text-align: left;
width: 100% !important;
}
.m-dropdown-menu:hover>.dropdown-menu {
display: block;
}
<div class="topnav">
<a [routerLinkActive]="['is-active']" routerLink="home">Home</a>
<a [routerLinkActive]="['is-active']" routerLink="about">About</a>
<a [routerLinkActive]="['is-active']" routerLink="contact">Contact</a>
<div class="m-dropdown-menu">
Dropdown
<ul class="dropdown-menu">
<li><a routerLink="#">Reactive form</a></li>
</ul>
</div>
</div>
Sorry if my english is bad. Thank you very so much.
You will need to remove
overflow:hidden from top-nav and float:left from a element
so your css will look like
.topnav {
color:white;
background-color: #5f5f5f;
}
.topnav a {
display: block;
font-size: 17px;
color: #f1f1f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color:black;
}
.topnav a:active, a:focus {
background-color: #4CAF50 !important;
}
.is-active {
color: #f1f1f1;
background-color: #4CAF50;
}
.dropdown-menu {
padding: 0 !important;
background-color: #5f5f5f;
border-radius: 0 !important;
}
.dropdown-menu li a {
color:white;
text-align: left;
width: 100% !important;
}
.m-dropdown-menu:hover > .dropdown-menu {
display: block;
}
Working demo
I Just update your code structure with few CSS changes. Try this I hope it'll help you out. Thanks
.topnav {
color:white;
background-color: #5f5f5f;
}
.topnav ul {
list-style: none;
margin: 0;
padding: 0 !important;
}
.topnav ul li {
position: relative;
display: inline-block;
}
.topnav ul li:hover .dropdown-menu {
display: block;
}
.topnav a {
display: block;
font-size: 17px;
color: #f1f1f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color:black;
}
.topnav a:active, a:focus {
background-color: #4CAF50 !important;
}
.is-active {
color: #f1f1f1;
background-color: #4CAF50;
}
.dropdown-menu {
background-color: #5f5f5f;
border-radius: 0 !important;
display: none;
position: absolute;
width: 150px;
}
.dropdown-menu li a {
color:white;
text-align: left;
width: 100% !important;
}
<div class="topnav">
<ul>
<li>
<a [routerLinkActive]="['is-active']" routerLink="home">Home</a>
</li>
<li>
<a [routerLinkActive]="['is-active']" routerLink="about">About</a>
</li>
<li>
<a [routerLinkActive]="['is-active']" routerLink="contact">Contact</a>
</li>
<li>
Dropdown
<ul class="dropdown-menu">
<li><a routerLink="#">Reactive form</a></li>
</ul>
</li>
</ul>
</div>
Try using ">" in css.
example:
.topnav > a:hover {
background-color:black;
}
Related
I'm having problems with my navbar. The process of making one is already done, but when I hover over my nav and my subnav appears, all the text below it moves down.
How do I fix this?
Here is a code snippet which demonstrates the problem, hover over TAKKEN to see the issue:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text below the nav.
Image showing the problem
Try giving a fixed width to the li elements.
Check this:
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal > li {
float: left;
width: 6rem;
}
.horizontal li ul{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: inline-block;
}
.horizontal li a{
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color:#FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
}
.horizontal li a:hover {
background-color: darkorange;
color:#a2becf
}
.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
There appear to be 2 style-related problems with your nav.
Elements are being shifted to the side when you hover over TAKKEN.
This is happening because the text KAPOENEN and KAWELLEN is longer and therefore wider than TAKKEN. The quickest fix would be to define a specific width for each of the items in your nav.
Any text below the nav moves down as soon as one of the subnavs open.
To solve this problem, you need to give your nav an absolute position, and add a placeholder div to just above it in your HTML.
Run the code snippet below to see a demonstration of both points. I've marked all my changes in the CSS using comments.
/* New code */
#placeholder {
height: 100px;
}
nav {
position: absolute;
top: 5px;
}
/* End new code */
.horizontal {
list-style-type: none;
margin: 40 auto;
width: 640px;
padding: 0;
overflow: hidden;
}
.horizontal>li {
float: left;
}
.horizontal li ul {
display: none;
margin: 0;
padding: 0;
list-style: none;
position: relative;
width: 100%;
}
.horizontal li:hover ul {
display: block;
}
.horizontal li a {
display: block;
text-decoration: none;
text-align: center;
padding: 22px 10px;
font-family: arial;
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
text-transform: uppercase;
border-right: 1px solid #607987;
background-color: #006600;
letter-spacing: .08em;
/* New code */
width: 80px;
}
.horizontal li a:hover {
background-color: darkorange;
color: #a2becf
}
.horizontal li:first-child a {
border-left: 0;
}
.horizontal li:last-child a {
border-right: 0;
}
<div id="placeholder"></div>
<nav id="mainnav">
<ul class="horizontal">
<li>Home</li>
<li>Planning</li>
<li>Takken
<ul>
<li>Kapoenen</li>
<li>Kawellen</li>
<li>Kajoo's</li>
<li>Jojoo's</li>
<li>Givers</li>
<li>Jin</li>
<li>Akabe</li>
</ul>
</li>
<li>Kleding</li>
<li>Contact
<ul>
<li>Leiding</li>
<li>Verhuur</li>
</ul>
</li>
<li>Inschrijven</li>
</ul>
</nav>
Here is some text under the nav.
I'm trying to make a navbar with menu links on mobile that appears when you tap on the menu button. So, I decided to use :hover CSS events to make them appear.
In this example (or this demo, :hover is used to make other elements visible, and it works fine.
Without all the other containers (<nav>, and other <li> elements outside of #item and #menu), the code works fine. However, when I implement it into my current structure, it stops working; ...:hover ~ ... fails to work, while ...:hover still works (being that ... are the rule names).
body {
font-family: sans-serif;
margin: 0px;
width: 100%;
}
nav {
background-color: black;
position: fixed;
width: 100%;
height: 196px;
font-size: 64px;
padding-top: 0px;
z-index: 5;
}
nav ul {
color: white;
-webkit-padding-start: 32px;
width: calc(100% - 32px);
}
nav ul li {
display: block;
float: left;
height: 18px;
padding-top: 8px;
}
nav ul li#title {
min-width: 80%;
font-weight: bold;
}
nav ul li#menu {
width: 100px;
height: 100px;
color: white;
display: block;
}
nav ul li#menu:hover {
color: red !important;
}
nav ul li#menu:hover ~ nav ul li#item {
color: red !important;
visibility: visible !important;
}
nav ul li#item.first {
margin-top: 32px;
}
nav ul li#item {
background-color: rgba(255, 255, 255, 0.5);
margin-left: -32px;
height: 96px;
padding: 16px;
color: black;
display: block;
width: 100%;
visibility: hidden;
}
nav ul li#item:hover {
background-color: rgba(255, 0, 0, 0.5);
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
width: 100%;
}
a#menu {
color: white !important;
}
a:hover {
color: blue;
}
a:visited {
color: black;
text-decoration: none;
}
a#menu:visited {
color: white !important;
}
a:active {
color: red;
text-decoration: none;
}
<nav>
<ul>
<li id="title">aytimothy's Website</li>
<a href="javascript:;">
<li id="menu"><i class="fa fa-bars" aria-hidden="true">=</i></li>
</a>
<a href="/blog">
<li id="item" class="first item">Blog</li>
</a>
<a href="/forum">
<li id="item" class="item">Forum</li>
</a>
<a href="/portfolio">
<li id="item" class="item">Portfolio</li>
</a>
<a href="/support">
<li id="item" class="item">Support</li>
</a>
</ul>
</nav>
Intended Behaviour
Mousing over the equal sign (placeholder for the menu sign) will make itself and everything in the li#item elements red (for testing), and that the hidden elements (li#item) actually shows up (`nav ul li#menu:hover ~ nav ul li#item).
The background should turn transparent red when the user hovers over.
Unintended Behaviour
Hovering over the = sign only turns it red.
There are a few errors with your code:
Your html is incorrect - fix this by putting your anchors inside your lis
IDs must be unique - remove the multiple ids
Your css selector is completely wrong - you want to show any sibling li after the hovered one - you cannot fully qualify the bit after the sibling selector otherwise you are saying any nav siblings after the li, just change the bit after the tilda to match the li
body {
font-family: sans-serif;
margin: 0px;
width: 100%;
}
nav {
background-color: black;
position: fixed;
width: 100%;
height: 196px;
font-size: 64px;
padding-top: 0px;
z-index: 5;
}
nav ul {
color: white;
-webkit-padding-start: 32px;
width: calc(100% - 32px);
}
nav ul li {
display: block;
float: left;
height: 18px;
padding-top: 8px;
}
nav ul li#title {
min-width: 80%;
font-weight: bold;
}
nav ul li#menu {
width: 100px;
height: 100px;
color: white;
display: block;
}
nav ul li#menu:hover {
color: red !important;
}
nav ul li#menu:hover ~ li.item { /* target the class and use only li part after tilda */
color: red !important;
visibility: visible !important;
}
nav ul li#item.first {
margin-top: 32px;
}
nav ul li.item { /* target class instead of id */
background-color: rgba(255, 255, 255, 0.5);
margin-left: -32px;
height: 96px;
padding: 16px;
color: black;
display: block;
width: 100%;
visibility: hidden;
}
nav ul li.item:hover {
background-color: rgba(255, 0, 0, 0.5);
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
width: 100%;
}
a#menu {
color: white !important;
}
a:hover {
color: blue;
}
a:visited {
color: black;
text-decoration: none;
}
a#menu:visited {
color: white !important;
}
a:active {
color: red;
text-decoration: none;
}
<nav>
<ul>
<li id="title">aytimothy's Website</li>
<li id="menu"><i class="fa fa-bars" aria-hidden="true">=</i></li>
<li class="first item">Blog</li>
<li class="item">Forum</li>
<li class="item">Portfolio</li>
<li class="item">Support</li>
</ul>
</nav>
I am trying to get my menu to slide down on hover (looks like slowly moving as opposed to just popping up). I have found a lot of things to try but nothing seems to work which makes me think I am putting code in the wrong places.
Since the drop-down menus are different heights I was trying to use max-height to make it work.
I thank you in advance for your time.
<div id="navbar">
<ul>
<li>HOME</li>
<li class="dropdown">LEAGUE INFO
<div class="dropdown-menu">
About Us
Contact Us
Location
B.O.D.
Field Locations
Boundary Map
History
</div>
</li>
<li class="dropdown">SEASON INFO
<div class="dropdown-menu">
Standings
Game Schedules
Home Run Club
</div>
</li>
<li>PHOTOS</li>
<li class="dropdown">MISC.
<div class="dropdown-menu">
Documents
FAQ's
Equipment
How To...
Local Rules
Archives
</div>
</li>
<li>SOCIAL MEDIA</li>
</ul>
</div>
#navbar {
max-width: 960px;
background-color: rgba(0,0,0,.3);
border: 1px #000000 solid;
border-bottom: 0px;
font-family: 'Montserrat', sans-serif;
font-weight: normal !important;
}
ul {
list-style-type: none;
margin: auto;
display: table;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-btn {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 10px 20px;
text-decoration: none;
transition: .5s;
}
li a:hover, .dropdown:hover .dropdown-btn {
background-color: rgba(255,0,0,.8);
color: #000000;
}
li .dropdown {
display: inline-block;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: rgba(0,0,128,1);
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1);
}
.dropdown-menu a {
color: #ffffff;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-menu a:hover {
background-color: rgba(255,0,0,1);
color: #ffffff;
}
.dropdown:hover .dropdown-menu {
display: block;
}
Try this code
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
This is my first time trying to build a website from scratch, so my apologies if I've done everything wrong; I am open to any advice, though. My main issue right now is that the navigation bar is scrolling within itself instead of down in front of the background image. It used to look perfect until I added the floating/fixed attribute.
It's not a huge deal, but it would also be nice if the dropdown boxes were centered instead in line with the left side of the box. This is what I want it to look like: http://www.palousebicycle.org/ and here is the code for what I have now:
<header>
<style>
#nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: auto;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
</style>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
I'm very appreciative of your time! Thank you for any response or suggestions.
EDIT: Also updated this demo to center the dropdown menus (positional and text) per your example, and made comments in the CSS so you can see where the changes were made.
Remove overflow: auto on #nav to let the dropdowns extend outside of the nav bar. Live demo:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
/* center dropdowns */
position: relative;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
li.dropdown:hover .dropdown-content {
/* show dropdown */
display: block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
/* center dropdowns */
left: 50%;
transform: translateX(-50%);
/* hide dropdown */
display: none;
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
/* center dropdowns */
text-align: center;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
<nav align="center">
<ul id="nav">
<li>Home
</li>
<li class="dropdown"> Services
<div class="dropdown-content"> Memberships Repairs
</div>
<li>Our Work
</li>
<li class="dropdown"> About Us
<div class="dropdown-content"> Our Team Board of Directors
</div>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</nav>
Don't use overflow: auto property on #nav. This is responsible for internal scrolling. Instead give these additional styles:
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
}
.dropdown:hover > .dropdown-content {
display: block;
}
Have a look at the working snippet below:
#nav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333;
text-align: center;
position: fixed;
top: 0;
width: 100%;
font-family: Ubuntu;
font-size: .75em;
display: block;
}
li {
text-align: center;
display: inline-block;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #333;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: #222;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #333
}
.dropdown:hover .dropdown-content {
display: block;
}
a:link {
color: white;
}
a:visited {
color: white;
}
a:hover {
color: gray;
}
a:active {
color: whitesmoke;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
top: 40px;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content a {
text-align: center;
}
.dropdown:hover > .dropdown-content {
display: block;
}
body {
margin: 0;
}
<header>
<font face="Ubuntu" color="white">
<nav align="center">
<ul id="nav">
<li>Home</li>
<li class="dropdown">
Services
<div class="dropdown-content">
Memberships
Repairs
</div>
</li>
<li>Our Work</li>
<li class="dropdown">
About Us
<div class="dropdown-content">
Our Team
Board of Directors
</div>
</li>
<li>Contact</li>
<li>Donate</li>
</ul>
</nav>
</header>
Hope this helps!
This is my JSFIDDLE DEMO
Hover works fine, but I want to show the sub menu when i click on an option locks the submenu and then if hover on the main menu, display sub menu options but to stay on the other,
any help?
<div id="cssmenu">
<div class="divul">
<ul>
<li class="has-sub">
<a>Buscador</a>
<ul>
<li><a>Busqueda Datos</a></li>
<li><a>Estadisticas</a></li>
</ul>
</li>
<li class="has-sub">
<a>Clientes</a>
<ul>
<li><a>Buscador Clientes</a></li>
<li><a>Nuevo Cliente</a></li>
</ul>
</li>
<li class="has-sub">
<a>Incidencias</a>
<ul>
<li><a>Nuevo Incidencia</a></li>
<li><a>Buscador Incidencias</a></li>
</ul>
</li>
</ul>
</div>
#cssmenu{
border-bottom: 1px solid #278204;
margin-top: 10px;
}
#cssSubmenu{
background-color: #CCCCCC;
height: 30px;
/*margin-top: 10px;*/
}
#cssmenu ul{
height: 21px;
display: inline-block;
background-color: #278204;
margin-left: 15px;
padding-top: 5px;
}
.divul{
background:
url(/CI_Gestion_incidencias/images/menuL.png) left no-repeat,
url(/CI_Gestion_incidencias/images/menuR.png) right no-repeat;
display: inline-block;
padding-right: 29px;
margin-left: -3px;
}
#cssmenu ul li
{
height: 30px;
color: #FFF;
list-style: none;
display: inline;
padding-right: 20px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 4px;
z-index: 1000;
}
/**
**/
/*#cssmenu li a {
color: #666666;
display: block;
font-weight: bold;
line-height: 30px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
*/
#cssmenu li:hover {
background: #CCCCCC;
color: #000;
text-decoration: none;
}
#cssmenu li ul {
background: #CCCCCC;
display: none;
height: 25px;
filter: alpha(opacity=95);
opacity: 0.95;
position: absolute;
z-index: 200;
margin-left: 0px;
margin-top: 2px;
width: 100%;
}
#cssmenu li:hover > ul {
display: block;
}
#cssmenu li li {
display: block;
color: #000;
display: inline;
/* float: none;
padding: 0px;
position: relative;*/
}
#cssmenu li li:active {
display: block;
color: #000;
display: inline;
}
#cssmenu li ul a {
color: #000;
display: inline;
font-size: 12px;
font-weight: bold;
text-align: left;
text-decoration: none;
}
If you want show on click then use jquery.
You can try below code:
Demo
$('.has-sub a').click(function(){
$('.has-sub ul').hide();
$(this).next().show();
});
You can use tabindex="0" in HTMl and :focus in CSS together: DEMO
<li class="has-sub" tabindex="0">
#cssmenu li:hover > ul,
#cssmenu li:focus > ul{
display: block;
}