I have implemented a drop down menu to my wordpress "header" template and for some reason the drop down does not show on IE6. When I go to my index page, all works fine except there are no underline on the hovers. When I switch to wordpress (under a sub directory) the drop down disappears.
I tried implementing whatever hover but it only works on the index page but not in my wordpress. Wordpress doctype is <!DOCTYPE html>
The css is as follows:
/*--- DROPDOWN ---*/
#navDrop ul {
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
margin:10px auto auto auto;
left:-9999px;
}
#navDrop ul li{
padding:1px;
float:none;
background:#fff;
}
#navDrop ul a{
white-space:nowrap;
}
#navDrop li:hover ul{
left:0;}
#navDrop li:hover a{
text-decoration:none;
}
#navDrop li:hover ul a{
text-decoration:none;
background:#fff;
width: 180px;
}
#navDrop li:hover ul li a:hover{
background:#e4f2ff;
text-decoration:none;
z-index:99999;
}
#navDrop li ul li {
background:#fff;
list-style:none;
z-index:10001;
padding:1px 0 0 0;
}
Your help is appreciated... Thanks in advance.
IE6 is really, really dead. http://www.ie6countdown.com/
That said, if you need to get dropdowns to work in IE6, check these two plugins and steal some code from them and also use the default WP theme twentyten's http://wordpress.org/extend/themes/twentyten menu and doctype. The plugins use jQuery to support dropdowns in IE6.
http://wordpress.org/extend/plugins/twentyten-ie6-menus/
http://wordpress.org/extend/plugins/ie6-support-for-2010-theme/
Related
I'm relatively new to modern CSS so I would like to ask you for any advice regarding how to proceed if I want to transform a multi level navigation menu into a hamburger menu for mobile devices (preferably without JS involved).
What I have so far looks good on desktop & tablet screen, but for a mobile screen I'd like to have a hamburger menu (either on left or right side of the screen) where all items in original menu would be available.
CSS code for desktop & tablet screens:
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0;
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd;
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6;
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0;
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px;
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px;
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%;
}
#primary_nav_wrap ul li:hover > ul
{
display:block;
}
Thank you in advance
https://www.jqueryscript.net/menu/Responsive-Navigation-jQuery-menuBreaker.html
you can use this JQ plugin on the go to solve your issue effectively, plus you will not have to change your html structure extensively
So I found what fits the best (so far): https://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ Anyways, all suggestions are much appreciated :)
i'm really new to html and css, and i thought having a project while working through tutorials would help me stay motivated while learning a lot.
i've been playing around with this menu, and it's almost there - but now there seems to be this wall and i just don't get how to get over it! i have searched for hours on several sites and am now ready to throw this thing outta the window...
here's a jsfiddle: http://jsfiddle.net/64Grv/
so what i wanted to achieve is that on hover of one submenu the whole menu changes color (instead of the hovered link now). if i hover on "more stuff" for example, all of "menupoint2, stuff, more stuff, even more stuff...." should change color.
how should i go with that? i've tried putting different classes, to no avail - i guess i put them at the wrong place. or is this possible with some kind of box?
i apologize for the messiness of my css (just a beginner messing around..), and i'd really appreciate it if somebody had concrete tips on how to do this :)
thank you very much!
CSS:
#navigation ul
{
margin:0px;
padding:0px;
position:relative;
text-align:center;
}
#navigation ul li
{
display:inline;
float:right;
line-height:20px;
list-style:none;
margin-right:3%;
margin-top:5%;
position:relative;
}
#navigation li a
{
display:block;
font-family: "Helvetica", "Arial", sans-serif;
font-size:1em;
color:#04B4AE;
text-decoration:none;
}
#navigation li a:hover
{
color:#08298A;
text-decoration:none;
}
#navigation li ul
{
font-size:0.8em;
background-color:transparent;
display:block;
margin:0px;
padding:0px;
top:0.5em;
}
#navigation li:hover ul
{
color:#04B4AE;
}
#navigation li li
{
vertical-align:middle;
list-style:none;
display:list-item;
margin:auto;
float:none;
}
#navigation li li a
{
color:#04B4AE;
text-decoration:none;
}
#navigation li li a:hover
{
color:#08298A;
text-decoration:none;
}
you need to set :hover on li :
http://jsfiddle.net/64Grv/1/
li:hover a {color:red}
Try
li:hover a
{
color:yellow;
}
Updated fiddle link is here just changed below
Replace below code
#navigation li a:hover
color:#08298A;
text-decoration:none;
}
with
#navigation li:hover a {
color:#08298A;
text-decoration:none;
}
I have a pure CSS implementation of horizontal menus that works fine on browsers on a computer. The website is www.intercessionsp.org. However, on touch devices (specifically, I have tried Safari on iPad and iPhone), the menus do not work. Touching them causes no response at all, if there is a submenu (the Home menu item works fine). I have tried to implement two solutions:
1. using onclick="return true", based on terraling's solution in "iPad/iPhone Touch Event on Hover CSS" question here on stackoverflow.
2. adding #ios ul { display: none; } and #ios li:hover ul { display: block; } based on a post by Philip Renich on elfboy.com called "Making CSS Drop Down Menus Work on the iPhone".
Neither worked.
Here is the relevant part of my css file:
/* horizontal menus */
#nav, .nav, #nav .nav li {
margin:0px;
padding:0px;
}
#nav li {
float:left;
display:inline;
cursor:pointer;
list-style:none;
padding:10px 30px 10px 30px;
border:1px #000 solid;
position:relative;
background: #990000;
}
#nav li ul.first {
left:-1px;
top:100%;
}
li, li a {
color:#fff;
text-decoration:none;
}
#nav .nav li {
width:100%;
text-indent:10px;
line-height:30px;
margin-right:10px;
border-top:1px #000 solid;
border-bottom:1px #000 solid;
border-left:none;
border-right:none;
background:#990000;
onclick="return true"
}
#nav li a {
display:block;
width:inherit;
height:inherit;
}
ul.nav {
display:none;
}
#nav li:hover > a, #nav li:hover {
color:#990000;
background:#fff;
}
li:hover > .nav {
display:block;
position:absolute;
width:200px;
top:-2px;
left:30%;
z-index:1000;
border:1px #000 solid;
}
li:hover {
position:relative;
z-index:2000;
}
#basic li {
color:#000;
}
Since I already have display:block in my li:hover > .nav, I tried adding it to #nav li:hover > a, #nav li:hover (without expecting this one to work) and to li:hover, but neither worked. I should add that I looked at Renich's comment about setting a width value, but since I already had width values set, this didn't appear to be useful.
I would like to stay with a pure CSS implementation.
Your menu relies on the css selector :hover in order to show the list items. In order for those to show on a mobile device like an iphone the user must be able to click. You can try wrapping the text on the first level on your menu with <a> tags. For example: About Us
View this on a mobile device:
http://jsfiddle.net/tlaverdure/L42AE/
Helo!
Dropdown in IE7 displayed not correct. When I put mouse over it's appears like inline block and it's too far to the right. When I put mouse over first element in ul, second one disappears. And near each element is weird angle, which is angle of that menu which appears after I put mouse over.
any help or advice will be appreciated!
http://jsfiddle.net/an4Ng/
My code is:
nav ul {
padding:0;
margin-right:15%;
margin-left:15%;
float:left;
position:absolute;
}
nav ul li{
float:left;
position:relative;
overflow:hidden;
z-index:200!important;
padding:5px 35px;
margin-top:5px;
display:block;
}
nav ul li a{
text-decoration:none;
font-family: BebasNeueRegular, Arial,calibri;
font-size:x-large;
color:#eee;
}
nav ul li:hover{
overflow:visible;
position:static;
}
nav ul li ul{
width: auto; height: auto;
display:block;
position:absolute;
border:3px solid gray;
background-color: black;
}
nav ul li ul li a{
text-decoration:none;
font-size:large;
margin-top:15px;
}
nav ul li ul li a:hover{
text-decoration:underline;
color:#caf9ff;
}
I just threw this together but how's this?
http://jsfiddle.net/PgVQC/3/
Obviously I haven't tested it in IE7 but it's how I tend to do my dropdown menus.
You might have to throw in a bit of jquery to get the menu to display in IE7, here's an example from a site I built a few weeks ago.
http://jsfiddle.net/9L4EC/2/
Here's the site: http://breteastman.com/stormwater-basics/
Here's the dropdown css & menu CSS.
#menu-main-menu{margin-left:-30px;}
#menu-main-menu a:hover {color:pink;}
#menu-main-menu{
list-style:none;
display:inline;
text-align:center;
}
.main {
margin-top:20px;
}
#menu-main-menu li{
float:left;
}
#menu-main-menu li{
padding-left:5px;
padding-right:5px;
border-right:1px #fff solid;
}
.main{
padding-top:-1000px;
}
#menu-main-menu li a{
color:#fff;
font-size:1.2em;
text-decoration:none;
}
#navigation li a:hover{
color:#399edb;
text-decoration:none;
}
/* dropdowns */
/* Hiding the other chlidren */
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu {display:block;}
ul#menu-main-menu li#menu-item-64:hover ul.sub-menu li a {background-color:#000;padding:5px;color:#fff;margin-left:-20px;}
ul#menu-main-menu li#menu-item-64:hover > ul.sub-menu li.menu-item > ul.sub-menu > * {display:none;}
.sub-menu { position: absolute;display: none;float:none;list-style:none;}
.sub-menu li { clear: both;width:225px;background-color:#000;padding:10px;border:0;text-align:left;}
.sub-menu {list-style:none;}
basically when I go to click, the drop down goes away. Please help!
Try taking out the display:none on .sub-menu:
.sub-menu { position: absolute;float:none;list-style:none;}
That should get you closer to your solution.
You have missing stylesheet properties. I see you are using superfish dropdowns. You can include their stylesheet :
<link rel="stylesheet" media="screen" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css" />
and then just adjust your website's navigation styles to what you want.
See my link : http://jsfiddle.net/nCK2P/1/ [excuse the colours used, just for the example]