I have 3 links to other pages, but only no3 shows a color change on hover in Safari.
It works fine in Firefox and others but not Safari.
ul .root-menu li:hover > a {
color:#FFF;
}
<div id="menu">
<ul id="root-menu">
<li>HOME</li>
<li>AREA COVERED</li>
<li>CONTACT</li>
</ul>
</div>
its a bit complicated when cant see real example of your case, but maybe try to set display: inline-block or block for links
ul#root-menu li > a {
display: block; // or inline-block
}
also try to add :hover state styles directly for a, but not for li:
ul#root-menu li > a:hover {
color:#FFF;
}
But again, answer would be more accurate if you will show real examle
Related
ok the code is listed below, and when I adjust the css as follows:
.Nav {
color:red;
float:left;
display:inline;}
It wont display inline? What Am I doing wrong? Im sure this is a stupid question.
<head></head>
<body>
<div class="Nav">
<ul>
<li>Home</li>
<li>Sign Up</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</body>
dont use float and dislay inline at the same time just use `
display:inline-block;
and it will work perfectly fine
i would also recommend you to read this article, it's a short article but helps a lot
click this to read the article
atleast it did help me a lot and cleared my concepts of float and display
It will. Your div is the one with the .Nav class so that div will be displayed inline. Try:
.Nav li{
display:inline;
}
Here is a jsfiddle example
.Nav ul li{
color:red;
display:inline;}
You can put display: inline on li elements, all they will be on a unique line.
As you can see here: http://jsfiddle.net/b31krn9b/
CSS:
.Nav {
color:red;
float:left;
}
.Nav li {
display:inline;
}
Another ways to align:
Using float: http://jsfiddle.net/b31krn9b/1/
Or even display: inline-block (this is better because you can use margin-right and left): http://jsfiddle.net/b31krn9b/2/
The div itself is displayed inline, but since it's the only element inside the body, it has no visible effect.
You need to set it on the li elements:
CSS
div.nav ul li {
float: left; /* All li elements inside the div.nav are floated to left... */
display: inline; /* ...and displayed inline – but it does not make sence,
since a floating element cannot be inline. */
}
HTML
<div class="nav">
<ul>
<li>Home</li>
...
I've tried unsuccessfully to fix this for the last few days:
the first time I open the page it has some weird padding on the dropdown menu, only happens on chrome (works fine on FFx and IE)
after the first time the page is loaded it loads fine
as you can see on the screenshot I've already put
.myCustomNav ul
{
padding: 0px !important;
}
the dropdown menu is called like this:
<div>
<ul class="myCustomNav nav">
<li>
<a .../>
</li>
</ul>
</div>
any idea what's wrong?
you can test for yourselves on http://istore.titus.biz/lovelovelove/#
Do you want to reduce the padding on the dropdown? Then reduce the padding on the following class in your css.
.horizontal-category a:link,.horizontal-category a:visited{
color:#96979D;
padding:4px 6px;
display:inline-block;
font-weight:bold;
border-right:1px solid #ec008c;
/*background:#09C;*/
}
Invalid solution - Comments below
You need to make the li for .dropdown-menu - display: block. This needs to be placed at the bottom of your nav CSS.
CSS
.dropdown-menu li {
display: block;
}
If you want to test this do this:
.dropdown-menu li {
display: block !important;
}
That should fix it, but do not use !important as your solution. Just make sure that the first snippet is below the other dropdown CSS.
changed
.myCustomNav li{ display:inline;}
to
.myCustomNav li{ display:inline-block;}
and it worked, just needed a few extra tweaks to position it then
I have this menu that I customized to use it like a select. It work just fine on ie, chrome but on firefox is not working. Normal behavior is: when menu is expanded on focus the links are displayed (help and logoff) and if you click on them will be redirected in other page in the same browser. Wrong behavior on firefox: menu si expanded on focus but links (hep and logoff) are not redirecting.
<ul id="main">
<li class="username" tabindex="1" > <a>USER</a>
<ul class="curent_buser">
<li class="ai"><a class="jaximus"href="http://en.wikipedia.org/wiki/Wiki">Help</a></li>
<li class="aj"><a class="jaximus" href="http://en.wikipedia.org/wiki/Wiki" name="logoff">Log Off</a></li> </ul>
</li>
</ul>
Why is doing this firefox??? I have last version of ff :|
here is a fiddle example: http://jsfiddle.net/RwtHn/1152/
It's because the instant you press down on either "Help" or "Log Off" the encompasing a element gets the focus and is active, which "deactivates" this rule:
#main li:focus ul, #main a:active + ul{
display:block;
}
Thus the link (or more specifically the ul encompassing the link) vanishes before the click on the link has been completed.
At least this seems to be how firefox handles it.
EDIT: It should work with adding the selector
#main li.username:active ul
to above rule.
Change your final rule to this:
#main li:focus ul, #main a:active + ul,
#main li ul:hover
{
display:block;
}
The #main li ul:hover rule means that the submenu will stay open long enough for the click to register.
See forked JS Fiddle
p.s. Cool trick, I've never seen a select box launched like this before.
Sorry with title if it is not looks bad, I don't know how can I write the title for my issue.
So I have a menu bar with some menu-items and submenu-items as:
<div id="mainmenu">
<ul id="menu">
<li><a class="current" href="">Menu1</a></li>
<li>Menu2
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
Here is the fiddle of what I have done so far.
What I want is to keep the menu-item also in :hover state if its submenu-item is being hover, such as If my mouse is on submenu or submenu2 the Menu2 should also be darkened. How can I do this with CSS?
I hope I am clear with my question.
EDIT:
Wooo thanks a lot every-one.
got it with: #menu li:hover
#menu li:hover,#menu a:hover,#menu > li a.current{
}
In last line of your CSS, add #menu li:hover to target selectors
Updated example here: http://jsfiddle.net/7UaNn/
Add this #menu li:hover > a in the following css
#menu a:hover, #menu > li a.current {
// your Style
}
So it should look like this:
#menu a:hover, #menu > li a.current, #menu li:hover > a {
// your Style
}
See Demo: http://jsfiddle.net/akhurshid/bk2HA/7/
At the moment all you hoverstyles for the listitem are applied to the a- Element.
However, you need to apply them to the li-Element to keep the hover state active.
Sometimes that may become tricky, but in your case it's pretty easy, just add:
#menu > li:hover{
background:#474747;
}
to your styles.
See your modified fiddle
Along with "a" also add hover for "li" :
#menu > li:hover{
background:#474747;
}
You may achieve this by hooking up to the :hover state of the parent li element instead of the anchor element - which is a children of the list-item that is actually hovered - like so:
li a:hover,
li:hover > a {
color: #fff;
}
You might need to use :nth-child() to get around every sublink being in hover state. Did not test this.
/edit: updated the selector, now using > a to only select the direct child anchor element of the hovered list element, no need for :nth-child or the like.
Make the thing that is changed on hover the background of the LI rather than the background of the 'a'.
ul#menu li:hover { background:#000; }
The following snippet is causing me a QA headache.
<div id="links-container">
<ul>
<li class="resource-link li-sep"><em>Enjoy family-friendly</em>ACTIVITIES AND ATTRACTIONS <span>»</span></li>
<li>...etc...</li>
</ul>
</div>
I tried this in CSS, but nothing is working;
#links-container ul li a { color:#C28234; }
#links-container ul li a span { font-size:140%; line-height:1em; }
#links-container ul li a em { display:block; font-family:Georgia; font-weight:normal; margin-bottom:-6px; }
#links-container ul li a:focus em, #links-container ul li a:active em { outline:none; }
#links-container ul li a:hover { color:#75450A; }
What's happening is that in Firefox, when you tab through the links, it's creating outlines around both sets of text which have close proximity to each other and are causing overlapping outlines.
Our project mgrs wish to keep the outlines to promote accessibility.
If you view it in Chrome, it will wrap the entire contents of the anchor in an outline. And we consider this to be perfect. My question is, can something be done that can replicate this in Firefox. Or at the very least, clean it up so that the outline doesn't look like dung when Firefox individually outlines each text item in the same link.
Anyone else ever have to deal with this? If so, how'd you get past it?
Thanks
Well. It's a partial solution, but can work in your case. If you you have problem with menu items only you can apply "display: inline-block;" to links in here, to make it have a common outline.
Example: jsfiddle.net/zDbsQ/2/
EDIT: Fixed link to example, original was wrong.
You can just use:
#links-container ul li a *{ outline: none; }
This will select all elements within an a and disable the outline..