im trying to construct my own navigation bar, Ive seen some forum with (css), and then im stuck of this css line,
#navbar li:hover ul, #navbar li.hover ul {
i know that the #navbar is the id name,#navbar li:hover ul i think this code said when you hover the mouse in li the ul change and became like this:display: block;position: absolute;margin: 0;padding: 0;. this one is my problem? #navbar li.hover ul whats the meaning of this, then what about on dot(.) before the hover? can some one explain this line , #navbar li.hover ul
I could guess that the rule #navbar li.hover ul was defined for IE6(and previous).
Since that browser doesn't support :hover pseudoclass for elements different than links, probably there is some javascript defined for that browser that is toggling the .hover class on mouseover/mouseenter event.
#navbar li:hover ul
this one means: "the UL inside a hovered LI inside something with ID navbar."
#navbar li.hover ul
this one means: " the UL inside a LI having class 'hover', inside something with ID navbar."
The comma between them means that the following CSS rules apply to both cases.
the "dot" means that it is the class of the li.
Related
After looking around online to no avail, I found this stackoverflow posting:
I Want To Apply Delay On Mouse Out in css
that looked like it would work in order to let a dropdown remain for a few seconds before disappearing. I looked at the 'fiddle' linked to and the CSS seemed simple enough. But for some reason it's not working on my code. Here is the code and I'm hoping someone can point out what may be preventing the fiddle solution from working. Thank You
Daniel
#nav{z-index:200;position:relative;overflow:hidden;width:100%;color:#fff}
#nav ul{padding:0;margin:0;list-style:none}
#nav ul ul{display:block!important}
#nav ul:before,#nav ul:after{content:"";display:table}
#nav ul:after{clear:both}
#nav li{display:block}
#nav li a{display:block;color:#B0B0B0;font-size:.875em;line-height:1.28571em;font-weight:700;outline:none}
#nav li a:focus,#nav li a:hover{color:blue;background:rgba(255,255,255,0.1)}
#nav li.is-active a{color:red}
#nav li ul{position:absolute;width:auto;left:-999em}
#nav li:hover ul{left:auto;display:block;background:#F2F2F2;font-family:'Times New Roman',serif}
nav ul li:hover ul{display:block;width:400px;padding:5px;height:auto}
I'm having trouble trying to understand why there is a selector after the :hover pseudo class, and not before it. How and why does this work?
This works
div li:hover > ul
{
display: block;
}
Why wouldn't this work?
div li > ul:hover
{
display: block;
}
I've done many searches trying to figure out why to put a selector or selectors after it( :hover pseudo class); and the details of how it targets it, but I just can't seem to find any information about it. Thank you in advanced!
Your selectors are logically different.
li:hover > ul matches a ul inside of a hovered li.
li > ul:hover matches a hovered ul inside any li.
Your uls are probably hidden by default, so li > ul:hover isn't going to match anything.
In contrast, li:hover > ul matches the still-hidden ul as soon as the li is hovered, and shows it.
www.pureelysium.com/Pure/index.html
Hi there
i tried removing the last both by using both the n-th child and the last-child like so
nav ul li a.last-child {border-right: none;}
I also tried
nav ul li:nth-child(n+3) {
border: 0;
}
Im stumped! Can anyone advise why this wouldnt work?
Your last-child syntax is incorrect. Should be:
nav ul li a:last-child {border-right: none;}
However, it won't work in your case. You have to use that one:
nav ul li:last-child a {border-right: none;}
last-child, nth-child and similar works always in context of parent, so nav ul li a:last-child looks for <a> that is the last child of it's parent: <li> in your case. But you'd like to select <a> within the last <li>. That's why you have to put :list-child after li, not the a.
I'm trying to make a nice-looking CSS menu, for this website. (The domain is just a sandbox, not the actual website I intend to use the designed pages on!)
As you may be able to see, there is a CSS menu at the top. When you hover over one of the sections, it drops down all nicely, but the sub-menu text is staying black, instead of the #CCC (grey) colour that I wanted -I need black for the hover font colour, for aesthetic reasons. I checked out the current CSS styles in the Inspector part of Google Chrome (F12), and the #CCC part of the section has been crossed out. From what I understand, that means it's been overidden, but I don't know what by...
If anyone has a similar code feature in their browser, I would really appreciate it if you could check it out. I made the menu all by myself, so I'd like to think I can code, but I just can't understand what's overiding the font colour.. I think it's line 73 of the new_menu_style.css file.
You should try adding this to the CSS:
.menu ul li:hover ul li a {
color: #ccc;
}
.menu ul li:hover ul li a:hover {
color: black;
}
The .menu ul li:hover a gets a higher weight than the other one, overriding it.
First: Do something about your code style. proper indentation makes a great effort to increase readability:
So here is a solution: add this to your css as these override the .menu ul li:hover a
.menu ul li:hover ul a {
color:#ccc
}
.menu ul li:hover ul li:hover a {
color:#000
}
How do i write the same when the ul is a class instead of id?
ul#Menu li a{}
ul.Menu li a{} not working properly
That's exactly right, so if it isn't working the problem is in some of the code you aren't showing us