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;
}
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 have created a CSS Navigation Bar and its divided into three parts:
1.Left (.logo is class and it placed at the Left)
2.Center (.menu is another class and it placed at the Center)
3.Right (.menu2 is last class and i can't place at the Right correctly)
I want Something Like this and how can I achieve this task:
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav{
position: fixed;
width: 100%;
background-color: #000;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
</nav><!----- nav ------>
You might put the menu2s before the Menu1s in the HTML, and give .menu2 right: 0; and position: absolute;:
nav{
position: fixed;
width: 100%;
background-color: #000;
}
.logo {
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
/*Menu 1*/
nav .menu ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: center;
margin:0;
transition: 2s;
}
nav .menu ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
/*Menu 2*/
nav .menu2 {
right: 0;
position: absolute;
}
nav .menu2 ul{
list-style-type: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin:0;
transition: 2s;
}
nav .menu2 ul li{
display: inline-block;
padding: 16px 8px;
}
nav .menu2 ul li a{
text-decoration: none;
color: #fff;
font-size: 20px;
}
<nav>
<div class="logo">
LOGO
</div>
<div class="menu2">
<ul>
<li>menu2</li>
<li>menu2</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Menu1</li>
<li>Menu1</li>
</ul>
</div>
</nav><!----- nav ------>
I've made this navigation with CSS and now I'm trying to make it responsive using media queries, but I can't get the submenus to show properly. In responsive mode, I'd like to display the full menu with all links neatly underneath each other in one box. Would really appreciate some help!
https://jsfiddle.net/4L8ghza0/1/
HTML:
<header>
<div class="nav">
<ul>
<li>Start</li>
<li>Submenu1 <span class="arrow">▼</span>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
</li>
<li>Service</li>
<li>Events</li>
<li>Submenu2 <span class="arrow">▼</span>
<ul>
<li>link4</li>
<li>link5</li>
<li>link6</li>
</ul>
</li>
</ul>
</div>
</header>
CSS:
header {
top: 0px;
background-color: #EFE7D2;
position: fixed !important;
width: 100%;
height: 125px;
z-index: 10;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.12), 0 2px 10px 0 rgba(0,0,0,0.12);
}
.nav {
float: right;
padding: 40px 80px 0 0;
}
ul {
list-style-type: none;
}
ul li {
font-family: Arial, sans-serif;
font-size: 95%;
text-transform: uppercase;
display: inline-block;
position: relative;
float: left;
margin: 5px;
}
ul li a {
padding: 8px 10px;
display: block;
text-decoration: none;
color: #000000;
}
ul li:hover{
background: #CCB18E;
}
.nav .arrow {
font-size: 70%;
line-height: 0%;
}
ul li ul {
display: none;
position: absolute;
width: 210%;
padding: 0;
}
ul li ul li {
display: block;
text-decoration: none;
background: #CCB18E;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li ul li:hover {
display: block;
background: #DAC7AD;
text-decoration: none;
padding: 0px 10px;
margin: 0;
width: 100%;
}
ul li:hover ul{
display:block;
visibility:visible;
}
ul ul li:hover li{
display:block;
}
.current {
background:#CCB18E;
color: #000000;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(https://cdn0.iconfinder.com/data/icons/social-messaging-productivity-4/128/menu-2-512.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
#media screen and (max-width: 1080px){
#menu-icon {
display: inline-block;
}
ul li ul li a {
display: block;
}
ul, ul:active {
display: none;
z-index: 1000;
position: absolute;
padding: 10px;
background: #EFE7D2;
right: 100px;
top: 60px;
width: 25%;
border: 1px #5F7B65 solid;
}
.nav:hover ul {
display: block;
}
ul li:hover ul li ul li {
display: none;
}
}
#JD26 I find it easier using flex-box. You can set .nav {display: flex; flex-direction:column;} in your media query. This should get you started. Or with block display: .nav {display: block}.
Working on a website (inherited someone else's code) and I'm trying to make a dropdown menu. The dropdown appears correctly when I hover over the item, but as soon as I mouse down to the dropdown list items, they disappear. Can someone help me figure out what's wrong here?
#nav {
position:fixed;
top: -1em;
background: #000;
font-family: 'Abel', sans-serif;
font-size: 1.25em;
letter-spacing: 0.05em;
width:100%;
text-align:right;
padding: 1.25em;
z-index: 3;
}
#nav li {
list-style-type: none;
display: inline-block;
margin: 0em 0.25em;
color: #90918F;
}
#nav li a {
text-decoration: none;
display: inline-block;
padding: 0em 0.5em;
margin: 0;
color: #90918F;
}
#nav li a:hover {
text-decoration: none;
color: #90918F;
}
#nav li a.active {
text-decoration: none;
color: #90918F;
}
#nav li.space {
padding: 2em;
}
ul {
padding: 0.05em;
}
#nav ul {
z-index: 3;
margin-top: 0;
background: #000;
display: none;
position: absolute;
top: 72px;
right: 450px;
}
#nav ul li {
display: block;
padding: 0.75em;
text-align: left;
}
#nav li:hover > ul {
display: block;
}
#nav li > ul:hover {
position: absolute !important;
}
#nav ul li:after {
position: absolute;
left: 5%;
top: -20px;
width: 0;
height: 0;
content: '';
}
<ul id="nav">
<div id="logo">
<img src="images/logo.png" class="logo">
</div>
<li>ABOUT
<ul class="dropdown">
<li>Values</li>
<li>Our Team</li>
</ul>
</li>
<li>SERVICES</li>
<li>CLIENTS</li>
<li>STUDENTS</li>
<li>CONTACT</li>
</ul>
SEE LIVE MENU HERE.
I am trying to figure out why the drop-down disappears after you attempt to rollover it. Can someone see the problem in my code? Thank you.
HERE IS MY HTML MENU
<div id="menu">
<ul>
<li><span>Needs Assessment</span> </li>
<li><span>Knowledge Acquisition</span>
<ul>
<li>Administer Knowledge<br>Pre-Test</li>
<li>Assign Asthma<br>Article </li>
<li>Administer Knowledge<br>Post-Test</li>
<li>Discuss Asthma<br>Case Study</li>
</ul>
</li>
<li><span>Skills Proficiency</span> </li>
<li><span>Simulation in Teams</span>
<ul>
<li>Perform Asthma<br>Simulation</li>
<li>Facilitate<br>Debriefing</li>
</ul>
</li>
<li><span>Performance</span></li>
<li><span>Resources</span></li>
</ul>
</div>
HERE IS MY CSS
#menu {
position: relative;
top: 10px;
left: 0px;
width: 940px;
height: 47px;
}
#menu ul {
position: relative;
top: -15px;
left: 0px;
margin-left: 0px;
padding-left: 0px;
list-style: none;
}
#menu ul li {
position: relative;
display: inline;
float: left;
list-style: none;
margin-right: 0px;
border: solid 0px #4981a8;
width: 156px;
background-image: url ('http://www.laerdal.com/Laerdal/usa/discoversimulation/images/button.png');
background-repeat: no-repeat;
}
#menu ul li a {
display: block;
width: 156px;
padding: 12px 0px 10px 0px;
border: solid 0px #fff;
font-family: 'Cabin', sans-serif;
font-size: 14px;
font-weight: lighter;
text-align: center;
text-decoration: none;
}
#menu a span {
float: left;
display: block;
padding: 3px 5px 4px 6px;
color:#fff;
float: none;
}
#menu a:hover span {
color:#ffdd00;
}
#menu li ul {
position: absolute;
top: 47px;
left: 0px;
background-color:#4981a8;
border: solid 1px #4981a8;
display: none;
}
#menu li:hover ul {
display: block;
z-index: 999;
}
#menu li li a {
font-family: 'Cabin', sans-serif;
font-size: 14px;
color: #000;
font-weight: lighter;
height: 38px;
background-color:#eee;
margin-bottom: -9px;
}
#menu li li a:hover {
color: #065389;
}
You have another element on your page that's partially covering up the navigation:
#textbox {
position: relative;
top: -30px;
}
This is blocking the :hover. To solve this, give your #header a z-index:1. Any positive value should work, you just need to set it to something so the element stays on top.