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>
Related
This is a frequently addressed problem in SO, but almost 5 of the threads here didn't offer any help. The dropdown menu items are not staying open unless I hover over the initial item many times. I can't locate the problem in a specific class, any help would be appreciated.
Here is the CSS Code:
nav ul {
list-style: none;
}
nav ul li {
display: block;
float: right;
}
nav ul ul {
display: none;
position: relative;
margin-top: 60px;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
width: 170px;
float: none;
display: block;
}
#navigation_bar a {
display: block;
float: right;
padding: 5px;
font-size: 25px;
color: black;
}
#navigation_bar a:hover {
border-radius: 20px;
color: #FFFFFF;
transition: color 0.2s;
}
div nav {
display: block;
}
And here is the corresponding HTML code:
<div id="navigation_bar">
<nav>
<ul>
<li>شركتنا</li>
<li>الخدمات</li>
<li>المركز الإعلامي
<ul>
<li>آخر الأخبار</li>
<li>معرض الصور</li>
</ul>
</li>
<li>التحميلات</li>
<li>اتصل بنا</li>
</ul>
</nav>
</div>
It's because there's a bit of a gap between the parent nav and the child dropdown. When you try to hover on the child dropdown and your cursor passes over this gap, you lose the li:hover state hence the dropdown hides.
nav ul ul {
...
margin-top: 43px;
...
}
https://jsfiddle.net/mq29ac39/1/
Now compare this one with the original margin-top: 63px
https://jsfiddle.net/mq29ac39/2/
I added background a color to give a better visual idea about the gap
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 fashion a 100% CSS and HTML dropdown menu like what's seen on http://phpbb.com. When you hover over the navigation links, a new div appears just below the one you hovered onto.
What I'm trying to do is make .submenu appear just below the <li> that it's nested into by using #nav li a:hover submenu {. To my knowledge this CSS selector should select the .submenu DIV when an a element is hovered over? But it doesn't work.
#nav {
list-style-type: none;
margin: -5px 0px 0px 5px;
}
#nav li {
display: inline;
}
#nav li a {
display: block;
padding: 3px;
float: left;
margin: 0px 10px 0px 10px;
text-decoration: none;
color: #fff;
font-weight: bold;
position: relative;
}
#nav li a:hover {
text-shadow: 1px 1px #333;
}
#nav li a:hover submenu {
display: block;
color: red;
}
.submenu {
position: absolute;
display: none;
}
<ul id="nav">
<li>Home
</li>
<li>
Skins
<div class="submenu">
hello :)
</div>
</li>
<li>Guides
</li>
<li>About
</li>
</ul>
Your second to last selector is looking for a "submenu" element, you should correct this to say ".submenu"
Like this:
/*#nav li a:hover submenu {*/
#nav li a:hover .submenu {
display: block;
color: red;
}
EDIT:
To get the hover to work, you also need to adjust your CSS so that the hover is applied to the list item, instead of the anchor tag:
#nav li:hover .submenu {
display: block;
color: red;
}
Are you missing a period ('.') before submenu in the selector #nav li a:hover submenu?
Try to edit this following part.
Put a . (dot) before the submenu, since its a class.
#nav li a:hover .submenu {
display: block;
color: red;
}
#nav li:hover .submenu {
display: block;
color: red;
}
You want the submenu to appear when you hover on li, not on a, simply because you do not have items with a class submenu inside the a.
Also you could consider using s for the submenus.
Hey guys, thanks in advance for any help or input. I am having trouble understanding CSS selectors and i have read the docs..
I am trying to refer to the UL with the id dropdown in my stylesheet. I was under the assumption that i was able to refer to any elements like:
#dropdown ul
{
}
This method however does not seem to work :s.. Am i misunderstanding CSS selectors? The elements in my actual code are nested deeper than this structure but i presume the principle is the same?
<div id="wrapper">
<ul id="dropdown">
<li class="sub">Dropdown
<!-- Sub Menu -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<!-- End Submenu -->
</li>
</ul>
</div>
/* Dropdown Menu */
#dropdown ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#dropdown ul li
{
display: block;
position: relative;
float: left;
}
#dropdown li ul
{
display: none;
}
#dropdown ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
#dropdown ul li a:hover
{
background: #617F8A;
}
#dropdown li:hover ul
{
display: block;
position: absolute;
}
#dropdown li:hover li
{
float: none;
font-size: 11px;
}
#dropdown li:hover a
{
background: #617F8A;
}
#dropdown li:hover li a:hover
{
background: #95A9B1;
}
Try
ul#dropdown
{
}
This will select the ul element with ID dropdown.
With
#dropdown ul
you are trying to locate a ul element within an element with id dropdown. This will select all ul elements inside the #dropdown ul, however many levels deep.
edit: it's right as mario wrote.
edit2: im sorry for being 5seconds too slow, i just wanted to help. For completition of my post:
ul#dropdown or #dropdown is the right selection
#dropdown ul means "select any ul that is a direct or indirect child of #dropdown". That is not what you want, I think. Try #dropdown alone (you don't need to mention ul as IDs are exclusive, meaning you should only have one #dropdown in a page).