Can anyone else please help? I've been reading loads of different questions about dropdown menus in IE, and they're all completely different. So I have no basis for mine.
I've tried to remove all child selectors, and rgba values, and basically stripped as much CSS3 out as possible.
I'm having trouble trying to get a CSS dropdown menu to work in IE9 and below.
Chrome, Firefox and IE 10+ all render this menu correctly. It's a simple, hover and show submenu. On IE9 and below, the dropdowns just don't appear.
I've read about removing -filter and -ms-filter, and z-index and all kinds, none of my CSS features any of this.
UPDATED CSS:
nav {width:100%;margin:0 auto;text-transform:uppercase;position:relative;}
#toggleMenu {display:none;font-size:40px;line-height:40px;}
ul.mainmenu { margin: 0; padding: 0; position:relative;}
ul.mainmenu .small {font-size:9pt;}
ul.mainmenu ul { left: -9999em; position: absolute; width:200px; background: #222; margin: 0; padding: 0; top: 40px;}
ul.mainmenu li.item-173 ul {width:310px;}
ul.mainmenu li.item-118 {text-transform:none;}
ul.mainmenu ul ul { background: #333; }
ul.mainmenu li { display: inline-block; vertical-align: middle; position: relative; }
ul.mainmenu li a, ul.mainmenu li span.nav-header { display: inline-block; vertical-align: middle; padding: 8px 6px; width:100px; color: #ddd;font-size:10pt; font-weight:normal; line-height:18pt;}
ul.mainmenu ul.nav-child li a {width:200px;}
ul.mainmenu ul.nav-child li a.vehicles {width:300px;}
ul.mainmenu li span.nav-header {cursor:default;}
ul.mainmenu li a:hover,
ul.mainmenu li:hover a,
ul.mainmenu li:hover span { background: #222; }
ul.mainmenu li:hover ul, ul.mainmenu li.focus ul { top: 40px; left: 0;}
ul.mainmenu li ul li:hover ul { top: 40px; left: 300px; }
ul.mainmenu ul li { display: block; padding: 0; }
ul.mainmenu ul li a { display: block; padding: 10px 15px; color:#999; }
ul.mainmenu ul li a.vehicles {text-align:left; padding:20px 15px;}
ul.mainmenu ul li a.vehicles img {float:left;margin-right:10px;}
ul.mainmenu ul li a.vehicles .image-title-description {text- transform:none;display:block;color:#666;}
ul.mainmenu ul li a:hover,
ul.mainmenu ul li:hover a .image-title-description { background: #333; color:#fff; text- decoration: none; }
ul.mainmenu ul ul li a:hover { background: #ccc; }
UPDATE:
I have added the HTML5Shiv line into the head to try and get it working for IE, but it hasn't made the dropdowns work, although it has changed the layout slightly in IE8.
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->
UPDATE:
I really don't get this, as NOTHING seems to be working. There's no difference in IE9 no matter what I try. I've done all that's mentioned here in http://alistapart.com/article/hybrid and IE9 is showing nothing different. The top level of the menu is appearing fine, but the dropdowns just don't show.
I think I've come to a point to understand that IE8 and below won't render any :hover on anything that isn't an a tag. Is this an absolute 100% certainty?
IE9 uses document mode ie8 by default.
Try adding: <meta http-equiv="X-UA-Compatible" content="IE=9"/> in your <head> and make sure you use <!DOCTYPE HTML>
This mostly has to do with using :hover on non- elements.
Since this is mostly quirky-browser-stuff, this answer is mostly just a speculation. Since quirky-browser-stuff usually does not have an obvious answer..
Related
I have an issue where I want my theme to not do certain things.
I want my theme so stop using a sticky menu.
I want a specific page to not display a header.
I want h2 linked text to not be grey.
The heading changes i've tried through theme options so far apply to all pages instead of just the one i need.
I've dug into the code with file manager on cPanel but have found so many potentials for variables to change due to lack of expertise.
This is what i need help changing
PLEASE HELP!
Below is what i believe controls my whole main menu. What do i need to alter to make it no longer sticky site wide?
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
clear: both;
display: block;
float: left;
width: 100%;
}
.main-navigation ul {
display: none;
list-style: none;
margin: 0;
padding-left: 0;
}
.main-navigation li {
float: left;
position: relative;
}
.main-navigation a {
display: block;
text-decoration: none;
}
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 100%;
left: -999em;
z-index: 99999;
}
.main-navigation ul ul ul {
left: -999em;
top: 0;
}
.main-navigation ul ul a {
width: 200px;
}
.main-navigation ul ul li {
}
.main-navigation li:hover > a,
.main-navigation li.focus > a {
}
.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: auto;
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 100%;
}
.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}
Below is what i believe controls the h2 coloring if it is also a url. I do not know for sure though, thats why im here. If i do block specific h2 HTML color it fails to override the theme.
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
color: #666;
border: 1px solid #ccc;
border-radius: 3px;
padding: 3px;
}
I Dont know what to look for for the page headers.
I want my theme so stop using a sticky menu.
Usually this is a built in option on most downloaded themes.
Check Appearance -> Customize
If not use your browser inspect to find the class in your header with the position: fixed; and overwrite it in CSS with !important.
I want a specific page to not display a header.
Use your browser inspect to find the page ID calls and then target the header with display:none;.
.page-1 .header{display:none;}
I want h2 linked text to not be grey.
h2{color:red;} if you want to override all H2 colours.
To just target the H2 is a certian div use your browser inspect to find the parent classes.
I'm trying to play a little bit with CSS of Wordpress. However, I tried so much things but I can't solve it for some reason.
I wanted to have more space between links in the menubar so I added padding. I created to following code:
.main-navigation li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
Here the other CSS code
.main-navigation a {
display: block;
text-decoration: none;
color: white;
.main-navigation a:hover {
text-decoration: underline;
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
background-color: black;
}
.main-navigation ul ul a {
background-color: rgba(0, 0, 0, 0.5);
width: 200px;
}
This worked for me and created more space in the menubar however it's also added the padding to the links in the dropdown menu, which shouldn't be done. I have tried to much things but it seems I cannot solve it. Could someone tell me what I could do? Please see below to see what I mean.
Screenshot of the problem
Add this
.main-navigation ul ul li {
padding-right: 0;
}
The CSS declaration that you posted, .main-navigation li {}, is saying "target every <li> that is a descendant of .main-navigation". So your <li> elements that are in the next level of lists also get targeted.
You can use the > child selector to select only direct children of the parent. So the following code should work for you, and not affect the dropdown elements:
.main-navigation > li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
}
On this site, if I inspect "What We Do", I see the HTML code:
<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a>
with CSS code:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: none;
content: '»';
color: #622C82;
}
I can't see why the content: '»' does not display. The CSS element has a width and a colour.
What is missing are the drop down indicators (indicated by the green arrows in the screen shot below)
Help appreciated.
I guess you should have a look at this class
.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 13px;
width: 16px;
}
the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.
As for the drop down indicators, they are very much present, just remove the background:none
On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .
As I can see in your code selectors .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator look almost equal.
Anyway if you want implement content attribute it's better to write something like:
.sf-sub-indicator::after {
background: none;
content: '»';
color: #622C82;
}
http://imgur.com/a/hw1kb
Background image is set for this span.
Inspect it again:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: url(images/arrow-right2.png) no-repeat;
}
I have a basic CSS dropdown menu for a client on a Wordpress-based sites. It is just CSS styling, no JS, and works perfectly on desktops.
However we've realized that the menu only works intermittently on iPhones, maybe every 2 or 3 page loads, but most of the time is broken and doesn't allow any access to any of the subpages.
What happens is the dropdown menu expands on tap, as it should, but then the links in the dropdown don't work. Tapping them closes the menu and does nothing, or, since the site logo falls underneath the dropdown, acts like you tapped the logo and redirects back to the homepage.
Pressing and holding on the link in the dropdown brings up the normal link options (copy, open in new window, etc) so I know it is recognizing the link, it just doesn't want to behave normally on a single tap.
The menu works perfectly on iPads, just not iPhones (which doesn't make sense at all to me). I feel like if the issue was consistent, happening all the time across all mobile safari devices, I might be able to figure this out, but the intermittent nature of it has me stumped. Additionally, I've used pretty much an identical menu code on another client's site, and theirs is working perfectly on all devices. I've tried removing plugins, ads, other scripts on the site (like the Hellobar for example) to see if it is a conflict, but nothing seems to consistently fix the issue.
Site in question is http://www.twopeasandtheirpod.com/. See the dropdown under 'About' and 'On the Side'.
Any assistance in troubleshooting this would be greatly appreciated!
Structure of the menu is wordpress' default menu structure. CSS being used for reference:
.centeredmenu {
color: #fff;
font-size: 16px;
font-family: MergeRegular, Arial, sans-serif, Helvetica;
clear: both;
float: left;
margin: 0;
padding: 0;
width: 100%;
border: none;
font-weight: normal;
text-transform: lowercase;
z-index: 100;
position: relative;
height: 30px;
line-height: 30px;
background-color: #65b020;
}
/* Top menu items */
.centeredmenu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
position: relative;
right: 50%;
}
.centeredmenu ul li {
margin: 0 3px;
padding: 0;
float: left;
position: relative;
left: 50%;
}
.centeredmenu ul li a {
display: block;
margin: 0;
padding: 0 12px;
text-decoration: none;
color: #ffffff;
}
.centeredmenu ul li.active a {
}
.centeredmenu ul li a:hover {
color: #bbda6d;
}
.centeredmenu ul li:hover a,
.centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
color: #bbda6d;
}
/* Submenu items */
.centeredmenu ul ul {
display: none; /* Sub menus are hiden by default */
position: absolute;
margin: 0;
padding: 0;
top: 30px;
line-height: 24px;
font-size: 13px;
font-family: Georgia, "Times New Roman", Times, serif;
text-transform: lowercase;
right: auto; /*resets the right:50% on the parent ul */
width: 160px; /* width of the drop-down menus */
background-color: #65b020;
}
.centeredmenu ul ul li {
left: auto; /*resets the left:50% on the parent li */
padding: 0;
margin: 0; /* Reset the 1px margin from the top menu */
clear: left;
width: 100%;
}
.centeredmenu ul ul li:before {
display: none;
}
.centeredmenu ul ul li a,
.centeredmenu ul li.active li a,
.centeredmenu ul li:hover ul li a,
.centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
margin: 0;
padding: 7px 12px;
line-height: 1.4;
color: #ffffff;
}
.centeredmenu ul ul li a:hover,
.centeredmenu ul li.active ul li a:hover,
.centeredmenu ul li:hover ul li a:hover,
.centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background-color: #77c12e;
}
/* Flip the last submenu so it stays within the page */
.centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
/* Make the sub menus appear on hover */
.centeredmenu ul li:hover ul,
.centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}
you're using :hover states which are at-best buggy, and at-worst will never work on touchscreen devices. the individual browser could sometimes reinterpret it to work like an onclick, but that's a crapshoot.
instead use onmouseover and onclick for desktop, so you have the failover to onclick for touchscreen.
i have a Problem with my Website..
I want to make a dropdown-item smaller.
Otherwise it will "plop" out of my theme..
I´m using WordPress..
Can anyone help me?!
This is the Website:
MDS
The Problem is shown at the menu-point "Kontakt -> Presse"
if reduce width it will create problem when inner text is big in length so
change this properties if you like it as below..
ul#dropdown-menu li .sub-menu li a {
color: #252525;
width: 140px;
}
ul#dropdown-menu ul {
position: absolute;
top: 100%;
right: 0;
width: 160px;
list-style: none;
display: none;
border: 1px solid #EFEFEF;
border-bottom: none;
background-color: white;
z-index: 35;
}
css:
#menu-item-38 ul, #menu-item-38 li{
width:100px;
}
#menu-item-38 ul li a{
width:80px;
}
Hi now define your last submenu width as like this
#menu-item-38 .sub-menu{
width:90px;
}
You have too many widths defined in the ul#dropdown-menu
ul#dropdown-menu ul li a = 160px ;
ul#dropdown-menu ul li = 180px ;
Change
ul#dropdown-menu ul li to
ul#dropdown-menu ul li{width:160px; overflow:hidden;}
Make sure to add overflow:hidden