Hi all I'm stuck at this. I have created a horizontal menu bar and it's working.
In my code the sub menu items are displaying using the mouse hover property. But in that menu bar I want to appear the sub menu items displaying static when it is clicked. The Code is:
<html>
<head>
<style>
.erp-menu{
width:100%;
height:120px;
background-color:#99CCFF;
}
.erp-menubar
{
width:auto;
padding-top:15px;
font-size:1.3em;
margin-left:15px;
}
.erp-menubar ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
.erp-menubar ul a
{
display:block;
color:#333;
text-decoration:none;
padding:0 15px;
}
.erp-menubar ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
.erp-menubar ul li.current-menu-item
{
background:#ddd;
}
.erp-menubar ul li:hover
{
background:#f6f6f6;
}
.erp-menubar ul ul
{
width:900px;
height:60px;
display: none;
position:absolute;
top:100%;
left:0;
background: #CCCCCC;
padding-top:5px;
z-index:100;
}
.erp-menubar ul ul li
{
display:inline;
}
.erp-menubar ul ul a
{
line-height:120%;
padding:10px 15px
}
.erp-menubar ul li:hover > ul
{
clear:both;
display: inline-block;
}
</style>
</head>
<body>
<div class="erp-menu">
<div class="erp-menubar">
<ul>
<li class="current-menu-item">Home
<ul>
<li class="current-submenu">Sub Menu 1</li>
<li class="current-submenu">Sub Menu 2</li>
<li class="current-submenu">Sub Menu 3</li>
<li class="current-submenu">Sub Menu 4</li>
<li class="current-submenu">Sub Menu 5</li>
</ul>
</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</body>
</html>
Related
I found a great CSS solution for a menu with submenu, pure CSS:
link: Codepen by Phil Hoyt
Now I want a delay on hiding the menu on mouse movements. So that the menu doesn't hide directly when the mouse is off the menu item (for a short time). So I added some CSS, found on this page, resulting in code below. Previous link exactly explains my issue, but I haven't been able to fix it with the hints.
When you hover the main menu items, the delay of the first item keeps the menu item open, while the mouse is already on the second menu item. See gif below.
How will I be able to fix this? Keeping the delay, but when another menu is open, hiding the menu item instantly.
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
visibility: hidden;
transition: 0.2s 1s;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
visibility: visible;
transition-delay: 0s;
}
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
Pretty simple, add the transition delay only when you don't hover the menu container (you move the mouse out)
By the way thanks for inspiration how to solve accidentally hovering out of nested narrow menu items.
#primary_nav_wrap ul:hover ul
{
transition: 0s;
}
#primary_nav_wrap ul:not(:hover) ul
{
transition: 0.1s 1s;
}
(This should do the same)
#primary_nav_wrap ul ul
{
transition: 0.1s 1s;
}
#primary_nav_wrap ul:hover ul
{
transition: 0s;
}
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
visibility: hidden;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap:not(:hover) ul
{
transition: all 0.1s;
transition-delay:1s;
}
#primary_nav_wrap:hover > ul:not(:hover)
{
transition: all 0s!important;
transition-delay:0s!important;
display:none!important;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
visibility: visible;
transition-delay: 0s;
}
<h1>Simple Pure CSS Drop Down Menu</h1>
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
<li>Contact Us</li>
</ul>
</nav>
I have tried my best to do it myself, but I haven't succeeded. I want the categories (archive, topic etc.) to be able to disappear on my phone when i'm clicking on it the second time. So basically when I click on "Archive" etc. I want it to close again after opening it when I click on it. How do I do that?
My codes:
#primary_nav_wrap
{
margin-top:0;
width: 100%;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:2.5% 0 0 0;
}
#primary_nav_wrap ul a
{
display:block;
color:#5e5e5e;
text-decoration:none;
font-size:70%;
line-height:32px;
padding:5px 15px;
font-family:'Source Sans Pro', sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#FFF;
}
#primary_nav_wrap ul li:hover
{
background:none;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
margin:0;
border: 1px solid #eaeaea;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
letter-spacing: 1px !important;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Topic</li>
<li>Archive
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
I am a very beginner to HTML and CSS. When I'm practicing CSS drop down menus, sub menus are inline and not aligned properly. Let me know the mistake what I have done and rectify the mistake.
#menu{ list-style-type:none; margin:0; padding:0; }
#menu li{ display:inline; }
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; }
#menu li a:hover{ background-color:#AA7FFF; color:White; }
.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; }
.submenu li a{ display:inline-block; }
#menu li:hover .submenu{ display:inline-block; }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li>Menu 1
<ul class="submenu">
<li>Sub menu 1.1</li>
<li>Sub menu 1.2</li>
<li>Sub menu 1.3</li>
<li>Sub menu 1.4</li>
</ul>
</li>
<li>Menu 2
<ul class="submenu">
<li>Sub menu 2.1</li>
<li>Sub menu 2.2</li>
<li>Sub menu 2.3</li>
<li>Sub menu 2.4</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="submenu">
<li>Sub menu 3.1</li>
<li>Sub menu 3.2</li>
<li>Sub menu 3.3</li>
<li>Sub menu 3.4</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
</body>
</html>
HI now add this css Define your .submenu and #menu li this css
.submenu{ top: 100%;left: 0;}
#menu li {
display: inline-block;
position: relative;
}
#menu{ list-style-type:none; margin:0; padding:0; }
#menu li{ display:inline; }
#menu li a{ text-decoration:none; background-color:#FFAAFF; color:Black; display:inline-block; padding: 20px 40px; }
#menu li a:hover{ background-color:#AA7FFF; color:White; }
.submenu{ display:none;position:absolute; top:66px; margin:0; padding:0; }
.submenu li a{ display:inline-block; }
#menu li:hover .submenu{ display:inline-block; }
.submenu{ top: 100%;left: 0;}
#menu li {
display: inline-block;
position: relative;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Drop down menu</title>
<link href="login.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="menu">
<li>Menu 1
<ul class="submenu">
<li>Sub menu 1.1</li>
<li>Sub menu 1.2</li>
<li>Sub menu 1.3</li>
<li>Sub menu 1.4</li>
</ul>
</li>
<li>Menu 2
<ul class="submenu">
<li>Sub menu 2.1</li>
<li>Sub menu 2.2</li>
<li>Sub menu 2.3</li>
<li>Sub menu 2.4</li>
</ul>
</li>
<li>Menu 3</li>
<li>Menu 4
<ul class="submenu">
<li>Sub menu 3.1</li>
<li>Sub menu 3.2</li>
<li>Sub menu 3.3</li>
<li>Sub menu 3.4</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
</body>
</html>
menu li {display: -webkit-inline-box; position: relative;}
use this css
And Must check display for all browser
I need your help.
How can the CSS markup below be modified such that the color white is present thoughout the users selection? As it is now, when a section has been hovered, the text remains blue except for the last part selected. Notice that the blue color is not white throughout the user's selection.
See a picture below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#navigation {
width: 150px;
font-size: 0.75em;
}
#navigation ul {
margin: 0px;
padding: 0px;
}
ul.top-level {
background: rgb(238,238,238);
}
#navigation li {
list-style: none;
}
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: rgb(41,83,118);
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{
text-decoration:underline;
color: #fff;
}
#navigation li:hover {
background: rgb(85,85,85);
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 150px;
top: 0px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#navigation .sub-level {
background: rgb(238,238,238);
}
#navigation .sub-level .sub-level {
background: rgb(238,238,238);
}
li:hover .sub-level .sub-level {
display:none;
}
.sub-level li:hover .sub-level {
display:block;
position: absolute;
left: 150px;
}
</style>
</head>
<body>
<div id="navigation">
<ul class="top-level">
<li>Home
<ul class="sub-level">
<li>Sub Menu Item 1
</li>
<li>
Sub Menu Item 2
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li>FAQ
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>
Sub Menu Item 3
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
</ul>
</li>
<li>
News
<ul class="sub-level">
<li>Sub Menu Item 1
<ul class="sub-level">
<li>Sub Sub Menu Item 1</li>
<li>Sub Sub Menu Item 2</li>
<li>Sub Sub Menu Item 3</li>
<li>Sub Sub Menu Item 4</li>
</ul>
</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Change #navigation a:hover to #navigation li:hover > a. The <a> is not parents of the sublist. You will remain hovered over the list while hovered over the sublist. The child selector (>) is necessary or else all a descendants will be white in the sublists which is undesirable.
http://jsfiddle.net/nvEza/
Add the following at the end of your css: (Working jsFiddle)
#navigation li:hover > a{ /* Thanks #ExplosionPills */
color:white;
}
I have seen it where the anchor wraps the entire sub-menu, like so:
<a href="#">
News
<ul class="sub-level">
...
</ul>
</a>
This way, when you are hovering over a sub-menu, the parent anchor is still active, as well.
Use the hover on the parent to set the child colors in that state.
#navigation .top-level:hover li a{color:#fff;}
I did my research and was able to replicate what I'm looking for, well kind of--I just need help with a more specific vertical, pure CSS, menu.
I want my sub-menu popup to appear 10px to the left of the a not the li attribute like most example found on the internet. I'm also looking for the most simple, pure CSS, type of menu--Nothing fancy.
Here's what I've done so far:
<div id="nav">
<ul class="top-level">
<li>This is a long text
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact me here</li>
<li>Help
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
my css:
#nav {border:1px solid cyan;}
/* top level menu */
#nav ul.top-level {border:1px solid red;}
#nav ul.top-level li {position:relative;}
/* sub level menu */
#nav ul.sub-level {border:1px solid yellow;}
#nav ul.sub-level {display:none;} /* hide */
/* hover the sub menu*/
#nav ul.top-level li:hover .sub-level {display: block; position:absolute; top:5px;}
How do I make it so the sub level menu pops up when I hover the a HTML anchor, not the li, and 10px to the left of the clicked a anchor?
Thanks.
Try this one and I think it will help
HTML
<div id="nav">
<ul class="top-level">
<li>This is a long text
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact me here</li>
<li>Help
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
CSS
#nav {font-size:0.75em; width:150px;}
#nav ul {margin:0px; padding:0px;}
#nav li {list-style: none;}
ul.top-level {background:#FFFFFF;}
ul.top-level li {
border: #FF0000 solid;
border-width: 1px;
}
#nav ul.sub-level {border:1px solid yellow;}
#nav a {
color: #000000;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#nav a:hover{
text-decoration:underline;
}
#nav li:hover {
background: #f90;
position: relative;
}
ul.sub-level {
display: none;
}
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
#nav .sub-level {
background: #FFFFFF;
}