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.
Related
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
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
For some reason, I made it so my text (a) that is active is bolded, but it is only active when it is clicked with my mouse, when it is released from the click, it turns off and the text goes back to it's normal state.
Why is this?
If you got to MSN, look at the text above their search bar. When you click on it, it bolds and turns orange. Without leaving the page. That's what I am trying to do.
HTML:
<div id="searchtopics">
<ul>
<li>Web </li>
<li>MSN </li>
<li>Images </li>
<li>Video </li>
<li>News </li>
<li>Maps </li>
<li>Shopping </li>
</ul>
</div>
CSS:
#searchtopics {
position:absolute;
margin-left:208px;
margin-top:38px;
}
#searchtopics a {
text-decoration:none;
float:left;
padding: 2px 6px 4px 6px;
color:rgb(100,100,100);
}
#searchtopics a:hover{
text-decoration:underline;
}
#searchtopics a:active{
color:rgb(100,100,100);
font-weight:bold;
}
#searchtopics ul {
display:inline;
list-style:none;
}
#searchtopics ul li {
display:inline;
color:rgb(100,100,100);
font-family:"arial", times, sans-serif;
font-size:12px;
}
That's because that link is only active hen you click it with the mouse. If you want the effect to last for the entire length of the mouse being over it use :hover. If you want it to last after the page has been visited use :visited.
edit
If you want the link to stay active when a new page is loaded you'll need to give that link a class that applies that style to it:
<li>Images </li>
#searchtopics a:active, a.active {
If you want to display link which contains to actually displayed content, there is no other solution than little javascript. Write some function to display content which will disable all other bolds, enable bold for current link and display the content.
There are four main states of a link:
a
a:hover
a:active
a:visited
a - is just when it is sitting there and it has never been clicked or in the processing of being clicked.
a:hover - this is kind of like the equivalent of a mouseover event in javascript (if you are familiar with that). when the pointer "hovers" over the link the style can be changed then.
a:active - this styling only shows up the split second that something is clicking on the link. This pseudo class is probably the least used by the general public for this reason.
a:visited - this styling shows up after a person clicks on a link.
So if you are trying to change the style of a link that is noticeable, I would recommend using a different pseudo class rather than a:active.
Hope this helps!
I know it's old topic but simple solution for it is to replace a.active instead of a:active , it did the trick for me so it should do for you aswell
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..
I have created a dropdown menu using CSS and JavaScript and I'm having an issue making the sub-menus appear correctly on IE7. When you hover on an anchor tag the background changes to blue. The problem is that in IE7 the background only changes for the length of the text rather than filling the width of the ul. So, if you have one item that has a long name, the rest display incorrectly as shown by the picture below.
You can see the problem on jsfiddle here. Just make sure you open it in IE7 or use IE9 in compatibility mode.
I have tried a bunch of things like setting the width to 100% and the display to block but haven't been able to get it to work. Has anyone solved this problem?
Thanks
Well, let's see what do you have:
<li>Content</li>
so you can see that the problem is that the hover is being applied to the <a> and because it's not wide enough it does not work correctly.
Why don't you hover the <li> instead then?
changing from
#mainmenu li a:hover { background: #008de2; }
to
#mainmenu li:hover { background: #008de2; }
P.S. I'm using IE9, so I can't test it properly :-/
Try setting display:block on those anchor tags.
You may find your solution here (jsfiddle).
I made a few changes to #mainmenu li ul li, as well as adding #mainmenu li ul li:hover { background: #008de2;}. Seems fine on my IE7, IE9 (don't have IE8 to test), Safari, Firefox, Opera, and Chrome :)