I've got a safari-specific problem with a hover effect probably related to the synthetic click vulnerability fix in iOS 8.4.1. When the user tries to click on a link there is no response.
The menu is a simple CSS-only menu. I have created a demo here: https://jsfiddle.net/baad95e3/
#menu :hover ul {
right:auto;
left:0;
}
#menu :hover ul ul {
left:-9999px;
width:160px;
padding-left:5px;
background:none;
}
#menu li ul :hover ul {
left: 170px;
right:auto;
}
#menu li ul li ul li a {
text-align:left;
color:#000;
}
#menu li ul li ul li a:hover {
color:#000;
}
What would be a good workaround without losing the hover effect.
Hacky but can work, did for me in some cases:
* { z-index: 0; }
Related
So, I've tried to implement a two column menu into my wordpress, using this CSS code which I’ve found on the internet:
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
border-left:2px;
border-color: #404040;
}
I added .sub-menu-columns as a CSS class for the top-level-menu “Products” at which only!! the two column sub menu should be seen.
I managed to get this to work. Now is the problem, since the menu is bigger in width, that I need to move the sub-menu container to the left. I also managed to solve this issue with this code:
#mainnav ul li ul{
left:-400px;
}
Now is the only thing, that all other Menus with submenus are moved to the left too (as you can see with “Contact/Support”)
My logical approach would be to edit the previous code to:
#mainnav .sub-menu-columns .sub-menu ul li ul{
left:-400px;
}
In addition, adding border-left doesnt bring any border up.
Here is how it looks like:
And this is how it should look like:
My current custom CSS script for the menu (with double colums, moving to the left and the Bootstrap Arrow-up back to the righ which is the ::before):
.sub-menu-columns .sub-menu{
display:inline-block;
width:500px !important;
background-color:#FFFFFF;
}
.sub-menu-columns .sub-menu li{
width:50% !important;
}
.sub-menu-columns .sub-menu li a:hover{
color:#FFFFFF;
}
.sub-menu-columns .sub-menu li:nth-child(even){
float:right;
}
#mainnav ul li a{
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul{
left:-400px;
border-left:2px;
border-color: #404040;
}
#mainnav ul li ul::before{
left:450px;
}
However that is not working.
Any ideas maybe? Since I've heard many people use lately jsFiddle for helping out, I'm not sure if I've done it right, but this is what I could provide for you: https://jsfiddle.net/mve1wdfd/
Website: https://xs-sol.com/
Thank you for your help!
Update: I think the main issue is that I'm unable to combine the id=mainnav with other classes and ul's, il's a:hover's and so on.
I get the feeling that these are really simple problems, however I'm new to coding and can't work out how to fix them. Any help would be greatly appreciated.
Firstly, the hyperlink text is currently the only clickable part of the dropdown menu. I want to be able to click the whole section of the menu that the text sits in, i.e the individual parts separated by the 1px borders. I'd also like these sections to change color when the cursor hovers over them, but I'm not sure which part of the css to change if I want to achieve this.
Secondly, the padding creating the space between my main menu links is being included in the link hover function. Is there a way of spacing out the links that doesn't cause the subpages to drop down when I hover over the white space to the left of them? (This seems like the opposite of my first problem)
Finally, part of the css I've written makes any of the parent menu links that have been clicked stay highlighted purple while the viewer is on that page. This was intentional, however now that I have child pages in the dropdown menu, they all stay that color too when the parent page is clicked. Is there a way of fixing this? it would be ideal if both the parent link and the specific child link stayed highlighted purple whilst the viewer was on a that particular child page.
The website link is www.lucieaverill.co.uk
Here is the code :
HTML:
<nav class="site-nav">
<?php $args = array('theme_location' => 'primary'); ?>
<?php wp_nav_menu(); ?>
</nav>
CSS:
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding-left:50px;
padding-bottom:20px;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
UPDATE! ------------------------------
I think I've made some progress based on what various people have been saying about a tags. I've managed to reach the point where the hover effect changes the a tag's color, however the padding is a little off, and I can't work out why. I've tried setting the padding-right value to "auto", as I don't think it can have a specific value as each link varies in length.
Obviously, I want the padding to extend to the very end of the menu at the right hand side, but I can't make this work.
There also seems to be some odd spacing between the color of each link, and at the very bottom of the menu.
I'm surprised to see that the transition between colors is smooth and gradual.. I don't think I have any css that tells it to act like this.. is there a way of making it more instant?
The web link again, is www.lucieaverill.co.uk
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
margin-left:0px;
float:none;
}
.header ul li ul li a {
background-color:#FF3F55;
padding-left:10px;
padding-right:auto;
padding-top: 12px;
padding-bottom: 12px;
font-size:11px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li:hover a {
background-color:#ededed; }
/* end dropdown menu */
See the fiddle:
Remove the padding of li and add the required padding to a tag.
the clickable problem will be fixed.
/* header navigation menu */
.header nav ul{
display:block;
float:right;
width:auto;
margin-top:15px;
padding: 0;
background-color:#ffffff;
list-style:none;
}
.header nav ul li {
float:left;
padding:0px;
}
.header nav ul li a{
padding:20px 25px;
}
.header nav ul li a:hover {
color:white;
background:black;
}
.header nav ul li.current-menu-item a:link,
.header nav ul li.current-menu-item a:visited{
color:#A084BD;
}
/* dropdown menu */
.header nav ul ul {
position:absolute;
left: -999em;
}
.header ul li:hover ul {
left:auto;
width: 200px;
}
.header ul li ul li {
float:none;
padding-left:10px;
padding-top: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ededed;
}
.header ul li ul li a {
font-size:11px;}
/* end dropdown menu */
/* end header navigation menu */
<div class="header">
<nav class="site-nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>submenu
<ul>
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
</ul>
</nav>
</div>
This is my full code: https://jsfiddle.net/dv6gxtoh/2/
I want the dropdown box to expand and be the full width of it's content (so it doesn't have to drop things down a line) but I also don't want it to stretch the main dropdown button to the same width.
The best example I can give is something a bit like this:
http://i.stack.imgur.com/w3ym8.png
This is the CSS I am using:
* {
margin: 0;
padding: 0;
}
.click-nav ul {
position:relative;
display: inline-block;
}
.click-nav ul li {
position: relative;
list-style:none;
cursor:pointer;
display:inline-block;
}
.click-nav ul li ul {
position:absolute;
left:0;
right:0;
}
.click-nav ul .clicker {
position:relative;
color:black;
}
.click-nav ul .clicker:hover, .click-nav ul .active {
background:#196F9A;
}
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
}
.click-nav ul li a:hover {
background:#F2F2F2;
}
/* Fallbacks */
.click-nav .no-js ul {
display:none;
}
.click-nav .no-js:hover ul {
display:block;
}
The closest I could get it to remove position:relative; from .click-nav ul which does the trick, except the dropdown menu doesn't sit under the button which opened it.
Any help would be appreciated.
Seems to me white-space : nowrap is what you need, i.e
.click-nav ul li a {
display:block;
padding:8px 10px;
background:#FFF;
color:#333;
text-decoration:none;
white-space: nowrap;
}
forked fiddle -> http://jsfiddle.net/j5ckepbm/
Check the shared fiddle..
you need to make few changes to your css, like adding and width/min-width to your dropdown.
white-space:nowrap
Click to see the fiddle, commented lines are mine changes
You may need to add one more class with a fixed width to get it done.
.click-nav ul li ul li {
width: 150px;
}
Here is a fiddle
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
I am trying to change the background colour of an anchor element when it's in a hover state, the problem is I am not able to achieve this with style I have below.
jsfiddle
http://jsfiddle.net/fwP6g/
css
.dropdown ul{
margin:0; padding:0; float:left; width:100%;
}
.dropdown ul li{
list-style:none; float:left; width:100%;
}
.dropdown ul li a{
float:left; width: 265px; height:20px; padding:5px;
padding-top:10px; color:#000; font-size:12px;
border-bottom:1px dotted #666; background-color:#FFF;
}
.dropdown ul li a:hover{
background-color:#F80101; !important
}
.dropdown ul li:last-child a{
border-bottom:none;
}
.dropdown ul li a#pink{
background-color:#FFE8E8;
}
html
<div class="dropdown">
<ul>
<li>Orders</li>
<li>Favourites</li>
<li>Account</li>
<li>Settings</li>
</ul>
</div>
I'm confused, I don't why this is not working, any help would be appreciated.
The !important needs to go before the closing ;.
.dropdown ul li a:hover {
background-color:#F80101 !important;
}
jsFiddle example
It's not semantically correct to have two elements with the same id. Also, using ids for your selector gives the rule a very high precedence, which is why you need to use !important.
I would suggest giving the last 2 list item links a class of pink instead of an id.
Then you would just need to declare the .pink rule before the :hover rule. Since both rules have the same precedence, and the :hover rule comes after, it will override the .pink rule.
http://jsfiddle.net/fwP6g/2/
HTML
...
<li><a href="/account" class='pink'>Account</a></li>
<li>Settings</li>
...
CSS
.dropdown ul li a.pink{
background-color:#FFE8E8;
}
.dropdown ul li a:hover{
background-color:#F80101;
}
Change your id="pink" to class="pink", than in your css add this to your hover .dropdown ul li a.pink:hover
Add this:
false:
.dropdown ul li a:hover{
background-color:#F80101; !important
}
true:
.dropdown ul li a:hover{
background-color:#F80101 !important;
}