In the below it's a menu with dropdown submenus.
In Chrome the sub-menus are appearing below the menu, but in Firefox and IE they are always appearing below the first item.
If I change the 'float: none' to 'float: left' it works and they appear below the menu, but all the sub-menu items become inline and flow one after the other.
Is there an easy fix (rather than modifying the html as this is generated from an xml file on the server - but I can modify if need be) in css?
Thanks.
<html>
<head>
<style>
#cat_nav li > ul { display: none; }
#cat_nav ul{list-style-type: none;}
#cat_nav ul li {float: none; position: relative} /*change float to not none and it aligns but items are inline */
#cat_nav ul li:hover > ul {display: block;}
#cat_nav ul ul {min-width: 150px;background-color:#DFDFDF;padding:4px 0 4px 0;position:absolute;}
</style>
</head><body>
<nav id="cat_nav">
<ul class="products_btn">
<li style="display: inline">
PCBS1
<ul class="dropdown">
<li> Fuzz 1-1</li>
<li> Fuzz 1-2</li>
<li> Fuzz 1-3</li>
</ul>
</li>
<li style="display: inline">
PCBS2
<ul class="dropdown">
<li> Fuzz 2-1</li>
<li> Fuzz 2-2</li>
<li> Fuzz 2-3</li>
</ul>
</li>
</ul>
</body></html>
Change the float:none to the float:left on #cat_nav ul li and add this
#cat_nav ul li li {
float:none
}
to un-float the list items within the list items (and thus appear stacked instead of inline).
You need to edit your selecting and positioning. I have made some small edits to your code with a working example tested in firefox. See below.
DEMO http://jsfiddle.net/RDQW8/1/
#cat_nav li > ul {
display: none;
}
#cat_nav ul {
list-style-type: none;
}
#cat_nav ul > li {
position: relative
}
/*change float to not none and it aligns but items are inline */
#cat_nav ul li:hover > ul {
display: inline-block;
}
#cat_nav ul ul {
min-width: 150px;
background-color:#DFDFDF;
padding:4px 0 4px 0;
top:15px;
position:absolute;
}
Related
I am trying to display the list on button hover, but what happens is, whenever I hover near the button area, text gets displayed.
.header_nav {
width: 800px;
height: 400px;
}
.header_nav ul {
list-style: none;
}
.header_nav ul ul {
display: none;
}
.header_nav ul ul #nav_button:hover>ul {
display: block;
}
.header_nav ul ul li >ul {
display: none;
}
.header_nav ul li:hover >ul {
display: block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>
JS FIDDLE : https://jsfiddle.net/fhv7drst/
It is because your li element was block element.
I changed it to inline and it started working as per your requirements
HTML:
<li class="parentElement">
<input type="button" value="Button 1" name="nav_button" id="nav_button">
CSS:
li.parentElement{
display: inline;
}
here is the working fiddle
https://jsfiddle.net/m73p8pea/
The reason is that your li element is a block element, which means that it will automatically try to span the entire width available. In your case, this is the 800px provided by the topmost element.
You have two solutions readily available - one is to make the list element an inline-block element (or simply an inline element, though I'd prefer inline-block here, as block is how it started) to prevent it spaning the whole width:
.header_nav ul li {
display: inline-block;
}
You could also trigger the display change on the unordered list when hovering over the button directly, not when hovering over it's parent list item:
.header_nav #nav_button:hover + ul {
display: block;
}
This is likely the better solution, as it doesn't mess with the display types more than you need to, and you more accurately describing what you want to happen - show the list when the button is hovered.
As pointed by #Rahul Arora indeed it is because of li as block element.
But if for some reason you still want to keep it as block element, you can keep it by making it as inline-block. I also recommend removing margin (see your given example by inspect element, it is to the write of ul) and padding which is assigned by browser as default.
Here is the code:
.header_nav
{
width:800px;
height:400px;
}
.header_nav ul
{
list-style:none;
//displaying ul & all its child as inline block until overriden by other rules
display:inline-block;
//removing default margin and padding
margin:0;
padding:0;
}
.header_nav ul ul
{
display:none;
}
.header_nav ul ul #nav_button:hover>ul
{
display:block;
}
.header_nav ul ul li >ul
{
display:none;
}
.header_nav ul li:hover >ul
{
display:block;
}
<nav class="header_nav">
<ul>
<li>
<input type="button" value="Button 1" name="nav_button" id="nav_button">
<ul>
<li>Locations</li>
<li>
Mumbai
<ul>
<li>Txt 1</li>
<li>Txt 2s</li>
<li>Txt 3</li>
</ul>
</li>
<li>Delhi</li>
<li>Banglore</li>
<li>Nagpur</li>
</ul>
</li>
</ul>
</nav>
Ive got a 3 leve dropdown menu and the 3rd level sub-menu displays next to the 2nd level menu item like it should, except for a gap.
The 2nd level is set to a width of 100px so I've absolutely positioned the 3rd level to top:0, left:100px so it displays to the right of the 2nd level, but there's a gap. If I change left:100px to left:97px there is no gap. Why is this?
The HTML:
<nav>
<ul>
<li>Menu 1</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</li>
<li>Menu 4
<ul>
<li>Sub-Menu 1</li>
<li>Sub-Menu 2</li>
<li>Sub-Menu 3
<ul>
<li>Sub-Menu 4</li>
<li>Sub-Menu 5</li>
<li>Sub-Menu 6</li>
</ul>
</li>
</ul>
</li>
<li>Menu 5</li>
</ul>
</nav>
The CSS:
/* Initialise for 3 tiers */
nav ul, ul li ul, ul li ul li ul {
margin:0;
padding:0;
}
nav ul li, ul li ul li, ul li ul li ul li {
list-style-type:none;
float:left;
}
/* Link Appearance for 3 tiers */
nav ul li a, ul li ul li a, ul li ul li ul li a {
text-decoration:none;
color:#fff;
background:#666;
padding:5px 10px;
float:left;
}
nav ul li a:hover, ul li ul li a:hover, ul li ul li ul li a:hover {
background:#C00;
}
/* 2nd Tier */
nav ul li {
position:relative;
}
nav ul li > ul {
display:none;
position:absolute;
top:30px;
left:0;
width:100px;
}
nav ul li:hover > ul{
display:block;
}
/* 3rd Tier */
nav ul li ul li {
position:relative;
}
nav ul li ul li:hover > ul {
display:block;
}
nav ul li ul li ul {
display:none;
position:absolute;
top:0;
left:100px;
}
JSFiddle
using percentage instead of pixel for this issue:
try left:100% and check result
nav ul li ul li ul {
display:none;
position:absolute;
top:0;
left:100%;
}
Fiddle
also you don't need to write ul li ul li ul li a or like so.simply you can write:
ul ul ul a{
your CSS code
}
The issue is the gap between the menus. They need to be adjacent or even overlap for this hover trick to work.
So instead of specifying
left: 100px;
do something like
left: 100%;
/* or even */
left: 99%;
This will cause the 3rd layer to be adjacent to the second layer menu, or even overlap the second slightly (for 99%), allowing you to move the mouse without any interruptions that close the menu. And you won't have to worry about the width of the menus either.
Updated fiddle: http://jsfiddle.net/tqEfW/5/
If you want to keep the gap for the look of it, you can give the 3rd layer ul a padding:
nav ul li ul li ul {
....
left: 100%;
padding-left: 4px;
}
Ad demonstrated here: http://jsfiddle.net/tqEfW/9/
That said, from a UX point of view, menus with 3 layers are very hard to use and should be avoided when possible.
If you create CSS selectors like ul.first-level > li or ul.second-level > li it will only select the li that are inmediately after the ul with class first-level (or with class second-level, respectively).
In this way, without interating a lot of ul li ul li ul that can be really hard to read you can control the appearance of any complex nested list.
Its looks like you know how to solve it but your question is why this is happening.
Now in your code you put the width 100px to ul. but the li didn't have nay width. now both width is not same thing. width in ul is the width of this list area. And width in li means width of each individual list item. In your case your
ul li a
{
padding: 5px 10px;
}
now the padding of a do not full the full area. and you put the background color at ul li a so the much area its covering(not sure 'cover' is the appropriate word to mention it) its showing dark in back and around 3px left so its showing white.
If you put
ul li a
{
padding: 5px 10.1px;
}
You will see the li have no gap[#123] between levels of menu.
Instead of setting the background to ul li a if you set it to ul you can see there is no gap[#123]
#123 The actual white area is not gap. The ul is 100px but text including the padding of 10px in left and right not filling the total 100px. Its filling only 97px so when you are putting the width as 97px its showing no white area. But when it is 100px this showing the background on 97px as black and the rest 3px white which looks like a gap.
I got a css menu with 3 levels. You can see my actual code right here http://jsfiddle.net/7rMgu/
As you can see, my secondary level don't keep the light blue background when navigating in the 3rd level. I've looked over the website for similar thread but I just found similar problems with only 2 levels. Also, can someone explain when I should use the '>' in css as I'm a bit confused.
CSS
html{height:100%;background-color:#0d497d;}
body{width:100%;height:100%;margin:0px;padding:0px;color:#575757;font:0.75em "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;}
div.menuAdmin ul{margin:0;padding:0;float:right;height:100%;}
div.menuAdmin ul li{display:block;float:left;height:23px;margin-bottom:0;}
div.menuAdmin ul li a{color:#fff;padding:0.1em 0.3em 0.2em 0.3em;text-decoration:none;font-size:12px;display:block;margin:0.85em 0em 0em 0em;width:130px;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover a{color:#000;border-radius:5px;background-color:#78B9EF;}
div.menuAdmin ul li ul{display:none;}
div.menuAdmin ul li:hover > ul {display:block;height:20px;width:139px;position:absolute;margin:0;}
div.menuAdmin ul li:hover > ul li a {line-height: 20px;color:#fff;text-decoration: none;margin: 0;padding-bottom: 0.1em;background-color: #0d497d;border:1px solid #78B9EF;border-radius:5px;}
div.menuAdmin ul li:hover > ul li a:hover {color:#000;text-decoration:none;text-shadow:none;background-color: #78B9EF;}
div.menuAdmin ul ul li:hover > ul {display:block;position:absolute;left:100%;top:0;width:139px;}
div.menuAdmin ul > ul > ul li:hover > a {color:#444;background-color:#78B9EF;}
HTML
<div class='menuAdmin'>
<ul>
<li>
<a href=''>A</a>
<ul>
<li>
<a href=''>1</a>
<ul>
<li>
<a href=''>A1</a>
</li>
<li>
<a href=''>A2</a>
</li>
<li>
<a href=''>A3</a>
</li>
<li>
<a href=''>A4</a>
</li>
</ul>
</li>
<li>
<a href=''>2</a>
</li>
<li>
<a href=''>3</a>
</li>
<li>
<a href=''>4</a>
</li>
</ul>
</li>
<li>
<a href=''>B</a>
</li>
<li>
<a href=''>C</a>
</li>
<li>
<a href=''>D</a>
</li>
</ul>
</div>
Thanks
To keep the :hover effect you need to make the change on hover the li element not just the a tag, so you have this:
div.menuAdmin ul li:hover > ul li a:hover
Must be:
div.menuAdmin ul li:hover > ul li:hover > a
With the hover on the li element keeps the effect since the ul wich is the submenu is part of the li.
Check the Demo http://jsfiddle.net/7rMgu/1/.
Now your second question when use this >; when you only want to affect the direct children, it let you avoid the same style on nested elements. An example with the same selector I have fix, if you remove the last > check what happen:
http://jsfiddle.net/7rMgu/3/
It changes all a inside the li even if are inside some nested elements.
Here is an updated fiddle:
http://jsfiddle.net/ryanwheale/7rMgu/2/
Essentially, you always want the :hover selector to be on the LI. You had it on the A.
Also, the > selector in CSS means "direct children"... best explained by example:
<div class="my-div">
<p>This should be blue</p>
<div>
<p>This should be green</p>
</div>
</div>
and this css:
.my-div p { color: green }
.my-div > p { color: blue }
You have a few redundant rules, I've tried to boil it down for you:
.menuAdmin ul{ /* all lists */
margin:0;
padding:0;
list-style: none;
}
.menuAdmin li { /* all list items */
margin:0;
padding:0;
}
.menuAdmin > ul { /* first level list*/
float: right;
}
.menuAdmin > ul > li { /* first level list items*/
float: left;
}
.menuAdmin ul ul { /* second and third level list */
position: absolute; /* remove from flow */
display: none; /* hide by default */
}
.menuAdmin ul ul ul { /* third level list */
top: 0;
left: 100%;
}
.menuAdmin li:hover > ul { /* first level list inside of a hovered item */
display: block;
}
.menuAdmin a { /* all links */
color:#fff;
padding:0.1em 0.3em 0.2em 0.3em;
text-decoration:none;
font-size:12px;
display:block;
width:130px;
background-color: #0d497d;
border:1px solid #78B9EF;
border-radius:5px;
}
.menuAdmin li:hover > a { /* links inside hovered list item */
color:#000;
background-color:#78B9EF;
}
As already answered, > means "child" (a.k.a. direct descendant)
See demo at http://jsfiddle.net/7rMgu/5/
I have a CSS dropdown which is basically this: http://jsfiddle.net/2RgmH/
<ul id="menu">
<li><span>Example 1</span>
<ul>
<li><span>Level 2-A-1</span></li>
<li><span>Level 2-A-2</span></li>
<li><span>Example 2</span>
<ul>
<li><span>Example 3</span>
<li><span>Level 3-A-2</span></li>
<li><span>Level 3-A-3</span></li>
</ul>
</li>
<li><span>Level 2-A-4</span></li>
</ul>
</li>
<li><span>Level 1-B</span></li>
<li><span>Level 1-C</span></li>
<li><span>Level 1-D</span></li>
<li><span>Level 1-E</span></li>
</ul>
#menu > li > ul li > ul{ /* Third Level & beyond */
display:none;
background:#068;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
top:0;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}
I would like Level 3 to line up with Level 2. Changing the 3rd level dropdown to position:relative almost does this, but it increases the size of the Example 2 to the size of the 3rd level menu - not good.
Where am I going wrong?
Edit:
I should have linked to the actual example, apologies. The page I'm working on is here: http://gmnscouts.org.uk/index2.php/ - it's the second menu. If you go to Counties > Activities, you will see my problem. The li stretches to accomodate the ul. This is with it set to relative. Setting it to absolute pushes the menu to the top, which is also unwanted behaviour.
Add this CSS:
ul.children li ul.children {
position: absolute;
left: 100%;
top: 0;
}
ul.children > li { position: relative; }
Through absolute positioning the third-level menu will not take up any space because it will be in its own layer.
I got a reallly simple drop-down menu but got a problem with the submenus width.
See it here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
My HTML is:
<div id="navigation">
<div id="menu-dropdown">
<ul class="menu">
<li class="menu_punkt">Frontpage</li>
<li class="menu_punkt">Who are we?</li>
<li class="menu_punkt">This is a test
<ul>
<li>Your profile</li>
<li>New profile</li>
</ul>
</li>
<li class="menu_punkt">SOS Profile
<ul>
<li>Your profile</li>
<li>New user</li>
</ul>
</li><li class="menu_punkt">Log ind</li>
</ul>
</div>
</div>
and my CSS is:
/*horisontal navbar*/
#menu-dropdown {
list-style: none;
position: absolute;
top: 600px;
}
#menu-dropdown ul li {
float:left;
list-style-type: none;
font-size: 0.8em;
}
#menu-dropdown li ul {
position: absolute;
display: none;
background-color:#cdc3a2;
padding: 0px;
margin-bottom:1px;
}
#menu-dropdown ul ul li {
clear: both;
}
#menu-dropdown ul li a {
display: block;
padding: 10px;
color:#102B47;
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size: 1em;
}
#menu-dropdown ul li a:hover {
background-color: #cdc3a2;
}
#menu-dropdown li:hover ul, li.over ul {
display: block;
}
You can see my problem here:
http://dl.dropbox.com/u/70953/SOSfrontpage.html
Regards
- Mestika
Add a width to the submenu anchors
.menu ul li a { width:200px;}
Also add the hover to the li (not teh anchor) that way the top menu stays selected when you are in the submenus
#menu-dropdown ul li:hover, #menu-dropdown ul li.hover {
background-color: #cdc3a2;
}
I think you should add a width to the menu-dropdown ul li class.
A great way to build a css drop down menu is son of a suckerfish.
Yes JAO is right u shoud give width to li like this
#menu-dropdown ul ul li {
clear:both;
width:107px;}
you can get more clue from here http://www.cssnewbie.com/example/css-dropdown-menu/
Try:
.menu ul li li {width: 100%}
when I learnt to write css dropdown menus I based a lot of experiments on the ton of examples on this site : http://www.cssplay.co.uk/menus/ - very clear css / html examples, minimal, clean code
hope it helps :)