I'm running a Wordpress site, and having some trouble getting the dropdown menus in Chrome to show up. My CSS is here: http://pastebin.com/v291BmHP
and the menu code is here:
<div class="menu">
<ul>
<li class="current_page_item">
Home
</li>
<li class="page_item page-item-2">
About Us
<ul class='children'>
<li class="page_item page-item-105">
History
</li>
</ul>
</li>
</ul>
It works fine in IE and Firefox. Thanks!
Take out display block in this rule:
#access ul li:hover ,
#access ul ul :hover {
color: #FFF; /* HOVER COLOR */
display: block; /* DELETE */
background-image: url('images/keating/nav_hover.jpg');
background-repeat: repeat-x;
}
Related
https://codepen.io/arandomcodepenuser/pen/NWjYGwo
Ok, so I have this top navbar, and the problem is that I can't change the html only the styling, because I am using a Wordpress plugin, and this navbar has block elements on the navbar, and there's one of them that has a dropdown within the element and not below, and I can't use javascript to change this, I am wondering if it's possible for the dropdown embedded within the li element to push down the other elements on the navbar when it appears on hover.
Here's the html:
<div>
<ul class="top-bar__menu">
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280208" class="">
<span>About</span>
<ul class="sub-menu">
<li id="menu-item-268209" class=""><span>About Us</span></li>
<li id="menu-item-265276" class=""><span>Find Us</span></li>
<li id="menu-item-280209" class=""><span>Our Team</span></li>
</ul>
</li>
</ul>
</div>
Here's the css styling for the dropdown menu:
.sub-menu {
display: block;
}
.sub-menu li {
clear:both;
width: 100%;
}
ul.sub-menu {
display: inline;
background-color: #fff;
max-width: 100px;
}
I am new to wordpress and a would like to fully expand menu bar in the header on mobile version, but not in desktop. How can I do it in CSS? Here is the code I try, but not success:
.menu-item {
display: none;
}
.open>.menu-item {
display:block;
}
here is the html code:
<div id="primary-menu" class="menu"><ul>
<li class="page_item page-item-77 page_item_has_children current_page_item">
Facilities
<ul class='children'>
<li class="page_item page-item-98">Printing</li>
<li class="page_item page-item-181">Scanning
</li>
</ul>
</li>
<li class="page_item page-item-14">welcome</li>
</ul></div>
you are close. use css media query like so
#media only screen and (max-width:600px) {
.menu-item{
display: block;
}
}
and have the default just be
.menu-item{
display: none;
}
play arround with the max width as it sets the css rules below it when the screen is below that width.
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?
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.
I'm using wordpress 3.2.1 and worked on the wp_nav_menu to get a customized "Top navigation menu" that looks like this:
<ul id="nav-list">
<li>HOME</li>
<li>THE ASSOCIATION</li>
<ul class="sub-menu">
<li>
<a>WHO WE ARE</a>
</li>
</ul>
<li>CONTACTS</li>
<li>PRODUCTS</li>
<ul class="sub-menu">
<li>
<a>SHOES</a>
</li>
<li>
<a>UMBRELLAS</a>
</li>
</ul>
</ul>
the css I have for the menu is:
#nav-list{
float:left;
margin-left:290px;
}
#nav-list li
{
display:inline ;
padding:4px 18px 4px 0 ;
}
.sub-menu
{
float:left;
display:none;
}
ul#nav-list li:hover ul.sub-menu
{
background:red;
position:absolute;
top:20px;
z-index:9999;
display: block;
}
The sub-menus are by default hidden but they display on their parent's hover.Everything works fine but on the parent's hover the sub-menu is absolutely posiitoned with left=0 and I want it to be right under the parent button!How can I achieve that?
thanks
Luca
just set the parent li's position to relative; #nav-list li{position:relative}
i did it up on jsfiddle for ya, fyi i took out the margin-left on the #nav-list just so its more clear.
http://jsfiddle.net/jalbertbowdenii/deVYx/