Can you correct me the mistake - html

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

Related

Pure CSS drop down menu with delay issue

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>

Toggle dropdown menu on ul:focus

I'm trying to create dropdown navigation with pure CSS and I want to show dropdown menu on ul click. Problem is that simple ul:focus > ul doesn't work even though there is anchor in it. Selectors :hover and :active are working without problems.
HTML
<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>
CSS
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Here's the code:
https://codepen.io/anon/pen/vgpQWV

Your selector needs to be #primary_nav_wrap ul li > a:focus + ul.
Breaking it down:
When the <a> directly inside the <li> has focus, apply these styles to the immediately adjacent <ul>.
Fixed example:
#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 {
display: none;
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 > a:focus + ul {
display: block
}
<h1>Testing 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>

How to close my dropdown menu? (onclick)

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>

How to display Submenu items static?

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>

Keeping the text the same color when selected in a css vertical flyout menu

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;}