I am using the menu widget Menus+ for a Wordpress site.
The widget is able to be stylized with css in order to make it a horizontal dropdown menu with nested sub categories.
To make this happen, I wrapped the function in a div called #navmenu in my template. Then in my style.css I added the css code below. The first drop down is working but none of the others. Am I overlooking something? Any advice would be greatly appreciated.
#navmenu {margin: 0;padding: 0;height: 1em; }
#navmenu li {list-style: none; float: left; }
#navmenu li a {display: block; padding: 3px 8px;background-color:#fff; color: #000; text-decoration: none; border: 1px solid #000;}
#navmenu li ul {display: none; width: 10em; /* Width to help Opera out*/ background-color: #fff;}
#navmenu li:hover ul, #navmenu li.hover ul {display: block; position:absolute; margin: 0; padding: 0; }
#navmenu li:hover li, #navmenu li.hover li {float: none; }
#navmenu li:hover li a, #navmenu li.hover li a {background-color:#fff; border: 1px solid #000; color: #000; }
#navmenu li li a:hover {background-color: #fff; }
Try giving a top and a left value to the #navmenu li:hover ul, #navmenu li.hover ul selector.
#navmenu li:hover ul, #navmenu li.hover ul {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
It is probably working, however the lists will all be positioned in the same place. Change top and left accordingly.
Related
Pls check my Js fiddle , i couldn't make highlighted the parent link while selecting the drop down menu.
/* minimal styles for that navi */
.rmm {margin: 0 auto; float:right;}
.rmm ul {margin: 0; padding:0; list-style: none; position: relative; background: #000;}
.rmm ul:after {content: ""; clear: both; display: block;}
.rmm ul li {float: left;}
.rmm ul li:hover {background: #202020;}
.rmm ul li:hover > ul {display: block;}
.rmm ul li:hover a{color: #fff;}
.rmm ul li a {color: #fff; display: block; text-decoration: none;}
.rmm ul li a:hover{color: #fff !important;}
.rmm ul ul {display: none; margin:0; padding: 0; position: absolute; top: 100%; }
.rmm ul ul li {float: none; position: relative;}
.rmm ul ul li a{color: #fff;}
.rmm ul ul li a:hover {background: #202020;}
.rmm ul ul ul {position: absolute; left: 100%; top:0; width: 100%;}
any one can help me out of this?
https://jsfiddle.net/ansarmon/qhuwxo5j/
Try this.
.rmm ul li:hover a { color: #fff !important;}
https://jsfiddle.net/qhuwxo5j/2/
But actually you can better use one of ready-made solutions instead of your snippet.
I'm having some issues with my menu being displayed properly. My 3rd level menu items are hidden behind the others for some reason. I've gone over my template I'm using and things seem to be alright on that end, otherwise the menu option wouldn't even be displayed. Thus I'm thinking something is wrong with my CSS, though I can't see what that would be. Does anyone have any ideas as to what's going on here? You can see an example at http://www.bpwsaskatoon.com and then hovering on the "Membership" option at the top.
The problem is in the css. First you should use classes or id:s on your navigation styles. Example ul li is now targeting every ul li. By using #nav ul li will target only all ul li inside #nav. In html the ul in .main_nav_menu should be div. You have now ul directly under ul.
I would recommend that you try some jquery plugin for dropdown menus. Example Superfish is pretty good, it takes care of many thigs that you should consider in dropdown menus, example touch events.
Here is a quick css that should display the 3rd level menu items.
/*Navigation styles*/
#nav{
display:table;
margin:0 auto 0 auto;
position:relative;
padding:5px;
}
#mnwrpr{
height:48px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
clear: both;
display: block;
position: relative;
width: 100%;
z-index:1;
}
#nav ul {
font-family:'Lato', sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #8b8b8b;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 14px;
}
#nav li:hover li { background: #ececec; }
#nav li:hover li a:hover {
background: #bcbcbc;
}
#nav ul li ul li ul {
top: 0;
left: 100%;
z-index: 99;
min-width: 12em;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: none!important;
}
#nav ul li ul li:hover ul {
display: block!important;
}
#nav ul li ul li ul li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
I'm totally new to css, but I ventured to create a website using a wordpress theme. The theme is supposed to be IE compatible but my hover submenus aren't clickable when in IE7,8 or 9.
That said, I've created style-IE*.css files and pointed to them. I've increased the index #. But it's still not working.
Here is the site: www.mariasherranz.com
and here is the menu script (canned from the theme, with some color and font changes):
.navigation {
text-transform: uppercase;
position: fixed;
z-index: 10;
display: none;
}
.navigation ul.menu li a {
font: 26px 'Marvel', sans-serif;
color: #FFFFFF;
line-height: 35px;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin-bottom: 5px;
background: none;
float: left;
clear: both;
}
.navigation ul.menu li ul {
float: left;
display: none;
}
.navigation ul.menu li ul li {
margin: 0px 0px 0px 1px;
float: left;
}
.navigation ul.menu li ul li a {
font-size: 24px;
color: #FFFFFF;
background:none;
}
.navigation ul.menu li ul li a:hover {
color: #000000;
background:#FFFFFF;
}
.navigation ul.menu li ul li ul {
margin: 36px 0px 0px 0px;
position: absolute;
z-index: 20;
display: none;
}
.navigation ul.menu li ul li ul li {
margin: 0px;
white-space: nowrap;
float: right;
}
.navigation ul.menu li ul li ul li a {
margin: 0px 0px 1px 0px;
}
.navigation ul.menu li ul li ul li ul {
display: none !important;
}
Thank you in advance for any help!
My website does something very very similar with IE. It's a vertical sub-menu instead of a horizontal, but when in IE if you hover over the top menu, the sub-menu appears, but you have to move the mouse at lightning speed to highlight a link or the menu disappears. One thing you should look strongly at (I looked at your site) is this:
padding-left in your .css files for (.navigation ul.menu li a )
Worth noting, it appears to me that your theme also has a style-IE9.css file, which probably overrides some of the style.css attributes.
When I worked with the Dev Tools on IE9 (first time ever) I could see that the issue partially resolved when I changed the padding-left to 0px in the IE9.css file under (.navigation ul.menu li a). A say partially, because the sub-menu titles for About ( Bio and Resume) were "squished" really close to the top menu.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
Here where my css menu is: My css menu
Notice if you hover over "about us" like below you see the "our clergy" sub menu already out. I don't want that I want it when you hover over "our clergy" for it to show.
This screenshot above is from firefox, while webkit browsers show a 1-2px difference as seen below and I can't figure out why? It sometimes effects how the menu works too.
Here is my css for the menu (I'm using wordpress so that means there is no html):
Feel free to help me out and if you want to clean up the css you can too!
#navbar {
height: 40px;
padding-left: 10px;
margin-left:-10px;
margin-top: -29px;
margin-bottom:0;
background: #F4DE9F;
width:930px;
/*backgroundborder-top: 2px solid #F4DE9F;
border-bottom: 2px solid #F4DE9F;*/
}
#navbar li {
float: left;
list-style: none;
margin-bottom: 30px;
margin-left:-20px;
}
#navbar li a {
font-family: "MuseoSans_500";
color: #3C290B;
font-weight: 500;
text-transform: uppercase;
}
#navbar li:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar li a:hover {
background:rgba(255, 241, 194, 100); /*#FFF1C2;*/
color: #645548;
text-decoration: none;
}
#navbar .parent > a, #navbar .parent > a:hover {
background: #F4DE9F;
background-position: right;
background-repeat: no-repeat;
}
#navbar ul, #navbar ul li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#navbar ul li a {
display: inline-block;
padding: 11px 16.2px 8px;
text-decoration: none;
}
/*
#navbar ul li a:hover {
}
#navbar ul #first a:hover {
}*/
#navbar ul li {
position: relative;
}
#navbar li ul {
display: none;
left: 11px;
position: absolute;
top: 51px;
}
#navbar li ul a {
background: #F4DE9F;
}
#navbar ul ul ul li {
}
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
/*#navbar ul li:hover ul li a, #navbar ul ul li:hover ul li a, #navbar ul ul ul li:hover ul li a {
display: block;
}*/
#navbar ul li:hover ul ul, #navbar ul ul li:hover ul ul {
margin-top: -50px;
margin-left:129px;
}
#navbar ul li:hover ul li a {
padding: 10px 14px 8px;
width: 112px;
}
#navbar ul li:hover ul ul li a {
padding: 10px 14px 8px;
width: 112px;
}
/*#navbar ul ul ul li:hover ul li a {
padding: 0 16px 0 24px;
width: 140px;
}*/
#navbar .children li a:hover {
color: #000;
}
When you end up with a stylesheet that feels very bloated with several rules and a lot of specificity, such as #navbar ul ul ul li:hover ul it is usually good to take a step back see if you can simplify the rules a bit.
Since you are using Wordpress it comes with a lot of handy classes that makes the job easier. In this case .menu-item and .sub-menu.
Replacing the menu-css with the following styles solves the problems you mentioned in your question, tried in Chrome 23, Safari 6 and Firefox 16.
Example here: http://jsfiddle.net/5qEwH/
.menu-item {
display: inline-block;
position: relative;
font-family: "MuseoSans_500";
font-weight: 500;
text-transform: uppercase;
background: #F4DE9F;
}
.menu-item:hover {
background: #FFF1C2;
}
.menu-item a {
display: inline-block;
height: 20px;
padding: 10px;
text-decoration: none;
color: #645548;
}
/* Hide submenus by default */
.sub-menu {
display: none;
position: absolute;
width: 150px;
top: 40px;
}
.sub-menu .menu-item {
width: 100%;
}
/* The second level sub-menu should be moved to the right */
.sub-menu .menu-item > .sub-menu {
top: 0;
left: 150px;
}
/* Show submenus on hover */
.menu-item:hover > .sub-menu {
display: block;
}
Its a great CSS practice to normalize your styles first so that all the browsers get the same styles for some basic HTML elements.
I add this at the start of a Stylesheet
* { margin: 0px; padding: 0px; border: 0px; text-decoration: none }
There is also a comprehensive stylesheet file for normalization that covers all the browsers and even html5 as well. try to add this before your style.css file.
Here is the link: http://necolas.github.com/normalize.css/
For the hover issue, try this css change
Replace
#navbar ul li:hover ul {
display: inline-block;
}
#navbar ul li:hover ul, #navbar ul ul li:hover ul, #navbar ul ul ul li:hover ul {
display: block;
margin: -11px 0 0 -11px;
}
With
#navbar ul li:hover > ul {
display: inline-block;
}
#navbar ul li:hover > ul, #navbar ul ul li:hover > ul, #navbar ul ul ul li:hover > ul {
display: block;
margin: -11px 0 0 -11px;
}
Hope it helps :)
So I'm trying my hands at a css menu and I have a simple bug that I cannot fix and haven't found any help searching for it. The issue is that when I hover over a drop down menu the parent link stays highlighted and the text reverts back to the original color. Hopefully that explains it. Here's the css code, I'm sure it's a matter of adding something or fixing a line of code. You can check out the issue here, everything works fine until you visit a submenu (like in BAR or Info).
#nav, #nav ul {
text-align: center;
text-size:16px;
float: left;
width: 750px;
height: 20px;
list-style: none;
line-height: 1;
background: white;
padding: 0;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
margin: 0;
background-image: url('/images/bg.gif');
}
#nav a {
display: block;
width: 75px;
height: 20px;
color: #0000FF;
text-decoration: none;
}
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li {
float: left;
padding: 0;
width: 75px;
}
#nav li ul { /*sub menu */
position: absolute;
left: -999em;
height: auto;
width: 75px;
border: solid #000;
border-width: 0px;
border-bottom-width: 1px;
border-top-width: 1px;
background-image: url('/images/submenu_bg.png');
}
#nav li li {
width: 75px;
}
#nav li ul a {
width: 75px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
You're setting the text color on #nav a:hover, but the background color on #nav li:hover. Because your submenus are contained within the li, it still counts as being hovered over even while the cursor is in the submenu. The submenus aren't contained within the link, so they don't stay highlighted and revert to their normal color. If you want the menu item to stop highlighting, move the background property to #nav a:hover instead.
Before:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
After:
#nav a:hover, #nav li.sfhover a {
display: block;
width: 75px;
height: 20px;
color: #FFF;
background: #0000FF;
}
Alternatively, if you want the menu to stay highlighted while hovering on the submenu (which looks better, IMO), move color to the li:hover. I know it's a little verbose, but it works. :-)
Before:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
color: #FFF;
}
#nav li:hover, #nav li.sfhover {
height: 20px;
background: #0000FF;
}
After:
#nav a:hover {
display: block;
width: 75px;
height: 20px;
}
#nav li:hover a, #nav li.sfhover a {
color:white;
}
#nav li:hover li a, #nav li.sfhover li a {
color:blue;
}
#nav li:hover li a:hover, #nav li.sfhover li a:hover {
color:white;
}
#nav li:hover, #nav li.sfhover {
color: #FFF;
height: 20px;
background: #0000FF;
}
You can try setting the color of the link on the hover of the li, like so:
#nav li:hover a {
color: #fff;
}
#nav li:hover li a
{
color: #0000FF;
}