I need help with my dropdown menu.
What I want to achieve is to hide my sub menu as well as my sub child menu. Also, I want to the sub list item to only show only if I hover to the list items that I want.
Thank you in advance. Your help very much appreciated!
This is my CSS:
#access ul ul a { color: #fff; }
#access { position:relative; float:left; height:19px; margin-left:15px; }
#access ul {list-style-type:none; margin:0px; padding:0px;}
#access li {float: left;position: relative; }
#access a { height:19px; display: block; padding:3px 15px 0 15px; text- decoration: none;font-size: 14px; font-family:'LeagueGothicRegular'; color: #ffffff;}
#access ul ul { display: none; float: left; margin: 0; position: absolute; top: 10px; left: 0; width: 150px; z-index: 99999; }
#access ul ul ul { left: 100%; top: 0; }
#access ul ul a {
margin-top:1px;
background: #000000;
color: #ffffff;
font-size: 14px;
font-weight: normal;
height: 19px;
line-height: 1.4em;
padding:2px 15px 0 15px;
width: 157px;
text-decoration: none; font-family:'LeagueGothicRegular', Abadi MT Condensed , Charcoal, sans-serif; color: #ffffff;}
#access li a:hover { color: #ed1c24; }
/* I believe HERE is the problem */
#access li:hover ul { display: block; color: #ffffff;}
#access a:focus {color: #ed1c24;}
#access .current_page_ancestor > a { color:#ed1c24;}
I managed to solve my problem. This worked for me.
#access ul li:hover > ul {
display: block;
}
The line you mention does in fact affect your menu. Don't use display:block unless you want to show it, and position:relative also may throw off the positioning.
This is a fairly simplistic solution for it. You will have to change the classes to work with the ones that wordpress uses. I don't have a copy which I can use at the moment to be more helpful.
ul.menu {
background:#222;
color:#FFF;
padding:0;
margin:0;
}
ul.menu a {
text-decoration:none;
display:inline-block;
padding: 10px;
color:inherit;
}
ul.menu li {
display:inline-block;
position:relative;
}
ul.menu li:hover {
background:#777;
color:#00F;
}
ul.menu > li.submenu > ul.menu {
display:none;
position:absolute;
top:100%;
left:0;
}
/* For submenus put them on the right side */
ul.menu > li.submenu > ul.menu ul.menu {
display:none;
position:absolute;
top:0;
left:100%;
}
ul.menu > li.submenu:hover ul.menu,
ul.menu > li.submenu li.submenu:hover ul.menu {
display:block;
}
<ul class="menu">
<li class="submenu">Test
<ul class="menu">
<li class="submenu">Test 2
<ul class="menu">
<li>Test 3
</ul>
</li>
</ul>
</li>
</ul>
Related
I want to make navigation menu like the picture above with hover on Menu. This is my sample code for the navigation menu.
<div id="menu">
<ul>
<li>Menu1
<ul class="submenu">
<li>Menu1Sub1</li>
<li>Menu1Sub2</li>
<li>Menu1Sub3</li>
<li>Menu1Sub4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Menu2Sub1</li>
<li>Menu2Sub2</li>
<li>Menu2Sub3</li>
</ul>
</li>
...
</ul>
</div>
Submenu position are in a line and I also want Submenu position to be exactly same for each Menu if possible.
How to do this with css?
this is what I tried so far not working as I intended.
#menu {
text-decoration:none;
}
#menu li {
line-height:20px;
float:left;
}
#menu li > ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul li {
line-height:13px;
float:left;
position:relative;
}
Any help would be very appreciated.
try this code:
#menu {
position: relative;
background-color: black;
text-decoration:none;
}
#menu li {
background-color: green;
padding: 10px;
height: 30px;
list-style: none;
line-height:30px;
float:left;
}
#menu li > ul {
display: none;
}
#menu > ul > li {
border: 2px solid white;
}
#menu > ul > li:hover {
border: 2px solid black;
}
#menu li:hover > ul {
display: block;
position: absolute;
top: 54px;
left: 0;
}
#menu li ul li {
float:left;
position:relative;
}
DEMO jsfiddle
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
What css do I need to centrally align the top level nav in my nav bar? I've been playing around with it for ages but can't get it sorted.
HTML Code
<ul id="nav">
<li class="level0 nav-1 first level-top parent">
<a href="#" class="level-top" > <span>Women</span></a>
<ul class="level0">
<li class="level1 nav-1-1 first"><a href="#" ><span>Tops</span></a></li>
<li class="level1 nav-1-2 last"><a href="#" ><span>Accessories</span></a>/li>
</ul>
</li>
<li class="level0 nav-2 level-top">
<a href="#" class="level-top" ><span>Men</span></a>
</li>
<li class="level0 nav-3 level-top">
<a href="#" class="level-top" ><span>Accessories</span></a>
</li>
</ul>
CSS Code
/********** < Navigation */
.nav-container {
background-color: #FFF;
border-color: #444;
border-top-style: solid;
border-bottom-style: solid;
border-width: 2px; width: 100%; margin:10px 0 0 0; height: 28px;position: relative;
}
.nav-container select { margin: 18px 0; }
.nav-container select { width: 100% }
#nav { float: left;
font-size: 15px;
margin: 0;
width: 100%;
}
/* All Levels */ /* Style consistent throughout all nav levels */
#nav li { position:relative;text-align:center; }
#nav li.over { z-index:998; }
#nav a,
#nav a:hover { display:block; text-decoration:none; text-transform:uppercase; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }
/* 0 Level */
#nav li {
float: left;
padding: 4px 12px;
}
#nav li.active a { color: #999999; }
#nav a { color: #555555;
float: left;
font-weight: bold;
padding-right: 11px; font-family:Arial, Helvetica, sans-serif; }
#nav li.over a,
#nav a:hover { color: #999999; }
/* 1st Level */
#nav ul li,
#nav ul li.active,
#nav ul li.over { float:none; border:none; background:none; margin:0; padding:0; padding-bottom:1px; text-transform:none; }
#nav ul li.parent { }
#nav ul li.last { padding-bottom:0; }
#nav ul li.active { margin:0; border:0; background:none; }
#nav ul a,
#nav ul a:hover { float:none; padding:0; background:none; }
#nav ul li a { font-weight:normal !important; }
/* 2nd Level */
#nav ul,
#nav div { position:absolute; width:15em; top:30px; left:-10000px; border:1px solid #bbb; padding:3px 8px; background:#fcfcfc; }
#nav div ul { position:static; width:auto; border:none; padding:0; }
/* 3rd+ Level */
#nav ul ul,
#nav ul div { top:5px; }
#nav ul li a { padding:3px 0; color:#444 !important; }
#nav ul li a:hover { padding:3px 0;}
/* Show menu */
#nav li ul.shown-sub,
#nav li div.shown-sub { left:-1px; z-index:999; }
#nav li .shown-sub ul.shown-sub,
#nav li .shown-sub li div.shown-sub { left:100px; }
.flex-direction-nav {display:none;}
/********** Navigation > */
EDIT
I was able to center the top level by changing to this code...
/* 0 Level */
#nav li { float: none; display:inline-block; }
But this made my second nav level items buch up together on one line?
change the css to this,
#nav {
font-size: 15px;
margin: 0 auto;
width:310px;
}
give #nav a fixed width and remove the float:left;
ul {text-align: center; width:100%}
ul li {display: inline-block; float: none;}
You should write your css like this.. I mean ul should be in full width and text-align:center property, its li should have display: inline-block property and it should not float to left or right;
It is not happening because ul has 100% width.
If you want ul to be in center, then its parent element must have fixed width and text-align:center.
Here is the fiddle.
Hi I cannot figure out how to change the size of the child item of the CSS menu (The parent has an image background, the child should have a background color).
I tried something like:
ul > li > a:hover {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
but it is all mixed with other elements. Can you please help me figure it out?
HTML:
<div id="menu">
<ul>
<li><a id="menu1" href="#">Parent1</a></li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
<li>Parent3</li>
<li>Parent4</li>
<li>Parent5</li>
</ul>
</div>
CSS:
#menu {
position:absolute;
top:133px;
left:0px;
width:900px;
height:50px;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
height:50px;
}
ul li a:hover {
background: #BBBBBB;
}
li:hover ul {
display: block;
position: absolute;
left:0px;
}
li:hover li {
float: left;
font-size: 11px;
}
li:hover a {
background: #3b3b3b;
}
li:hover li a:hover {
background: #CCC;
}
Thank you very much for your help in advance!
Hope following changes will work for you. Here is the fiddle link. Followings are your css chagnes
#menu {
/*position:absolute;
top:0;
left:0px;*/
width:900px;
height:22px;
background-color:#000;
}
ul {
font-family: Arial, Verdana;
font-size: 14px;
line-height:22px;
margin: 0;
padding: 0;
list-style: none;
text-align:center;
}
ul li {
display: block;
float: left;
position:relative;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
/*padding: 5px 15px 5px 15px;*/
background-image: url(../images/menu1.png);
white-space: nowrap;
width:178px;
line-height:22px;
}
ul li:hover a {
background: #BBBBBB;
}
ul li ul {
display: none;
widht:200px;
position:absolute;
left:0;
top:22px;
}
ul li ul li {
float: none;
font-size: 11px;
}
ul li ul li a {
background: #3b3b3b;
background-image:none!important;
}
ul li ul li a:hover {
background: #CCC;
}
ul li:hover ul {
display: block;
position: absolute;
left:0px;
}
To add a background color to your child sub menu:
ul li ul li {
// rules
}
You can also add class to your list items to make it more manageable. For example, you can add a class to the ul of your child menu:
<li>Parent2
<ul class="sub-menu">
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>
</li>
Then you can simplify the css to:
.sub-menu li {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It is good to retain the same width so that you can avoid that weird movement.
Try this
ul li ul li a:hover {
display:block;
background:#000;
float:left;
width:178px;
height:25px;
}
DEMO
I don't know how you want the result to look exactly but you could also use the + selector in your css like this:
ul > li > a:hover+ {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
The + selector as you see after a:hover means that the next element directly after the a:hover-tag will be selected and is this case it will be a ul
You can also specify the element with +ul if you want the ul to be a list and not a flat one like this:
ul > li > a:hover+ul {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
Like this you know that you will only affect the element next to the hovered one
Solution
ul > li:hover > li > a {
display:inline-block;
background:#000;
float:left;
width:120px;
height:25px;
}
It can be as per requirement
ul > li:hover li a { }
I have edited this post as it has partially solved my problem. However, i am faced with a new problem now and i do not wish to create a new question in case its deemed of spamming. currently, my add subject, drop subject, delete subject, manual crawl is not centralised even though i have specified it to be text-align center in #menu li li a. The sub menu's executive summary is also cut off. May I know how can i expand the submenu and centralise all my text?Thank you!
Here is my code (i am really sorry because i do not have a jsfiddle acct and is on the waiting list):
HTML
<div id="menu">
<ul>
<li><a href="#" >Home</a></li>
<li><a href="#" >Executive Summary</a></li>
<li><a href="#" > Visual Analytics</a></li>
<li><a href="#" >Settings</a>
<ul>
<li>Add Subject</li>
<li>Delete Subject</li>
<li> Edit Subject</li>
<li><a href="#" >Manual Crawl</a></li>
<li><a href="#" >Executive Summary</a></li>
</ul>
</li>
</ul>
CSS
#menu {
position: relative;
float: left;
width: 1200px;
height: 35px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
padding: 0;
background: #000;
text-align: center;
}
#menu ul {
position: relative;
list-style: none;
display: inline-block;
margin: 0;
padding: 0;
}
#menu li {
position: relative;
float: left;
height: 100%;
padding: 0;
line-height: 35px;
}
#menu a {
position: relative;
height: 100%;
width: auto;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu ul ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);
}
#menu li:hover ul {
display:block;
position: absolute;
top: 35px;
left: 0;
margin: 0;
padding: 0;
z-index: 1;
}
#menu li li a{
height: 35px;
width: 100%;
float: left;
text-decoration: none;
padding: 0 0 0 25px;
margin: 0 3px;
color: #fff;
text-align: center;
}
#menu li li a:hover{
background: rgba(255,255,255,0.5);
}
This should get you running:
#menu ul, #menu li {
list-style:none;
margin:0;
padding:0;
}
#menu ul li {
float:left;
position:relative;
}
#menu ul li a {
display:block;
height:35px;
margin-right:5px;
}
#menu ul li ul {
display: none;
background-color: rgba(0,0,0,0.5);
}
#menu ul li:hover ul, #menu ul li.hover ul {
display: block;
position: absolute;
top:40px;
left:0
margin: 0;
padding: 0;
z-index:1;
}
#menu ul li ul li a {
display:block;
height:35px;
width:130px
background-color: rgba(0,0,0,0.5);
}
#menu ul li ul li a:hover{
background:rgba(255,255,255,0.5);
}
One thing you missed is to set position:relative for the PARENT of the sub-menu. This is important because this resets the origin for the child item. I've also cleaned things up and removed some redundant declarations. You may need to re-style your text a bit.
One important point: All styling of the menu (other than positioning) should be applied to the A-tag, not the LI. This includes fonts. bg colours etc.
See: http://preview.moveable.com/jm/ilovelists/
Use a combinaison of position: relative and position: absolute; to fix your problem
See the JsFiddle http://jsfiddle.net/VDmJj/1/
Add :
1) position:relative; to #menu ul li
2) top:30px; left:10px; to #menu ul li:hover ul, #menu ul li.hover ul
3) width:180px; to #menu ul li ul (this can depend on the sub menu items)
This would give you the desired result by doing minimal changes. Though the css is a bit complicated for the task it is performing i.e. it can be done pretty simple by following method:
http://jsfiddle.net/tPBmV/
Here is another fiddle i found based on jquery.
http://jsfiddle.net/davidThomas/YfjzP/
Its not made by me but you could find it useful if you are comfortable enough to implement jquery.
Check out the fiddle. Did a lot of CSS changes: http://jsfiddle.net/wAGGA/
CSS:
#menu {
width:1200px;
height:35px;
padding:0px;
clear:both;
background-color:#000;
}
#menu ul{
list-style:none;padding:0 0 0 400px;margin: auto;display:block;
}
#menu ul li {
list-style:none;display:inline;float:left;width:auto;height:35px;padding:0px;line-height:35px; font-family:Arial, Helvetica, sans-serif; font-size:13px; }
#menu ul li a{
display:block;height:35px; width: auto;float:left;text-decoration:none;padding:0 0 0 25px; margin:0px 3px 0px 3px;color:#fff;text-align:center;}
#menu ul li ul {
display: none;
width: 200px; /* Width to help Opera out */
background-color: rgba(0,0,0,0.5);}
#menu ul li:hover ul, #menu ul li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index:1;
top: auto;
margin-top: 35px;
right: 0;
}
#menu ul li ul li {display: block; float: none; width: 100%}
#menu ul li ul li a{
display:block;
height:35px;
text-decoration:none;
padding:0 0 0 25px;
margin:0px 3px 0px 3px;
color:#fff;
text-align:center;
}
#menu ul li ul li a:hover{
background:rgba(255,255,255,0.5);
}
add margin-top to sub menu like this
#menu ul li:hover ul, #menu ul li.hover ul{
margin-top:40px
}