I'm using the theme Illdy on a Wordpress site handed to me, and the hoverable dropdown menus on the top navbar are not dropping down in IE or Edge. Firefox and Chrome appear to work.
I've tried adding a variety of these to the additional CSS:
#header .top-header .header-navigation ul li:hover > ul.sub-menu {
visibility: visible;
}
.header-navigation .menu > li:hover > ul {
opacity: 1;
transform: translate3d(0, 0px, 0);
-webkit-transform: translate3d(0, 0px, 0);
-moz-transform: translate3d(0, 0px, 0);
visibility: visible;
}
.header-navigation .menu-item>li>ul li:hover>a {
opacity: 1;
}
to no avail.
The theme's original CSS pertaining to the top navbar menu is:
#header .top-header .header-logo {
display: block;
font-size: 60px;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
line-height: 75px;
font-weight: 700;
}
#header .top-header .header-logo:hover,
#header .top-header .header-logo:focus {
color: #f1d204;
text-decoration: none;
}
#header .top-header .header-navigation {
float: right;
}
#header .top-header .header-navigation ul {
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#header .top-header .header-navigation > ul {
margin-top: 20px;
}
#header .top-header .header-navigation ul li {
margin-left: 40px;
line-height: 40px;
font-weight: 700;
font-size: 14px;
color: #fff;
position: relative;
float: left;
font-family: "Lato";
}
#header .top-header .header-navigation ul li:first-child {
margin-left: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children a {
padding-right: 16px;
position: relative;
margin-bottom: 20px;
display: inline-block;
}
#header .top-header .header-navigation ul li.menu-item-has-children a:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 16px;
position: absolute;
top: 0;
right: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu {
width: 200px;
margin: -5px 0 0;
padding: 0;
position: absolute;
left: 50%;
display: none;
z-index: 10;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.32);
transform: translateX(-50%);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu:before {
display: block;
content: "";
position: absolute;
top: -5px;
left: 50%;
margin-left: -3px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
width: 0;
height: 0;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu {
transform: translateX(0);
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu .sub-menu:before {
display: none;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li {
width: 100%;
margin: 0;
padding: 0;
background-color: #fff;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:first-child {
padding-top: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:last-child {
padding-bottom: 10px;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a {
width: 100%;
margin: 0;
padding: 0 10px;
line-height: 40px;
font-weight: 400;
font-size: 14px;
color: #8c9597;
text-transform: none;
display: block;
font-family: "Lato";
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:hover > a,
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li:focus-within > a {
color: #f1d204;
border-left: 3px solid #f1d204;
background-color: #f8f8f8;
}
#header .top-header .header-navigation ul li.menu-item-has-children .sub-menu li a:after {
display: none;
}
#header .top-header .header-navigation ul li a {
color: #fff;
font-size: 16px;
line-height: 26px;
}
#header .top-header .header-navigation ul li:hover a,
#header .top-header .header-navigation ul li:focus-within a {
color: #ffde00;
text-decoration: none;
}
Add <meta http-equiv="X-UA-Compatible" content="IE=9"/> between the head tags. I personally used this and I had no problems with either IE or Edge. You should also check the syntax which could be read differently and wrong.
Related
After creating a navigation bar, I discovered a transparent box around it, which has some transparent features. Though it's not strikingly noticeable, I would still like to remove it. I've attached an image and the CSS code. I think the .menu tag is creating the transparent box, but I don't know how to remove it.
/* Navigation */
.clearfix {
width: 595px;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 80px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
position: absolute;
top: 5.5%;
left: 55%;
}
.menu {
width: 100%;
margin: 0px;
right: 10px;
}
.menu li {
margin: 0px;
list-style: none;
font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.menu a {
transition: all linear 0.15s;
color: #ffffff;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration: none;
color: #000000;
}
.menu .arrow {
font-size: 11px;
line-height: 0%;
}
/* Top Level */
.menu > ul > li {
float: left;
display: inline-block;
position: relative;
font-size: 1em;
}
.menu > ul > li > a {
padding: 10px 30px;
display: inline-block;
text-decoration: none;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background: #ffffff;
}
/* Bottom Level */
.sub-menu {
width: 140%;
padding: 5px 0px;
position: absolute;
top: 100%;
left: 0px;
z-index: -1;
opacity: 0;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #ffffff;
}
.menu li:hover .sub-menu {
z-index: 1;
opacity: 1;
}
.sub-menu li {
display: block;
font-size: 1em;
}
.sub-menu li a {
padding: 10px 30px;
display: block;
color: #000000;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background: #e0e0e0;
}
I played around with it a little and figured it out, but anyone else can feel free to comment if my answer isn't satisfactory.
The problem was actually caused by the .menu-wrap tag, and all I had to do to remove it was remove the box-shadow: 0px 1px 3px rgba(0,0,0,0.2); attribute I added to the code. It seems this transparent box had problems with the box-shadow property.
I can't seem to get the hover to work on my very first css menu navigation button. It is an active li class, does anyone have any ideas? The other menu option' hover effect is working just fine. CSS code:
#import url(http://fonts.googleapis.com/css?family=Open+Sans:600);
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: url(images/highlight-bg.png) no-repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
left:0px;
top:0px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
li.space1{
visibility: hidden;
}
li.space2{
visibility: hidden;
}
#cssmenu > ul {
background: url(images/menu-bg.png) no-repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 20px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #9e3825;
text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
line-height: 18px;
margin-right: 10px;
}
#cssmenu > ul > li:hover > a {
background: url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
margin-right: 5px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/active.png) no-repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/highlight-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 52px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #de553b;
background: url(images/hover.png) repeat;
color: white;
text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) no-repeat;
}
#Table_01 {
position:absolute;
left:0px;
top:1px;
width:864px;
height:1px;
visibility: inherit;
}
#DropDown-Design2-11 {
position:absolute;
left:0px;
top:50px;
width:347px;
height:166px;
}
#DropDown-Design2-12 {
position:absolute;
left:347px;
top:50px;
width:103px;
height:142px;
}
#DropDown-Design2-13 {
position:absolute;
left:450px;
top:50px;
width:223px;
height:166px;
}
#DropDown-Design2-14 {
position:absolute;
left:673px;
top:50px;
width:191px;
height:166px;
}
#DropDown-Design2-15 {
position:absolute;
left:347px;
top:192px;
width:103px;
height:24px;
}
Try like this: Demo
If you need mouse over effect for active state then use hover for active li like this:
CSS:
#cssmenu > ul > li:hover > a,#cssmenu > ul > li:hover.active > a {
background:#000 url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
In this site I have a problem with the submenu that appears in the main navigation, there's a space before the list with the links I don't know why it changed but it appeared fine before, I really don't have an idea of what happened
#navigation {
float: right;
}
#navigation li {
float: left;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.1em;
display: block;
}
#navigation li strong {
font-weight: 400;
border-right: #e8e8e8 1px solid;
display: block;
padding: 10px 20px;
}
#navigation li a {
padding: 20px 0;
color: #1c1c1c;
text-decoration: none;
display: block;
}
#navigation li:last-child strong {
border-right: none;
}
#navigation li span {
display: block;
color: #a09d9d;
text-transform: lowercase;
letter-spacing: 0.01em;
margin: 5px 0 0 0;
}
#navigation li a:hover span,
#navigation li:hover span,
#navigation li.current-menu-item a span {
color: #1c1c1c;
}
#navigation li li.current-menu-item,
#navigation li li.current_page_item,
#navigation li li:hover {
border-bottom: none;
}
#navigation li li,
#navigation li li:hover {
text-transform: none;
letter-spacing: 0;
border-bottom: #e8e8e8 1px solid;
}
#navigation li li a.sf-with-ul:after {
background: url(../images/arrows2.png) no-repeat;
width: 8px;
height: 8px;
content: '';
position: absolute;
top: 36%;
right: 1em;
}
#navigation li li a {
padding: 15px 20px;
background: #fff;
font-size: 13px;
}
#navigation li li a:hover {
background: #fafafa;
}
#navigation .current-menu-item,
#navigation .current_page_item,
#navigation li:hover {
border-bottom: 4px solid;
}
#navigation li ul {
box-shadow: 0 0 4px rgba(136, 136, 136, 0.6);
}
Seems like the top attribute value is just to high, change it to 93px
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 93px;
z-index: 99;
}
Here is an another possible option from Bart:
#navigation li:hover ul, #navigation li.sfHover ul {
left: 0.01em;
top: 100%;
z-index: 99;
}
This seems to work too.
#navigation ul {
position: absolute;
width: 19em;
top: -999em;
margin-top: -39px;
}
In situations like this, i suggest you to use Firebug or Developer Tools integrated on your browser. A very little check using the Inspector tool (found in all developer tools and on Firebug) could have shown you how to resolve this problem very easily.
Or.......
Just remove:
top: -999em;
from:
#navigation ul {
position: absolute;
/* top: -999em; */
width: 19em;
}
Bought a template, and been working on this for the last couple of days. On my wits end now. I am trying to change the hover over main nav colour and current chosen page colour, to no avail. Please advice?
Code attached.
nav#main-nav {
z-index: 50;
display: block;
}
nav#main-nav ul {
position: relative;
z-index: 49;
margin: 0;
padding: 0;
list-style: none;
}
nav#main-nav ul li {
position: relative;
z-index: 45;
float: left;
margin: 0 0 0 20px;
padding: 0;
}
nav#main-nav > ul > li > a {
display: block;
font-family: Ubuntu;
font-size: 13px;
line-height: 40px;
color: #ffffff;
text-decoration: uppercase;
position: relative;
z-index: 45;
padding: 20px 0;
letter-spacing: 0.1em;
}
nav#main-nav > ul > li:hover {
z-index: 46;
color: #ffffff;
}
nav#main-nav > ul > li.current-menu-item,
nav#main-nav > ul > li.current-menu-ancestor {
color: #ffffff;
text-decoration: underline;
}
nav#main-nav ul li .sub-menu {
position: absolute;
top: 80px;
left: 0px;
width: 200px;
padding: 0;
display: none;
z-index: 47;
}
nav#main-nav ul .sub-menu li {
float: none;
border-top: 1px solid;
margin: 0;
}
nav#main-nav ul .sub-menu li:first-child {
border-top: none;
}
nav#main-nav ul .sub-menu li a {
color: #ffffff;
font-size: 12px;
line-height: 20px;
padding: 10px 20px;
display: block;
}
nav#main-nav ul .sub-menu li:hover {
background-color: #ffffff;
}
nav#main-nav ul .sub-menu li:hover a {
color: #ffffff;
}
nav#main-nav ul .sub-menu li.current-menu-item > a {
color: #ffffff;
text-decoration: underline;
}
nav#main-nav ul li ul li .sub-menu {
border-top: none;
position: absolute;
top: 0px;
left: 201px;
}
You have
nav#main-nav > ul > li:hover {
z-index: 46;
color: #ffffff;
}
The problem is that the anchor has other styles that override the code above. Then, use
nav#main-nav > ul > li:hover { z-index: 46; }
nav#main-nav > ul > li:hover > a {
color: #ffffff;
}
i already did a drop down menu in my wordpress site. its a common drop down menu. but now i need to make it as a multi column drop down submenu.
i went through so many sites and tried different css. nothing creates anything like in that reference site. please help me with customizing the existing css style to attain multicolumn submenu structure.
my current menu css:-
.menu{
width:941px;
max-width:100%;
height:47px;
margin-left:30px;
float:left;
background:url(../images/other.gif) repeat-x;
}
.menu ul{padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
.menu li:first-child{
margin:0px 0px 0px 0px;
padding:16px 0px 0px 40px;
list-style:none;
background-image:url(../images/hom.gif);
background-repeat:repeat-x;
float:left;
height:47px;
}
.menu li{
margin:0px 0px 0px 0px;
padding:16px 0px 10px 30px;
list-style:none;
background-image:url(../images/nav_img.png);
background-repeat:no-repeat;
float:left;
height:47px;
}
.menu a{
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
color:#000;
letter-spacing:2px;
padding-right:10px;
text-transform: uppercase;
text-decoration:none;
transition: text-shadow 1s;
-moz-transition: text-shadow 1s; /* Firefox 4 */
-webkit-transition: text-shadow 1s; /* Safari and Chrome */
-o-transition: text-shadow 1s; /* Opera */
}
.menu a:hover{
text-shadow: 0 0 5px #006994;
color:#ccffff;
}
.menu .current-menu-item{
text-shadow: 0 0 5px #fff;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 64%; left: 0; z-index: 598; width:auto;}
#cssmenu ul ul li {float: none;background:#3891C9!important;border-bottom:1px solid #00569c;height:auto;}
#cssmenu ul ul ul {top:0; left: auto; right: -99.5%; width:100%;}
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;border-left:1px solid #00569c;}
#cssmenu ul ul a { display:block; line-height:1em; text-align:left; letter-spacing:0.5px;font-size:12px;}
#cssmenu ul ul li a:hover{ color:#ccffff; }
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
the menu structure is :
<div id="cssmenu" class="menu">
<ul class="menu">
<li>
<ul class="sub-menu">
<li>test1</li>
<li>test2</li>
</ul>
</li>
</ul>
</div>
currently my menu like this http://jsfiddle.net/2wxje/
My CSS:
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 480px;
margin: 10px auto;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444, #111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
position: relative;
}
#menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: linear-gradient(#444, #111);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #FF0064;
background-image: linear-gradient(#FF0064, #FF0010);
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #FF0064;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #FF0064;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}
#menu li:hover > .no-transition {
display: block;
}
Javascript Code:
<script>
var $=jQuery;
$(document).ready(function(){
var location=window.location.pathname;
$("#menu a").each(function(){
if(location.lastIndexOf($(this).attr("href"))!=-1){
$(this).css({color:"white"});
}
});
});
</script>
PHP Code:
<?php wp_nav_menu(
array(
'title_li' => '',
'menu_id' => 'menu',
'menu_class' => '',
'theme_location' => 'primary-menu',
)
); ?>