I try to create a dropdown menu with CSS for a Wordpress template. When I hover a menuitem (e.g. "Cupcake Ipsum" like you can see on the picture), the whole menu is displayed in a weird way.
I hope the picture is self-explanatory enough. The menuitem "Cupcake Ipsum" is hovered on the bottom view of the menu:
My HTML code (from firebug) is:
<div id="menu" role="navigation">
<div class="menu">
<ul>
<li class="current_page_item">
<a title="Home" href="http://whatever.com/wordpress/">Home</a>
</li>
<li class="page_item page-item-40">
Cupcake Ipsum
<ul class="children">
<li class="page_item page-item-388">
Red Velvet Cupcake
</li>
<li class="page_item page-item-390">
Mango Cupcake
</li>
<li class="page_item page-item-392">
Chocolate Cupcake
</li>
</ul>
</li>
<li class="page_item page-item-43">
Bacon Ipsum
<ul class="children">
<li class="page_item page-item-405">
</ul>
</li>
<li class="page_item page-item-45">
Veggie Ipsum
<ul class="children">
<li class="page_item page-item-397">
Tomato
</li>
<li class="page_item page-item-399">
Lettuce
</li>
<li class="page_item page-item-401">
Broccoli
</li>
<li class="page_item page-item-403">
Onion
</li>
</ul>
</li>
</ul>
</div>
</div>
My CSS code is:
#menu ul li a {
text-decoration: none;
color: #CCCCCC;
font-size: 16px;
padding: 10px;
display: block;
position:relative;
}
#menu ul li a:hover {
background-color: #006699;
color: #FFFFFF;
}
#menu ul li ul li a {
clear: left;
line-break: strict;
background-color: #006699;
padding: 5px;
font-size: 10px;
}
#menu ul li ul li {
display: block;
float: none;
clear: left;
}
.menu ul li {
display: inline-block;
position: relative;
}
.menu li ul {
position: absolute;
}
.menu li:not(:hover) ul {
display: none;
}
I want to create a dropdown menu where one subitem is below the other. Tried a lot but I cannot manage to arrange the subitems correcly.
What did you omit? Your exact code in this fiddle works, check your css, you have something overriding some of your rules, check each element, see when the rules you pasted here are overwritten.
Can you put your code in a jsfiddle? Until then, I can tell you that one of your sub elements of the main <li> is display: block; and pushing the other top level <li>'s out of placement.
Related
I was trying to make dropdown menu using only css, however it doesn't work in my case.
It's kinda working when I don't put position:absolute at .dropdown_content in CSS, but even when I do that, dropdown doesn't work.
HTML:
<nav>
<ul>
<div class="dropdown">
<li>Game order</li>
<div class="dropdown_content">
Half-life
Half-life 2
Half-life EP1
</div>
</div>
<li>Portal series</li>
<li>Half Life Alyx</li>
</ul>
</nav>
CSS:
.dropdown {
position:relative;
display:inline-block;
}
.dropdown_content {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
min-width: 160px;
display:none;
}
.dropdown_content a {
color:white;
text-decoration: none;
display:block;
padding: 12px 16px;
}
}
.dropdown:hover .dropdown_content {
display: block;
}
To keep things simple, I have reduced your code to a bare minimum.
I'm not sure exactly how you want it to look, but here's a possible solution.
When making css only menu's I try to stick to a nested list of <ul> and <li>'s.
This makes it clearer to read, and keeps the semantics in order.
Ther is no need for container divs within. (like the <div class="dropdown_content"> in your code)
The HTML is a nested list. Initially we hide the nested ul, and only show it when it's parent is hovered over. By using .dropDown li:hover>ul you only target the ul that is DIRECTLY under the hovered li. That way you dan nest as deep as you want.
.dropDown ul {
display: none;
position: absolute;
background: white;
border: 1px solid red;
}
.dropDown li:hover>ul{
display: block;
}
<ul class="dropDown">
<li>Game order
<ul>
<li>Half-life</li>
<li>Half-life 2</li>
<li>Half-life EP1</li>
</ul>
</li>
<li>Portal series</li>
<li>Half Life Alyx</li>
<li>deeper nesting
<ul>
<li>level 1</li>
<li>more here
<ul>
<li>level 2</li>
<li>more here
<ul>
<li>level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm relatively new to SCSS and try to improve my skills using a linter. I have this little example, where I want to display a submenu only if the parent menu-item is hovered. While this code is working, the linter gives me a "Class should be nested within its parent Pseudo-class".
.menu-item {
.submenu {
display: none;
}
&:hover .submenu {
display: block;
}
}
<ul>
<li class='menu-item'>
<a href=''>
Menu 1
</a>
<ul class='submenu'>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
</ul>
</li>
</ul>
I have no idea how the :hover part could be nested into the .submenu part. Can you help?
I found the solution and it was so simple, I just had to nest the .submenu into the hover part :(
.menu-item {
.submenu {
display: none;
}
&:hover {
.submenu {
display: block;
}
}
}
<ul>
<li class='menu-item'>
<a href=''>
Menu 1
</a>
<ul class='submenu'>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
</ul>
</li>
</ul>
Your SASS code will compiled to the below CSS code which is working fine. Just make sure that your SASS code is properly compiling to CSS.
.menu-item .submenu {
display: none;
}
.menu-item:hover .submenu {
display: block;
}
<ul>
<li class='menu-item'>
<a href=''>
Menu 1
</a>
<ul class='submenu'>
<li>Submenu 1.1</li>
<li>Submenu 1.2</li>
</ul>
</li>
</ul>
A particular nested list, with parent div id and list items with different class... I can't make it to assign correctly background colors.
For example:
<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
<aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
<ul class="parent-sidebar-menu">
<li class="current_page_ancestor">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
What CSS code would you use to change background colour of each li/a item belonging to class current_page_ancestor, page_item and current_page_item(each one should have different colors)
For first a you can use > or direct-child selector and for others you can just select with parentClass->a
.current_page_ancestor > a {
color: black;
}
.page_item a {
color: green;
}
.page_item.current_page_item a {
color: red;
}
<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
<aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
<ul class="parent-sidebar-menu">
<li class="current_page_ancestor">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
ul {
/* reset lists */
list-style: none;
padding: 0;
margin: 0;
}
ul li a {
text-decoration: none;
}
/* specific styles */
.page_item a {
display: block;
padding: 10px 20px;
border-bottom: 1px solid white;
color: white;
background-color: #333;
}
.page_item a:hover,
.page_item.current_page_item a{
background-color: #666;
}
.parent-sidebar-menu {
width: 200px;
}
.current_page_ancestor > a {
display: block;
padding: 10px 20px;
color: green;
background-color: #fff;
text-align: right;
}
.current_page_ancestor > a:before {
content: "Back to >> ";
font-size: 14px;
color: #000;
margin-right: 10px;
}
<div id="sidebar" class="widget-area">
<div class="theiaStickySidebar">
<aside id="advanced_sidebar_menu-2" class="widget advanced-sidebar-menu">
<ul class="parent-sidebar-menu">
<li class="current_page_ancestor">
About Us
<ul class="child-sidebar-menu">
<li class="page_item">
Welcome
</li>
<li class="page_item current_page_item">
Mission and philosophy
</li>
</ul>
</li>
</ul>
</aside>
</div>
</div> <!-- #sidebar -->
This is slightly different in that instead of using each class to do something different I am using similar things to do the same thing and changing based on state change. The ancestor page is treaded differently than the child sidebar menu. Hope this helps.
Very basic CSS issue as I can't get the current page to look different in menu. Any suggestion greatly appreciated!
Here is the genesis function
//* Add My New Menu
function my_new_menu() {
echo '<ul class="menu gn responsive-menu">
<li class="menu-item"> New Joke Book!</li>
<li class="menu-item"> Kids Jokes </li>
<li class="menu-item"><a href="/animal-jokes/"> Animal Jokes /a></li>
<li class="menu-item"> Zoo Jokes </li>
<li class="menu-item"> Contest </li>
</ul>';
}
add_action( 'genesis_header_right', 'my_new_menu' );
Here is the CSS
.gn a {
border: 1px solid transparent;
border-radius: 3px;
color: #438ed9;
display: block;
font-weight: 400;
height: auto;
line-height: 1;
margin-top: 0.2rem;
padding: 0.8rem 1rem;
position: relative;
text-decoration: none;
}
.gn a:hover,
.gn .current-menu-item > a,
.gn .sub-menu .current-menu-item > a:hover {
color: #fff;
background-color: #009900;
}
The easiest solution is to add your ".current" class to the corresponding "li" item.
So, for example if you are on the "kids-joke-book" page your "ul" should look like this:
<ul class="menu gn responsive-menu">
<li class="menu-item current"> New Joke Book! </li>
......
</ul>
You should do this method on every single subpage of your site where you use this menu, and add the "current" class to the correct menu item.
("current" class is an example name, it has the styles what you would like to add to the right menu item.)
I have constructed a three-level dropdown using CSS. It works until I add this to the CSS:
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
The HTML is basically just two unordered lists (by the way, the "feelings" list and the "needs" list have the same content -- that will change eventually -- this is just for experimenting!):
<div class="feelings">
<ul class="nav feelings">
<li class="feelings" id="feelings"> FEELINGS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="needs">
<ul class="nav needs">
<li class="feelings" id="needs"> NEEDS
<ul>
<li>AFRAID
<ul>
<li>apprehensive</li>
<li>dread</li>
<li>foreboding</li>
<li>frightened</li>
<li>mistrustful</li>
<li>panicked</li>
<li>petrified</li>
<li>scared</li>
<li>suspicious</li>
<li>terrified</li>
<li>wary</li>
<li>worried</li>
</ul>
</li>
<li>ANNOYED
<ul>
<li>aggravated</li>
<li>dismayed</li>
<li>disgruntled</li>
<li>displeased</li>
<li>exasperated</li>
<li>frustrated</li>
<li>impatient</li>
<li>irritated</li>
<li>irked</li>
</ul>
</li>
<li>ANGRY
<ul>
<li>enraged</li>
<li>furious</li>
<li>incensed</li>
<li>indignant</li>
<li>irate</li>
<li>livid</li>
<li>outraged</li>
<li>resentful</li>
</ul>
</li>
<li>AVERSION
<ul>
<li>animosity</li>
<li>appalled</li>
<li>contempt</li>
<li>disgusted</li>
<li>dislike</li>
<li>hate</li>
<li>horrified</li>
<li>hostile</li>
<li>repulsed</li>
</ul>
</li>
<li>CONFUSED
<ul>
<li>ambivalent</li>
<li>baffled</li>
<li>bewildered</li>
<li>dazed</li>
<li>hesitant</li>
<li>lost</li>
<li>mystified</li>
<li>perplexed</li>
<li>puzzled</li>
<li>torn</li>
</ul>
</li>
<li>DISCONNECTED
<ul>
<li>alienated</li>
<li>aloof</li>
<li>apathetic</li>
<li>bored</li>
<li>cold</li>
<li>detached</li>
<li>distant</li>
<li>distracted</li>
<li>indifferent</li>
<li>numb</li>
<li>removed</li>
<li>uninterested</li>
<li>withdrawn</li>
</ul>
</li>
<li>DISQUIET
<ul>
<li>agitated</li>
<li>alarmed</li>
<li>discombobulated</li>
<li>disconcerted</li>
<li>disturbed</li>
<li>perturbed</li>
<li>rattled</li>
<li>restless</li>
<li>shocked</li>
<li>startled</li>
<li>surprised</li>
<li>troubled</li>
<li>turbulent</li>
<li>turmoil</li>
<li>uncomfortable</li>
<li>uneasy</li>
<li>unnerved</li>
<li>unsettled</li>
<li>upset</li>
</ul>
</li>
<li>EMBARRASSED
<ul>
<li>ashamed</li>
<li>chagrined</li>
<li>flustered</li>
<li>guilty</li>
<li>mortified</li>
<li>self-conscious</li>
</ul>
</li>
<li>FATIGUE
<ul>
<li>beat</li>
<li>burnt out</li>
<li>depleted</li>
<li>exhausted</li>
<li>lethargic</li>
<li>listless</li>
<li>sleepy</li>
<li>tired</li>
<li>weary</li>
<li>worn out</li>
</ul>
</li>
<li>PAIN
<ul>
<li>agony</li>
<li>anguished</li>
<li>bereaved</li>
<li>devastated</li>
<li>grief</li>
<li>heartbroken</li>
<li>hurt</li>
<li>lonely</li>
<li>miserable</li>
<li>regretful</li>
<li>remorseful</li>
</ul>
</li>
<li>SAD
<ul>
<li>depressed</li>
<li>dejected</li>
<li>despair</li>
<li>despondent</li>
<li>disappointed</li>
<li>discouraged</li>
<li>disheartened</li>
<li>forlorn</li>
<li>gloomy</li>
<li>heavy hearted</li>
<li>hopeless</li>
<li>melancholy</li>
<li>unhappy</li>
<li>wretched</li>
</ul>
</li>
<li>TENSE
<ul>
<li>anxious</li>
<li>cranky</li>
<li>distressed</li>
<li>distraught</li>
<li>edgy</li>
<li>fidgety</li>
<li>frazzled</li>
<li>irritable</li>
<li>jittery</li>
<li>nervous</li>
<li>overwhelmed</li>
<li>restless</li>
<li>stressed out</li>
</ul>
</li>
<li>VULNERABLE
<ul>
<li>fragile</li>
<li>guarded</li>
<li>helpless</li>
<li>insecure</li>
<li>leery</li>
<li>reserved</li>
<li>sensitive</li>
<li>shaky</li>
</ul>
</li>
<li>YEARNING
<ul>
<li>envious</li>
<li>jealous</li>
<li>longing</li>
<li>nostalgic</li>
<li>pining</li>
<li>wistful</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Here is the CSS:
#charset "UTF-8";
/* CSS Document */
ul ul, ul ul ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
.nav feelings needs {
padding-left: 10px;
padding-right: 10px;
width: 200px;
color:#ff0000;
background-color:#ffffff;
}
.nav{
height: 39px;
border-radius: 3px;
min-width:500px;
border:1px solid #ddd;
background-color:#ffffff;
}
.nav li, .nav li li {
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
background-color:#ffffff;
}
.nav a {
width: 200px;
overflow:hidden;
}
.nav li a{
display: block;
}
.nav ul {
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
.nav ul ul {
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
position: relative;
}
.nav ul li {
display: block;
visibility:visible;
}
.nav li:hover > ul, nav li:hover * {
display: block;
visibility:visible;
z-index:1;
}
If I eliminate the first CSS item (setting the menu to two columns), the last level of the menu appears (the items in small letters as opposed to all caps). With the two-column CSS in place, the third level doesn't appear.
Here is a fiddle:
http://jsfiddle.net/Lq7NK/2/
Interestingly, on the fiddle, the third level does seem to be trying to appear a bit, but it's certainly not working the way I'd like it to, which is the third level appearing in a vertical column to the right of the second level item.
Any thoughts will be appreciated!
/* image below was added after original question, in response to a request for a picture */
The top screenshot in this picture shows what comes up now when I hover over the first feeling, AFRAID -- and it is actually pretty much what I want (though obviously it needs some prettifying): two sets of two-column dropdowns, namely, the one in all caps and the one in all small letters. (This is basically with the code shown above, but with one change, namely, removing ul ul to leave only ul ul ul as suggested by user3369554.) However, when I move the cursor, stuff starts jumping all over the place; the screenshot on the bottom shows one state, but things just jump all over in a very disconcerting way. For instance, I would like to be able to just move the cursor over to where ANGRY is at the top of the second column. But if I try to do that, it jumps to somewhere else. And if I go to that place, it jumps to still another location. If the both sets of emotions (all caps and all small letters) would hold still in the configuration shown at the top, and let me click on them, I'd be happy.
I don't know if I'm understanding well, but you can get the third level in a 2 column format to the right of the second level, if you replace:
ul ul, ul ul ul
for
ul ul ul
Demo: http://jsfiddle.net/QKkg4/
Is that what your're after?