I have a CSS/HTML based menu and when i hover on a single menu item All child menu items shown. what can be the
root course for this problem ?
where should i start debugging in CSS file or HTML list ?
What can be the common curses for this ?
(Rather posting the code i prefer to solve this for own learning experience !
It sounds like a CSS selector issue. If more things are showing than you expect, it could be that the CSS selector (for :hover) is too broad and is picking up more items than you intend. You may need to make the CSS selector be more selective so that it only affects some of the child menus at a given time. You might be able to do this by defining different selectors that start with different IDs and then apply the :hover to just child elements of a specific element. If your code is a pure HTML/CSS implementation, that seems to be the most likely cause. It could also be that they way you have structured the HTML causes all of the child menu items to fall under the same parent element (or branch), so you may also need to ensure that each set of child menus has some unique parent/grandparent that you can base the CSS selectors on. Hope that helps point you in the right direction--good luck with figuring it out!
Related
I need to apply a function to checkbox elements that are not part of a bootstrap-multiselect element. To do this I'm trying to make a css selector that fitlers out based on the parent they have. The syntax that I have so far is this:
$(this).find("input[type='checkbox']:not(ul.multiselect-container>input)")
Where the :not(ul.multiselect-container>input) is my attempt to specify to the css selector that I want all css elements except for the ones that are children of an unordered list that has the class multiselect-container.
From doing some investigation it seems that this should be possible, but my syntax doesn't seem to cut it. How can I make this work with the :not function? OR perhaps another way.
I have a system that dynamically add classes to items, and I am hoping to be able to use :nth-child(3n) on the items that don't have that class, i.e. it "skips" the items with the dynamic class.
I created a CodePen demonstrating what I want and showing that I hoped using :not() would work, but it doesn't. I would hope it removes it from the items selected, but it doesn't appear to do that. :-/
I also tried replacing :nth-child with :nth-of-type in the example (which makes even more sense) to me, but it didn't change anything.
http://codepen.io/CWSpear/pen/qoaJC/
It would be awesome to be able to do this without JavaScript.
I have the following dropdown menu: http://jsfiddle.net/McKgU/ which as you can see works fine. However When out on eBay the layout is all over the place.
You're styling all unordered lists and list items. What!? You need to make your selectors very specific so you don't interfere with existing styles on the page.
You can wrap everything in a div and then use the child selector to select the ul and li.
Or, since you already have a ul#menu, use that in the CSS. ul#menu { ... } This will only style ul elements that have the "menu" ID. I'd still change the id from menu to something more specific in case the page has a ul with menu id, too.
Refrences: Selectors
Try this: http://jsfiddle.net/McKgU/5/
What I've done:
1) Prefixed your "menu" id with #NOINTERFERE00_
Why? Since "menu" is a fairly common name choice for ids/classes/whatever, the likeliness of there being another element on the page with the same name is very high. This ensures that there's no interference (css or js) between your 'menu' and any other element with the id "menu" on the page.
2) I've added !important to the end of each css declaration.
Why? It's also very likely that the author of the page you're inserting this into has styles targeting ul's, li's and a's. This ensures yours take precedence (unless the author is using important on his own stylesheet. He shouldn't in most cases, but might.)
What I haven't done:
3) Reset all the styles applied by the original author's stylesheet to ul, li and a's. (I'm still figuring out the better way to do it)
Scoped CSS solves both problem 1 and 2 in a more elegant way. However only Chrome supports is at the moment, I believe.
HI friends..
In a menu suppose there is an item MAIN that has drop down fro its sub categories (sub1, sub2, sub3,...). Now when mouse :hovers over MAIN I can do what ever I want. But when mouse hovers over any of its sub categories, say sub1, I want MAIN to look bold and of a particular. How can I achieve this using CSS.
thanks..
In all brevity, you can't. There's no such thing as a parent selector in CSS, even though it has been discussed in the past. But if you consider the C in CSS carefully, a parent selector doesn't make much sense in any case.
Here's another question which deals with a related/similar issue: Complex CSS selector for parent of active child
I'm working on developing a Web 2.0 site, and I've been looking at how sites deal with menus and nav-bars. Many sites (like twitter) use UL's whereas sites such as stackoverflow use div's that are ID's containing links.
Is there an advantage to not using UL's other than it eliminates some IE bugs?
is there an advantage to using UL's?
Thanks!
It depends on how you look at it, UL stands for unordered list. Putting things in a UL element is a semantic way of saying the elements children ( <li> ) are list items and therefore a logical group. Which gives the chunk of html more structure/meaning than just a bunch of div tags.
Is a menu a list? I think so. So if you can for something like this prefer the ul.
ul's can be more difficult to style with css, especially when the menu is horizontal.
I personally use ul/li for all of my menu needs as it makes it clear to even an unstyled browser (Links for example) that it is a menu of some sort and that they are various links that lead to different parts on a website.
Not only that, but the markup is remarkably easy and allows for very interesting things to be done using ul, li, and a to make awesome menu's with CSS with various options, CSS sprite backgrounds.
Using divs makes this possible as well, but makes the intent less clear. With a browser that does proper CSS layout you won't notice a difference and the only one that will know is you and the user that does a view-source.
It may make a difference if you need to parse the dom using javascript, it may not...
UL's are more friendly to screen-readers, and are a way to force you to keep the menu clean of other html. The li-tags can essentially be handled like divs, if you want that.
So basically the difference is that the ul-tag is a bit more specialized, but can deliver essentially the same thing as divs could.