I am developing web with wordpress and have a problem with it's submenu. The problem is that it doesn't appear with hover on IE6. There must be something wrong with css, i guess. Any ideas? Is this possible to be done without javascript?
as i understand the problem is with #access ul ul { display:none; } as i delete it, it shows allways the submenu.. is there ny way to change it into something?
My guess since I don't have the code is that the submenu is using li:hover to cause the submenu to appear. IE6 only supports the :hover pseudoclass on <a> tags (only a:hover will work in IE6).
Check out CSS Play for some CSS only dropdown menu examples.
Nope it is not possible without javascript at least in IE6, you need javascript for IE6 :(
Here are some options for you:
IE6 Hover Issue
I think it is possible with this simple trick (overflow-height-trick).
Note that:
A container should have real height.
A wrapper should have real height and "position:absolute".
A childs of wrapper should have real height and "position:relative".
Wrap your menu like this:
< div id="container" >
< div id="menu_wrapper >
< div id="selector" >Computed Value< / div >
< ul id="menu" >
< li >Predefined Value< / li >
< li >Predefined Value< / li >
< li >Predefined Value< / li >
< ul >
< / div >
< / div >
Set styles:
< style >
div#container{height:100%;}
div#menu_wrapper{height:32px; position:absolute;}
div#menu_wrapper:hover{height:100%;}
div#selector{height:32px;clear:both;}
ul#menu li{height:32px;}
< / style >
Enjoy )
Related
In chrome (and possible in other explorers) the ul element has a default padding that gives it a nice deeper indent to each depth level of the ul.
i.e. the first ul will get padding of 10px, the second ul>ul will get 20px and so on.
I've tried to find a way to make only the first one with padding 0 so that it'll get a nice position for him without damaging the child uls indention structure.
And that's the result:
This code will make all ul elements that are not direct children of a li element with padding 0 (or whatever code you'd like to put there).
*:not(li) > ul {
padding: 0;
/* more code */
}
Best solution, if you don't need to support IE8 and below is this:
:not(ul) ul {
padding-left:0;
}
If you actually need to support some legacy browsers, you'll have to specify a general padding for ul elements yourself:
ul {
padding-left:0;
}
ul ul {
padding-left:10px;
}
I just discovered that the CSS dropdown menus on this site do not work in Internet Explorer. Not at all, absolutely nothing shows.
The menus work just fine in Firefox, and in Android
Here is the site: http://anlea.org
I've tried a number of fixes, but nothing makes the dropdown menus show up.
Any (simple!) solutions would be greatly appreciated
IE doesn't always play nice with li:hover which is what your CSS menu appears to be relying on. The accepted answer to this question may be of help: IE8 does not hover when using an li with position:absolute
You are not displaying the nested ul on hover, just the li's inside the nested ul. Try adding this:
.main_menu > ul > li:hover > ul {
display: block;
}
also i would advise you to work with child selectors so something like this:
.main_menu ul li /* this would also apply to the submenu's, you overwrite them later in your code */
would become
.main_menu > ul > li /* this will only apply to the top level menu */
for nested menu's. This should not brake the code, but will keep you much more in control and avoid unexpected results.
if you want all li to have the same background for example, both top level and nested, you could still use
.main_menu li
I'm using IE9 to view the site and the menu works fine, only after I switch back to IE9 Standard Mode.
Your site defaults to the Quirks Mode in IE9.
You can refer to here: http://blog.timolthof.com/disable-quirks-mode/ to try to disable Quirks Mode.
height and width of the drop down should be given in px not in % some versions IE does not support width and height in %
Check out www.sadrobotdevelopment.com for example of what I am talking about (best viewed in chrome)
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
This is the CSS that makes the menu flyout, what I want to figure out how to do is make it clickable as well. Mostly due to the fact that tablets and smartphones don't have hover. Is there something in CSS that can handle this, or do I need to look into getting my site optimized for mobile browsing?
If there is a link before child UL, you could use :focus and :active pseudoclasses for link in conjunction with adjacent-sibling combinator:
#menu LI > A:focus + UL,
#menu LI > A:active + UL {
opacity: 1;
/*...*/
}
There's no way to achieve click events with pure CSS. You can hook up a javascript click handler to add an "active" class to your element and have the CSS use that in addition.
I have a drop down menu made in css. When you hover over the text (ul) the menu appears (the li appears). I wanted to know, how to make a submenu, that when you hover over the li's another menu (submenu) would appear and would offer other options.
Ex:
-Tutorials (You hover over tutorials)
(Then these options appear)
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices)
//How do I make that!
-Windows xp
-windows 7
-Windows Vista
That is what I want to make.
Thanks people!!
you need this tutorial: son of suckerfish dropdowns
If you're using pure CSS then you just need to add a new level of styles. You haven't posted your original code, but assuming you currently have something like:
ul.menu > li > ul {
display: none;
}
ul.menu > li:hover > ul {
display: block;
}
Then you'd simply need to add:
ul.menu > li > ul > li > ul {
display: none;
}
ul.menu > li > ul > li:hover > ul {
display: block;
}
You will of course need to add some positioning code to your third level list so it appears to the right of the active menu item.
CSSPlay is a great resource with all kinds of menu's you can possibly imagine. Plus all menu's are completely cross-browser.
Check it out, I'm sure Stu got one that fits your needs:
http://www.cssplay.co.uk/menus/
I am building a menu using XHTML,CSS, and jQuery and I ran into a problem with my CSS.
Here is my test page, and here is my css.
What I am having problems with is that my .subMenu class is inheriting the properties of my #menu, the background colors and sizes are the same. I am looking for a solution that leaves .subMenu as a class so I can re-use it. I got it to work by changing .subMenu to an ID. The weird thing is that I edit some of the properties in my jQuery code using the .subMenu class and it changes those.
So I was wondering if someone could let me know how to fix it and if it was a hierarchy issue if they might explain it.
Thanks,
Levi
I think the problem is that the #menu > li a will apply that style to all links inside of the li tags, so all of the li tags inside of the submenu will also have this style. It looks to me that the only difference is in the background and foreground colors on hover, so you could fix it by changing #menu > li a and #menu > li a:hover to be #menu > li > a and #menu > li > a:hover. This way, the styles for the top level menu will only be applied to links which are directly after an li tag which are directly after the #menu item. The submenu styles can stay the same.