I am having issues with my navigation bar CSS.
I want it to look like :
http://i39.tinypic.com/28is4uw.png
But this is what I'm getting:
http://i40.tinypic.com/akecl5.png
The only way for me to make it work like that is by using:
.under-menu { position: relative; z-index:999; }
but this kills the submenu links.
Thanks a lot!
Not a perfect solution, but at least some if we want to support IE, if not just adding
pointer-events: none;
Will fix the problem. This demo doesn't include pointer-events.
Here is a demo:
CSSDesk
In summary, I added the wave background inside the dropdown (in the li where the link and the drop ul is), and the effect is almost the same with your second try, with the only differents that I mask the top part of the drop down with the background that I added in the LI.
You will see that the wave background shadow becomes ticker, since the other background is still there (you can hide it with JS then it will become better, but since this is only a html/css topic I dind't add any JS )
So when you hover on the LI element the overlay background shows.
So that overlay background should be added for each li with drop-down. (like I said not a perfect solution)
Related
Please help me to fix these issues in CSS (without JS). I am studying and can't find answers to some problems with navigation. Please don't blame me :)
I created navigation and first screen for the site but stumbled with these questions. Here is a screenshot with all things: https://prnt.sc/ln3ytx and my pen on Codepen: https://codepen.io/a007mr/pen/mQKyYM
How to make background hover for all line?
My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6;
but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
How to make navigation button in the corner for any desktop size? I am using
margin: 15px;
but it doesn't work well when I will make more screen resolution. It is not responsive. The button will not be in the right corner if I choose the larger desktop.
The same issue with all navigation. How to make a position for navigation
in one place for any desktop size?
How to open dropdown through click (not hover) and hide drop-down menu only through click? My code li:hover > ul. If I change on li:active > ul then drop-down menu appears only when I hold the button. How to make like *click button -> we show drop-down menu and can choose something -> *other click on "Learn more" and menu is hidden.
How to make margin for below the main button? :)
I wrote margin-top: 20px; but it doesn't work.
How to make the background of all navigation without margin?
What's wrong? How can I fix it? Please, help.
I will be try give you some reply:
How to make background hover for all line? My code is .menu-item ul a:hover {color: #000000; background: #d2d4d6; but it doesn't work as well. How to make it like this: https://prnt.sc/ln3mvm
1) Try uses block elements. Remember that css property
display: block; makes your element a block element.
When I open the drop-down menu, part of navigation is jumping to the right. How to avoid this jump?
2) Your items in the list must be made as blocks and it item (li>a) need to be
increased.
Common example:
https://codepen.io/bear-wolf/pen/YRvoWO?editors=1100#0
Please see fiddle and you'll see the issue quickly.
I'm using :hover for my sub-items in my CSS menu. When I hover on the sub items, I can no longer get to the "item three" as the size of the container reduces, and my cursor position is no longer hovering.
How would you solve this? Is there a pure CSS solution?
The sub-item display works by using the .has-children class:
#menu li.has-children:hover ul#sub-menu {
display: block;
}
Well, here's a workaround : try simply to put some padding at the bottom of your #main-navigation element.
It will provide some space where the cursor will still trigger the :hover state.
#main-navigation {padding-bottom: 20px}
There : http://jsfiddle.net/56cx8zwx/12/
I cleaned a bit your code, some hover rules weren't necessary.
But well, assuming you'll give some styles to your menu (padding to the LIs, etc.), I guess you won't need this.
My site's navigation dropdown menu is hidden behind the featured post slider on my front page. I've tried changing the z-index value of the navigation li, ul, etc but can't seem to get it to work. I've gone as far as adding a z-index to every single css element that the navigation relies upon, but it still is under the slider.
Would appreciate any help.
Site: Link
(The EVENTS dropdown)
Thanks.
It's easily fixed, with something like this:
#nav {
position: relative;
z-index: 20;
}
z-index on its own is not enough, as it only works on an element with position other than static (hence relative, which won't cause any issues).
I have many images that all of them will have the same effect in hover, so I made to layers. I is the image and one is the hover effect.
http://jsfiddle.net/jmXdh/13/
So in hover the second layer loads, also i want to give an effect to the main image. only in hover. As you can see I gave grayscale effect to it. but in hover, both 2 hovers don't load at the same time. why is that ?
this is what I got for the main image hover:
a:hover .img{-webkit-filter: grayscale(100%);}
Also I would it happen with transition.
You'll need to add a positive z-index value to your .play class to ensure that that element doesn't get pushed behind the image when the filter is applied to it.
Any webkit css is only working to browsers that support webkit
The double hover effect is working.
I test it by changing the css a bit:
a:hover img{border:2px solid #F00;}
http://jsfiddle.net/jmXdh/21/
When my page loads in IE (7,8) my background image in the left column li's shows for a split second before CSS3 Pie kicks in, adds the border to the li elements it's meant to and then removes the background image from my list items like this...
http://goo.gl/xCz39
In FF this works if you wanted to see what it is meant to look like. I'd appreciate a work around for this if someone has one. Many thanks!
Also an absolute image link in your CSS could do the trick in some cases.
Like:
#yourdiv{
behavior:url(css/PIE.htc);
-pie-background:
url(permalink-here/your-image.png) right no-repeat,
url(permalink-here/your-image.png) left no-repeat;
}
I suspect that the problem is this: the element generated by Pie, for the border, has a higher z-index than the original element which has the background image.
Try giving
#content-left ul li a{position:relative;}
Or try another of the solutions suggested here