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.
Related
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;
}
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 :)
Im developing a website for a customer in Wordpress. The website www.daanen-shipping.nl has a dropdown menu which is working fine in FF/ Chrome and Safari but not in IE. The customer is useing IE 9. Apparently this is a common problem for many people. Compatibility view doesn't seem to be the problem.
Im kinda new in CSS and Javascript so i have no idea where to begin. I did hours of research with nu results. Hopefully there is someone that can help me.
Menu CSS:
#menu {
position: absolute;
right: 100px;
top: 180px;
}
#menu ul li {
float: left;
text-transform: uppercase;
font-size: 13px;
margin: 0 0 0 20px;
position: relative;
display: inline-block;
padding: 0 0 10px 0;
}
#menu ul li a {
color: #fff;
padding: 4px 1px;
display: inline-block;
}
#menu ul li:hover a, #menu ul li.current-menu-item a, #menu ul li.current-menu-parent a {
text-decoration: none;
border-bottom: #fff 3px solid;
padding: 4px 1px;
display: inline-block;
}
#menu ul li:hover a {
margin-bottom: 5px;
}
#menu ul li.current-menu-item ul.sub-menu li a {
color: #7b7b7b;
}
#menu ul li ul.sub-menu li, #menu ul li ul.sub-menu li a {
margin: 0;
padding: 0;
}
#menu ul li ul.sub-menu {
display: none;
}
#menu ul li:hover ul.sub-menu {
position: absolute;
top: 30px;
left: 0px;
background: #EBEBEB;
border: #ddd 1px solid;
width: 200px;
padding: 5px 0 2px 0;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li ul.sub-menu li {
width: 100%;
}
#menu ul li ul.sub-menu li a {
padding: 8px 15px;
text-decoration: none;
border: 0px;
color: #7b7b7b;
}
If there is something else i need to post to be more clear, please let me know and ill work on it.
Thanks in advance!
William.
hit f12 and make sure that the site is using IE 9 standards. If it's not switch to IE9 standards and see if that fixes it. If it does, you can add some code to your header that tells the browser 'if the user is using IE 8 use IE8 standards or, if the user is using IE 9, use IE 9 standards'. IE is 3 browsers in one (7,8, and 9) and it has a bad habit of switching to IE7 and quirks mode on some sites. Let me know if it works when you change to IE9 standards and, if it does, I'll see if I can dig up the code to add to force the standards.
I'm almost certain this question has been answered in one form or another. Applying the changes I've found here and elsewhere doesn't seem to get me any further.
I'm trying to change the css menu from crisislab.nl from a drop-down menu to a drop-up menu. (As you can see on the site I'm currently working on it.)
Current problem I'm encountering is the fact that menu seems to be working fine, expect for the fact that the menu text is displayed downwards and while the menu is moving up (If this doesn't sound logical, please look at crisislab.nl)
See the code below for my current progress. Anyone willing to assist?
Many thanks in advance!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
} #navigation li:hover { background: transparent url(gfx/navigation_hover.png) repeat; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none;}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
The basic difference from a dropdown to a dropup is the offset of the child ul:
Dropdowns have top:<x>px; and if you want a dropup you just say: bottom:<x>px;
I modified your code to make it work: http://jsfiddle.net/fJSVz/
Basically i changed the following rules:
#navigation li ul {
top: -9999px; /* <- removed */
display:none; /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
bottom:20px; /* <- this is the trick to push the ul up */
display:block; /* <- show the ul on hover */
}
I posted this question over wordpress.stackexchange.com but they closed it and pointed me to post here.
I am not sure whether it is the right place for such question but I did not find any CSS related section here.
Please see the below image.
Currently my menus are similar to A but I want it to be like B. I also want to change the color of the separator from Black to Green in sub menu. I want this effect only on the sub menu whether sub menu page is selected or not. How can I do that?
Here is the selected code from my style.css:
.menu {
font: normal 13px Arial, sans-serif;
background: url() repeat-x 0 -80px;
width: 100%;
height: 35px;
position: relative; /* Required for positioning of sub-menus */
}
.menu li ul {
display: none; /* Required to hide menu when inactive */
position: absolute; /* Position the menu below and to the far left */
top: 50px;
left: 0;
}
/* This is the rule that displays sub-menus when a parent link is clicked */
.menu li.current-menu-parent ul, .menu li.current-menu-item ul {
display: block;
}
.menu li {
float: left;
margin: 0;
padding: 0;
font-weight: bold;
border-right:#3c3c3c solid 1px;
}
.menu li a {
float: left;
display: block;
color: #fff;
background: url() repeat-x 100% 0;
padding: 12px 25px;
text-decoration: none;
}
.menu li a:hover {
background-position: 100% -160px;
color: #fff;
}
/* Styling for current parent item */
.menu li.current-menu-item a, .menu li.current-menu-parent a{
background: url() repeat-x scroll left bottom #83C839;
}
/* Styling for sub-menus */
.menu li ul {
width: 805px;
background: url() repeat-x 0 -120px;
border: 1px solid #83C839;
border-style: none none solid;
border-width: 3px;
}
.menu li ul li {
padding: 6px 0;
}
.menu li.current-menu-item ul li a, .menu li.current-menu-parent ul li a {
background: url() repeat-y right center;
color: #666666;
padding: 12px 25px;
margin: -6px 0;
}
.menu li ul li a:hover {
color: #000;
}
/* Styling for current page sub-menu links */
.menu li.current-menu-parent ul li.current-menu-item a, .menu li.current-menu-parent ul li.current-menu-item a:hover {
background: url("") repeat-x scroll left bottom #83C839;
color: #FFFFFF;
}
I am using this code in Wordpress Theme. My code is based upon WordPress Tutorial – Current & Parent Menu Items In Custom Menus code, I modified it according to my need.