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}
Related
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
Im trying to change to the color in both the drop down menu, as well as the footer background color of the site http://ablecareinhome.com/
Ive tried numerous css tweeks to make this change, but I am at a stale mate. I was able to get the nenu buttons themselves to change using the following:
#menu li.current-menu-item a,
#menu li.current-menu-parent a,
#menu li.current_page_parent a,
#menu li a.selected,
#menu li a:hover,
#menu li.current_page_item a {
background: url("../images/menu-bg.png") repeat-x scroll center top #00a99d !important;
}
this is the color i am going for in the other footer and menu parts. #00a99d
Any help is appreciated. As a side note, this theme allows internal css options/modifications without building a full childs theme. It is done from the dashboard, and stylesheets are coming from external source it appears.
Any help is greatly appreciated!!
well see the css here
#menu .sf-menu li li {
font:12px Arial, Helvetica, sans-serif !important;
text-transform:capitalize;
margin:0;
padding:0;
background-color: #00a99d;}
As for footer its an image see the link
you can remove the backgroun image and
edit this css
.footer-container {
background:url(../images/footer-bg.png); remove this
background-color: # #00a99d;}
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.
I've had this trouble before with pure CSS sub menus. It looks fine in FF (On OS X at least) but in other browsers it's aligned with the right hand side of the parent li as oppose to the left as it should be.
An example can be seem below (Hover over "About us" or "My Landmark 24")
[removed URL]
Does anyone have any idea what it is I'm doing wrong?
Set to your .navigation ul.menu li ul.sub-menu css class style left:0px.
on the .navigation ul.menu li ul.sub-menu { just add left:0; that will fix it
Your submenu is set to display:inline on hover. If you change that to display:block it should be fixed.
.navigation ul.menu li:hover ul.sub-menu {
display: block;
}
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
}