html / css dropdown menu not dropping - html

edit
JSfiddle
Simple question, i've got the following code but i dont know what to add to my css to lift the display:none; If you need further explaining feel free to ask in the comments.
<nav>
<ul>
<li>
<a href="[[~[[+id]]]]" title="[[+pagetitle]]">
[[+longtitle:default=`[[+pagetitle]]`]]
</a>
<ul>
<li>
<a href="#" title=lorem>
[[Wayfinder? &startId=`[[+id]]` &level=`2` ]]
</a>
</li>
</ul>
</li>
</ul>
</nav>
/** Navigation **/
#nav ul{list-style: none; padding: 0; display: block;}
#nav ul li{display: inline-block; position: relative;}
#nav ul li a{ display: block; padding: 5px 8px; text-decoration: none; font-size: 16px; }
#nav ul li ul{
position: absolute;
left: 0px;
background: rgba(0,0,0,0.8);
border-radius: 0 0 5px 5px;
display: none;
z-index: 9000;
display:none;
}
.ie7 #nav ul li ul,
.ie8 #nav ul li ul{
background: url('../../assets/img/transparent-black.png') repeat;
}
#nav ul li.last ul{ right: 0px; left: auto; }
#nav ul li.last ul li a{ text-align: right; }
#nav ul li:hover ul,
#nav ul li ul:hover{ display: block; }
#nav ul li ul li{
display: block;
padding: 0;
overflow: hidden;
}
#nav ul li ul li a{
min-width: 100px;
margin: 0;
padding: 7px 14px;
color: #ffffff;
}
#nav ul li ul li:hover{ background: #f1f1f1; }
#nav ul li ul li a:hover{ color: rgba(253,183,46,1); }
nav li:hover > nav li ul li{
background-color:red;
overflow:visible;
}
nav li ul li{
display:none;
}

try this:
nav ul li ul li{
display:none;
}
nav ul li:hover > ul li{
display:block;
}
http://jsfiddle.net/vpZ5J/4/

You were trying to hide the li items in the sub-menu. Instead hide the submenu ul and then display it on hover. For that change this
nav li ul li{
display:none;
}
to
nav li ul{
display:none;
}
and add this
nav li:hover > ul{
display:block;
}
DEMO

Try adding this:
nav ul li:hover li,
nav ul li:hover ul{
display:block;
}
jsfiddle

Add the following rule:
nav li:hover, nav li:hover ul li{
display:block;
}
http://jsfiddle.net/vpZ5J/

I think what you are looking for is:
nav ul li:hover > ul {
display: block;
}
Also, you don't have div with id #nav, so all your styling is incorect, you should be using just nav

Related

What CSS rule should I write in this special case?

I've been following a web tutorial to create a cascading menu for a system I am developing, it is ok but I have the following problem on my 3rd level menu layer:
When my cursor is above a list item of 2nd layer:
When I move the cursor to the last layer, the link of the active list item changes it color, becoming invisible:
The structure is somewhat like that:
...
<nav>
<ul>
<li><a> Cadastro <a/>
<ul>
<li>
<a>Produtos<a/>
<ul>
<li>
<a>Adicionais<a/>
</li>
<li>
<a>Produtos<a/>
</li>
<li>
<a>"Tamanhos"<a/>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
and this is the css I'm using actually:
nav ul ul {
display: none;
background: #FFD200;
padding: 0;
width: auto;
position: absolute;
top: 100%;
z-index: 1;
}
nav ul ul li {
float: none;
position: relative;
z-index: 2;
}
nav ul ul li a {
padding: 10px 45px;
font-size: 17x;
color: #3F1312;
}
nav ul ul li a:hover {
background: #3F1312;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FFD200;
list-style: none;
width: 100%;
position: relative;
display: inline-table;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #3F1312;
}
nav ul li:hover a {
color: #FFD200;
font-size: 17px;
}
nav ul li:hover ul li a {
color: #3F1312;
}
nav ul li:hover ul li a:hover {
color: #FFD200;
}
nav ul li a {
display: block;
padding: 10px 45px;
color: #3F1312;
font-size: 17px;
text-decoration: none;
font-weight: bold;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
I need to know what css rule I have to apply to make it work. Any help is welcome.
You need to set :hover property to the li element and not to "a" element.
see the difference below
nav ul ul li a:hover {
background: #3F1312;
}
/* Replace below code instead of Above one*/
nav ul ul li:hover a {
background: #3F1312;
}
nav ul li:hover ul li a:hover {
color: #FFD200;
}
/* Replace below code instead of Above one*/
nav ul li:hover ul li:hover a {
color: #FFD200;
}
Edit
Checkout following rules, You will need to add these rules into your css to avoid third level menu problem
nav ul li:hover ul li:hover ul li a{
color: #3F1312;
background: #FFD200;
}
nav ul li:hover ul li:hover ul li:hover a{
color: #FFD200;
background: #3F1312;
}

Combining background for menu and dropdown

I just want to create a menu with drop down.. my question is I just want to merge background of main menu and the dropdown as the below image.. Please help me out..
image of the menu
http://s1369.photobucket.com/user/ashast1/media/Capture_zps0b0c58e6.png.html
jsfiddle for the menu
http://jsfiddle.net/6KPXC/
Here's a FIDDLE
.nav ul{list-style-type:none; position:relative;}
.nav ul li{position:relative; text-transform:uppercase; display:inline-block;}
.nav ul li:hover a{border:1px solid #d7d7d7;background:#fff;color:#f9852b; border-bottom:none;}
.nav ul li a{position: relative; padding:10px; color:#5E6062; display:block;border:1px solid #fff; z-index: 100;}
.nav ul li a:hover{position: relative; color:#f9852b;border:1px solid #d7d7d7; z-index:11; border-bottom:none;}
.nav ul li:hover ul{display:block;padding:20px;}
.nav ul ul{position:absolute; display:none; min-width: 200px; border:1px solid #d7d7d7; border-top: none; margin-top:-1px;left:-10px;z-index:10;}
.nav ul ul:after{position: absolute; content: ""; top: 0; right: 0; width: 100%; border-top:1px solid #d7d7d7;}
.nav ul ul li a, .nav li:hover li a{border:0px; color:#515151; text-transform:capitalize;padding:3px 10px;}
.nav ul ul li a:hover, .nav li:hover li a:hover{border:none; color:#515151; text-decoration:underline;}

Trouble with second nested menu

I'm having an issue with adding a child menu to my first drop down menu. Basically this is the structure I am going for:
<ul id="nav" class="sixteen columns">
<li>Home</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
And here is the CSS I am using:
#nav {
font-family: lanenar;
font-size: 1.2em;
z-index: 999;
position: relative;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display: block;
}
#nav ul {
padding: 0;
list-style: none;
position: relative;
display: inline-block;
background: #111;
}
#nav ul li {
float: left;
}
#nav ul li a {
padding: 5px 10px 5px 10px;
display: block;
color: #FFF;
text-decoration: none;
}
#nav ul li:hover {
background: #666;
}
#nav ul li:hover a {
color: #FFF;
}
#nav ul li:hover > ul { margin: 0px; padding: 0px;}
#nav ul li:hover > ul li { float: none; display: block;}
#nav ul li:hover > ul li a { color: #FFF; min-width: 150px;}
#nav ul li:hover > ul li a:hover {color: #FFF;}
#nav ul li {
position: relative;
}
#nav ul li ul {
position: absolute;
top: 28px;
left: 0px;
}
I am having a hard time figuring out what CSS I need to add to have the 2nd nested menu appear to the right when you mouseover Asia or Europe?
Any help would be much appreciated!
HTML
<ul id="nav" class="sixteen columns">
<li>Home
</li>
<li>Portfolio
<ul>
<li>Asia
<ul>
<li>Korea</li>
<li>China</li>
<li>Japan</li>
</ul>
</li>
<li>Europe
<ul>
<li>France</li>
<li>Germany</li>
<li>Italy</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
#nav {
width:800px;
margin:30px 50px;
padding: 0;
float:left;
}
#nav li {
list-style: none;
float: left;
padding:0 10px;
background-color:#367FB3;
color:white;
}
#nav li a:hover {
background-color:#52baff;
color:#fff;
}
//daf adf
/*--temp--*/
#nav ul ul li {
clear:left;
}
#nav ul ul {
position:absolute;
left:14em;
top:0;
}
#nav ul ul li a {
display:block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
/*--end temp--*/
#nav li a {
display: block;
padding: 3px 15px;
color: #242424;
text-decoration: none;
font-size:13px;
font-family:"Lato" !important;
}
#nav a:hover {
color:#367FB3;
}
#nav a:active {
color:#367FB3;
}
#nav li ul {
display: none;
width: 14em;
/* Width to help Opera out */
background-color:transparent;
z-index:666;
}
#nav li:hover ul, #nav li.hover ul {
display: block;
position: absolute;
margin:0px -10px;
padding:0px;
}
#nav li:hover ul ul {
display:none;
}
#nav li ul li:hover ul {
display:block
}
#nav li:hover li, #nav li.hover li {
float: none;
line-height:30px;
}
#nav li:hover li a, #nav li.hover li a {
background-color:#367FB3;
color:#fff;
font-size:13px;
font-family:"Lato" !important;
}
#nav li li a:hover {
background-color:#52baff;
color:#fff;
}
Working Fiddle
Added this to the Updated Fiddle as per SurjithSM suggestion
#nav li {
position: relative;
}
Updated Fiddle

Drop down menu keeps jumping to the right

Some how my drop down menu keeps jumping to the right instead of dropping down right underneath it's parent.
I've tried positioning it but that doesn't work since the position changes when the browserwindow changes size.
How do I get my drop down menu centered underneath the parent?
Html:
<div id="topnav">
<ul>
<li>CONTACT</li>
<li>BLOG</li>
<li>OVER ONS</li>
<li>GEDRAGSBEINVLOEDING</li>
<li>ONZE DIENSTEN
<ul>
<li class="topmargin">ONDERZOEK</li>
<li>ADVIES</li>
<li>LEZINGEN</li>
</ul>
</li>
<li>HOME</li>
</ul>
</div>
</div>
CSS:
#topnav { z-index:3;
padding-top:76px; }
#topnav ul li { list-style-type:none;
display:inline;
float:right;
}
#topnav ul li a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
padding-left:15px;
}
#topnav ul li a:link { color:#00aeef; }
#topnav ul li a:visited { color:#00aeef; }
#topnav ul li a:active { color:#f26532; }
#topnav ul li a:hover { color:#f26532; }
#topnav ul li a:focus { color:#f26532; }
#topnav li ul { position:absolute;
left:-999em;
list-style-type:none;
}
#topnav li ul li { border-top:0px;
clear:both;}
#topnav li:hover ul { left:auto; }
#topnav li:hover ul li { float:none;
display:block;
width:100%;
}
#topnav ul li ul li { text-align:center;
padding:10px 12px 10px 0px;
border-top:#FFF solid;
background-color:#00aeef;
width:120px;
}
.topmargin { margin-top:5px; }
#topnav li ul li a { font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
text-decoration:none;
padding-left:14px;
}
#topnav li ul li a:link { color:#FFF; }
#topnav li ul li a:visited { color:#FFF; }
#topnav li ul li a:active { color:#FFF; }
#topnav li ul li a:hover { color:#f26532; }
#topnav li ul li a:focus { color:#FFF; }
Change #topnav id to this
#topnav{
z-index:3;
padding-top:76px;
width:800px;
and add the folling id#topnav ul{
float:left;
}
#topnav li:hover ul
{left:80px;}
You can add this in or change your css
#topnav li:hover ul {
left: auto;
margin-left: -30px;
}
or
#topnav li ul {
left: auto;
list-style-type: none;
position: absolute;
padding: 0px;
}
Your nested ul tag seems to have some unnecessary padding applied by the user-agent stylesheet.
Try using:
#topnav li ul {padding: 0px;}
This way the padding of only the nested ul element will be affected.

Dropdown navigation menu bar is working in IE7 but not in FireFox

I have a dropdown bar -
<div class="buttonContainer">
<ul>
<li>
<a class="menu1one" href="">Dashboard</a>
</li>
</ul>
<ul>
<li>
<div class="noLink">Tasks</div>
<ul>
<li>View</li>
<li>Edit</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Dictionaries</div>
<ul>
<li>Needs</li>
<li>Activities</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
<li>
<div class="noLink">Admin</div>
<ul>
<li>User Accounts</li>
</ul>
<!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
CSS -
/*dropdown menu*/
.menu { float:left; width:100%; font-family: arial; border-top:1px solid #4c597f; background-color: #1079b5; min-width:950px; }
.menu .buttonContainer { padding:0 0 0 200px; }
.menu ul { padding:0; margin:0; list-style-type:none; }
.menu ul li { margin:0; float:left; position:relative; background-color:#153d71; }
.menu ul li a, .menu ul li a:visited { float:left; display:block; text-decoration:none; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li a:hover { background-color:#9fc1ed; color: #153d71;}
.noLink { display:block; color:#ddf; padding:0px 16px; line-height:25px; height:30px; }
.menu ul li:hover { width:auto; }
.menu ul li ul { display: none; }
/* specific to non IE browsers */
.menu ul li:hover ul { display:block; position:absolute; top:30px; left:0; width:154px; border-bottom:1px solid #000; }
.menu ul li:hover ul.endstop { left:-92px; }
.menu ul li:hover ul li ul { display: none; }
.menu ul li:hover ul li a { display:block; background:#1079b5; color:#000; height:auto; line-height:15px; padding:4px 16px; width:120px; border:1px solid #000; border-bottom:0; }
.menu ul li:hover ul li a.drop { background:#ccd no-repeat 3px 8px; }
.menu ul li:hover ul li a:hover { background-color: #153d71; color: #FFFFFF; }
.menu ul li:hover ul li a:hover.drop { background: #ccd no-repeat 3px 8px; }
.menu ul li:hover ul li:hover ul { display:block; position:absolute; left:153px; top:-1px; }
.menu ul li:hover ul li:hover ul.left { left:-153px; }
/* IE6 */
.menu ul li a:hover ul { display:block; position:absolute; top:30px; t\op:33px; background:#153d71; left:0; border-bottom:1px solid #000; }
.menu ul li a:hover ul.endstop { left: -92px; }
.menu ul li a:hover ul li a { display:block; background:#153d71; color:#000; height:1px; line-height:15px; padding:4px 16px; width:154px; w\idth:120px; border:1px solid #000; border-bottom:0; }
.menu ul li a:hover ul li a.drop { background:#ccd url('') no-repeat 3px 8px; padding-bottom:4px; }
.menu ul li a:hover ul li a ul { visibility:hidden; position:absolute; height:0; width:0; }
.menu ul li a:hover ul li a:hover { color:#000; background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover.drop { background: #ccd url('') no-repeat 3px 8px; }
.menu ul li a:hover ul li a:hover ul { visibility:visible; position:absolute; top:0; color:#000; left:153px; }
.menu ul li a:hover ul li a:hover ul.left { left:-153px; }
The dropdown menu is working well or showing up on hover in IE7 but not responding in Firefox.
Could anybody help me with this please?? I tried position : relative for inner li a:hover and it shows the menu but extends the whole div till its end. What is to be changed here?
Also, i don't want to use javascript/jquery for this.
-thanks
EDITED - I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.
I just tested on IE7 its working fine to me
http://jsfiddle.net/vcN5g/
I have found the solution to get it to work. I added 'position: absolute;' attribute to the .menu{} in the css. That made it work... Thanks.