I can't get the sub-menu to show when I hover a list item. What did I do wrong ?
It hides properly using display:none, but doesnt show up when I hover.
nav ul ul {display: none;}
nav ul li:hover > ul{display: block;}
Complete code:
<nav>
<ul>
<li>link</li>
<li>link2</li>
<ul>
<li>SubMenu</li>
</ul>
</ul>
</nav>
CSS:
/* start NAVBAR */
nav ul,li{
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
justify-content: center;
list-style: none;
}
nav ul ul {display: none;}
nav ul li:hover > ul{display: block;}
nav ul {position: relative;}
nav ul li {
position: relative;
flex: 1;
background-color: green;
}
nav ul li a{
color: black;
#background-color: pink;
text-decoration: none;
padding: 5px 10px 5px 10px;
}
nav ul li:hover{
background-color: orange;
}
nav ul li ul {position: absolute; top:30px; left:0px;}
/* end NAVBAR */
The problem is that you've closed your li element before you put the submenu in it. Move your closing </li> tag to after the ul submenu:
<li>link2
<ul>
<li>SubMenu</li>
</ul>
</li>
Why? Because your CSS selection of nav ul li:hover > ul{display: block;} is expecting the ul element (that you want to show on hover) to be a direct child of the li element. In reality, your ul is not a child at all.
Related
I having a problem getting menu items to reappear in CSS and html. The first two line of CSS code below, "display none", hides the menu items, in which I want. However, the second code does not make the menu items appear again when the mouse is hovering over the menu. Any help on this would be greatly appreciated.
ul li ul li ul li{
display:none;
}
ul li ul li:hover {
background: #696630;
display:block; !important;
}
The item you want to reappear are the LI's nested further down, so ensure the hover is on the parent, but the element you actually style is the correct child.
ul li ul li ul li {
display: none;
}
ul li ul li:hover ul li {
display: block;
}
Please see example below. In your code, you had !important behind the semicolon which is the wrong place. I should've been directly after block.
Don't use this when it can be avoided.
ul {
padding: 0;
margin: 0;
}
li {
padding: .5em;
cursor: pointer;
position: relative;
width: 100px;
}
li:hover {
background: #696630;
}
.sub,
.subsub {
display: none;
position: absolute;
top: 1.5em;
left: 0;
}
.main li:hover ul.sub {
display: inline-block;
}
.sub li:hover ul.subsub {
display: inline-block;
}
<ul class="main">
<li>Main
<ul class="sub">
<li>Sub
<ul class="subsub">
<li>sub sub</li>
</ul>
</li>
</ul>
</li>
</ul>
I have an existing HTML menu which I need to add further navigation to. I have added in the extra <ul> and <li> tags which I believe are in the correct place. The problem that I am having is getting the further options to drop down below the "Types of Claims" Option.
Here is the HTML code:
<div id="nav">
<ul>
<li>HOME</li>
<li>INJURY CLAIM CALCULATOR</li>
<li>WHO WE ARE</li>
<li>WHAT WE DO</li>
<li>TYPES OF CLAIMS
<ul>
<li>CLAIM 1</li>
<li>CLAIM 2</li>
<li>CLAIM 3</li>
</ul>
</li>
<li>CONTACT US</li>
</ul>
</div>
and here is the CSS code:
#nav ul li {
display: inline;
width: 100px;
}
#nav ul li a:link {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}
#nav ul li a:visited {
color: #F1F1F1;
float: left;
padding-right: 45px;
text-decoration: none;
}
#nav ul li a:hover {
color: #FFF;
float: left;
padding-right: 45px;
text-decoration: underline;
}
#nav ul {
margin: 0px;
padding: 0px;
}
Any help will be greatly appreciated!
You need something like this:
#nav ul li ul {opacity:0;}
#nav ul li:hover ul {opacity;1;}
-or-
#nav ul li {display:relative;}
#nav ul li ul {display:absolute; top:-2000px;}
#nav ul li:hover ul {top:0;}
-or-
#nav ul li ul {width:150px; position:absolute; visibility:hidden; top:-2000px;}
#nav ul li:hover ul {visibility:visible;}
Basically, you need to tell the nested ul (unordered list) that it has 1 style for the parent li which makes it invisible, and another style for the parent li:hover which makes it visible somehow. There are multiple ways of achieving this.
http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
You can use the
#nav ul li ul {visibility:hidden;} and
#nav ul li: hover ul {visibility:visible;}
I am trying to have a horizontal menu, and when you hover on an item a vertical menu appears below it (menu2). When hovering on an item in menu 2, a third menu appears next to menu2 at the same height as the item being hovered on in menu 2.
http://gcommerce2.gtdsites.com/ (it is the menu I am building right below where it says "home page")
I got it all working. The item you hover on in menu2 to reveal menu3 is "submenu2". The only problem is that when you move the mouse over to try and select one of the items in menu 3, everything disappears before you can get the mouse onto menu 3.
Here is the code:
<style>
nav a {
text-decoration: none;
font: 12px/1 Verdana;
color: #000;
display: block; }
nav a:hover { text-decoration: underline; }
nav ul {
list-style: none;
margin: 0;
padding: 0; }
nav ul li { margin: 0; padding: 0; }
/* Top-level menu */
nav > ul > li {
float: left;
position: relative; }
nav > ul > li > a {
padding: 10px 30px;
border-left: 1px solid #000;
display: block;}
nav > ul > li:first-child { margin: 0; }
nav > ul > li:first-child a { border: 0; }
/* Dropdown Menu */
nav ul li ul {
position: absolute;
background: #ccc;
width: 100%;
margin: 0;
padding: 0;
display: none; }
nav ul li ul li {
text-align: center;
width: 100%; }
nav ul li ul a { padding: 10px 0; }
nav ul li:hover ul { display: block; }
a.menu2:link + ul.menu3 {display: none;}
a.menu2:hover + ul.menu3 {display: inline-block; }
.format_text ul ul {
margin: 0 0 0 .95em;
}
a.menu2, li.menu2 {display: inline-block;}
ul.menu2, ul.menu3 {border: black 2px solid;}
</style>
<nav>
<ul>
<li>Link</li>
<li>
Link2
<ul class="menu2">
<li>Submenu1</li>
<li class="menu2"><a class="menu2" href="#">Submenu2</a>
<ul class="menu3">
<li><a class="menu3" href="#">gmenu1</a></li>
<li>gmenu22</li>
<li>gmenu3</li>
</ul>
</li>
<li>Submenu3</li>
</ul>
</li>
<li>Link3</li>
</ul>
</nav>
<br style="clear:both;"/>
Can Anyone help with this?
Take a look at the http://jqueryui.com/menu/ plugin. It's much easier than trying to code your own menu structure
example http://jsfiddle.net/h7N5R/
You want to be targeting hover on the list item not the anchor tag
Change
a.menu2:hover + ul.menu3 {display: inline-block; }
To
li.menu2:hover > ul.menu3 {display: inline-block; }
See: http://jsfiddle.net/VdqnD/
I have some serious problem with my menu and its hover effect.
I have a very basic menu, which has a submenu:
<ul id="menu">
<li>Menu1</li>
<li>Menu2
<ul>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
</li>
<li>Menu3</li>
</ul>
Here is the CSS I'm using:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul ul {
width: 200px;
height: 100px;
background: #000;
}
Okay, so my problem is, that when I hover my mouse the Dropdown menu and gets my mouse on the Submenus, the Hover effect of the Parent menu item (in this case Menu2) is disappearing. So it will not have black BG when I hover the mouse on the submenu items.
Is there anything I could do to make that hover effect stay on the partent menu (Menu2)?
First problem: your selectors are wrong.
#menu IS an ul , then #menu ul ul means
an ul descendant of an ul descendant of my #menu, that is an ul
You don't have three levels of uls, so...
change ul ul to li ul.
The second problem is that you are affecting a tag on hover, but a tag is a sibling, not an ancestor (or parent) of your submenu ul.
You should then target your li, not your a.
Demo: http://jsfiddle.net/mSrkn/ (with tons of problems still there, but with the two above resolved)
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li:hover {
background: #000;
}
#menu li ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul {
width: 200px;
height: 100px;
background: #000;
}
The problem is with yout selectors:
#menu ul li:hover > ul {
display: block;
}
This says that any element with ID that has a child ul with lis that's hovered with a child ul should be selected. Your markup is different from this, the UL itself is the ID #menu so you have to remove the first ul from the selectors themselves:
#menu li:hover > ul {
display: block;
}
http://jsfiddle.net/V7Ltw/
You might try adding the following to your CSS
#menu li:hover{
background-color: #000;
}
By hovering over the sub-menu, you're still hovering over the parent list item.
And you should follow Kyle's answer as well as you do need to remove the first UL selector from your css.
You have to change a lot of stuff to make this work, the basic idea is to put the submenu inside your menu items :
CSS:
#menu li {
display: inline;
}
#menu li a {
padding: 10px;
}
#menu li a:hover {
background: #000;
}
#menu ul.submenu {
display: none;
float: left; // For viewing purpose
}
#menu ul.submenu { padding: 20px; }
#menu ul.submenu:hover {
display: block;
}
#menu li:hover > ul.submenu {
display: block;
}
ul.submenu:hover + a { background: #000; }
#menu ul {
width: 500px;
height: 100px;
background: #000;
}
HTML:
<ul id="menu">
<li>Menu1</li>
<li>
<ul class='submenu'>
<li>SubMenu1</li>
<li>SubMenu2</li>
</ul>
Menu2
</li>
<li>Menu3</li>
</ul>
Demo here : http://jsfiddle.net/V7Ltw/
I'm trying to add sub menu under main menu items but failed to do so. I've added display:none to hide sub menu, display:block to show when mouse is over main menu etc to some of the tags in CSS but none of them worked. Perhaps I added to wrong places.
I've cleared all my faulty codes not to deal with messy code instead giving you clear one to modify it.
Sub menu shouldn't be visible unless mouse is over its parent menu. Also sub menu should appear right under its parent menu.
Thanks in advance
CSS
<style>
.menu{
width: 100%;
background-color: #666666; }
.menu ul{
margin: 0; padding: 0;
float: left;}
.menu ul li{
display: inline;
position: relative;}
.menu ul li a{
float: left; text-decoration: none;
color: white;
padding: 10.5px 11px;
background-color: #333; }
.menu ul li a:hover, .menu ul li .current{
color: #fff;
background-color:#0b75b2;}
</style>
HTML
<div class="menu">
<ul>
<li>HOME
<ul>
<li>Home</li>
<li>Home short</li>
<li>Home very long</li>
</ul>
</li>
<li>ADMINISTRATOR
<ul>
<li>Admin</li>
<li>Admin short</li>
</ul>
</li>
<li>STAFF
<ul>
<li>staff</li>
</ul>
</li>
<li>LOGOUT</li>
</ul>
<br style="clear:left"/>
</div>
Change to .menu ul li ul{
position: absolute;}
If I understand your problem correctly, works fine now.
so..
.menu ul li ul{
position:absolute;
margin-top:40px;
width:150px;}
.menu ul li ul li{
display:block;}
To hide until hover, .menu ul li ul{ display:none; } .menu ul li:hover ul{display:block; }