I am an amateur developer looking to develop my skills in the world of programming. I apologize for any redundancy that may occur in the stackoverflow forum, but I felt that personalized assistance would solve my question quite a bit faster.
My current site has the main navigation menu set to hover only, if you were to move the cursor off of the menu it disappears. I would like this to be a click-menu. I am not sure what to do, this may be an easy fix but I would feel more comfortable getting the help of a grizzly veteran.
(I have little/no JavaScript Experience)
I believe this is where my problem may lie, but I am hesitant to alter my theme's css.
mainnav-menu li:hover ul ul, #mainnav-menu li:hover ul ul ul, #mainnav-menu li:hover ul ul ul ul{
display:none;
}
mainnav-menu li:hover ul, #mainnav-menu li li:hover ul, #mainnav-menu li li li:hover ul, #mainnav-menu li li li li:hover ul{
display:block;
P.S. I am new to the web development community so I have been very hesitant to ask for help / stick my neck out. I would truly appreciate any support.
Andrew
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}
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.
According to PageSpeed, my css not using efficient CSS selectors.
Could someone show me know what I am doing wrong?
My CSS :
#header .link-bar .fl .last a:hover
div.box-default div.box-caption .box-title a
.news ul li div.top a
.news ul li div.top a:visited
.news ul li div.top a:hover
.link-bar ul li
#header .link-bar a
#header .link-bar a:visited
#header .link-bar .last a
#header .link-bar a:hover
#header .link-bar .last a:hover
#header .link-bar .fl a:hover
#footer .link-bar a
#footer .link-bar a:visited
#footer ul li
div.list ul
div.list li
.ads ul li
.news ul li
#paging_button ul li
#paging_button ul li:hover
.tt_wrap .ttbox span
#paging_button ul li:hover
many thanks.
Your selectors are maybe too specific, browsers read CSS right-to-left instead of left-to-right.
So .link-bar ul li is faster than #header .link-bar ul li
This also means the rightmost selector is the most important for performance. If you can add classes to the rightmost elements it'll help a lot .news ul li div.top a vs .news ul li div.top a.top-link
Check out this Why do browsers match CSS selectors from right to left?
Without knowing what your CSS does and your reasons for arranging it like this and how / where its being used and what's being done with the page there are no right answers.
All that PageSpeed is telling you is that there some very efficient selectors that get you to an item very quickly indeed and some less efficient ones that cause the CSS engine to trawl a bit before it finds what you intended. Both will apply the style you want, one types takes less CPU cycles than the other does, but in most cases we're talking about a few CPU cycles here and there and not seconds. The machine the browser is running on and the browser itself have significantly more impact than the selectors themselves. So this just means that in your CSS you have some of the less efficient selectors.
for example you could write rules like this (with nested elements) and you clearly have some of these.
ul li {color: blue;}
ol li {color: red;}
but equally and more efficiently you could have done this (a single class selector) - however you would need to alter your mark-up to support the addition of these classes on the li and in the process increase the 'weight' of you page.
.ul-li {color: blue;}
.ol-li {color: red;}
Not that this rather trivial example will make a significant difference either way, but when render speed is vital and you're working locally on a fast network or with older / less powerful machines then it may pay off. If you've got to send to remote browsers over very slow connections than increasing the payload you send may make things worse.
Basically, every time you put any of these it's more inefficient than not doing so.
Rules with descendant selectors
Rules with child or adjacent selectors
Rules with overly qualified selectors
Rules that apply the :hover pseudo-selector to non-link elements
overly qualified selectors are when you use many selectors to get to the same place
div.box-default div.box-caption .box-title a
does the following give the same results or are there many box-tiles likely on a page?
.box-title a
Its also a significant amount of work to build CSS files and mark-up that don't have any of these.
for more information on what these are (with examples of reach type) please see the following links:
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors
http://www.w3.org/TR/CSS2/selector.html#child-selectors
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
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
}
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/