So basically i want to make my menu keep in hover state when their sub menu hovered,
i'd already try like this
but it still won't change as i want, where did i go wrong?
here's my snippet
#topmenu li li:hover a:hover{
color: #000;
text-decoration: none;
background-color: #fff;
text-shadow: 0 0 1px #000;
}
regards,
Not sure why you're hiding your sub menu with left: -999em; rather than display: none;.
Here is an updated jsFiddle: http://jsfiddle.net/JmkaM/1/ that uses display: none; and display: block; to show the sub menu.
What you want to do is display the sub menu when the user hovers a top level li. So you would do that like this li:hover ul. For your specifc CSS modify the following:
#topmenu li ul {
/* left: -999em; remove */
display: none; /* add */
}
/* add the following */
#topmenu li:hover ul {
display: block;
}
If you really need to use left for some reason then do the following:
#topmenu li:hover ul {
left: 0;
}
It will bring your sub menu back from being pushed -999em to the left. Though it might not be placed quite where you want it.
UPDATE 1
This will be the last time I help you. You need to learn that good feedback will help others help you. I understand that you are new but responding to answers with, "doesn't do what I want," does not help us or you.
I'm just guessing here at what you want based on the jsFiddle you linked to in the comments.
Here's the new jsFiddle: http://jsfiddle.net/JmkaM/2/
Below you will see the changes I made, before and after. I only highlighted the properties that I changed for brevity.
Before
#topmenu ul { /* ... */ }
#topmenu li ul {
padding-top: 0px;
padding-bottom: 0px;
}
#topmenu li li:first-child {
margin-top: 14px;
border: 0;
}
AFTER
/* added child selector '>' so only top level navigation
items have a background of red */
#topmenu > ul { }
/* set padding on all sides to 0 */
#topmenu li ul {
padding: 0;
}
/* removed whole rule - #topmenu li li:first-child */
UPDATE 2
Try this:
#topmenu > ul > li:hover {
background-color: white;
}
#topmenu > ul > li:hover > a {
color: black;
}
See this Fiddle :
http://jsfiddle.net/mSNqT/46/
This will be helpful.
Related
Hello I need help trying to change the sub nav color hover. I've tried to write code but it only changes the color or the full nav.
When I change it in my CSS it only changes the background color not the hover, and then when I tried to change the hover it changed for the full header menu and the sub nav. I want to change the hover only the the sub nav.
header li > a:hover{
color:#888888;
}
header li > a #active{
color:#888888;
}
header li ul{
overflow: hidden; display: none; background: #f9f9f9; z-index:20;
}
header li ul li a{
line-height:50px;
padding-left:30px;
width:260px;
}
header li:hover ul{
position: absolute; padding: 0; display: block; width: 200px;
}
not clear about your question. do you wanna change submenu color on hover
header li > ul > li > a:hover {background:red}
no this only changes the background to the sub nav not the hover. Here is a screen shot of the HTML. thanks everyone
Heading
I'm trying to play a little bit with CSS of Wordpress. However, I tried so much things but I can't solve it for some reason.
I wanted to have more space between links in the menubar so I added padding. I created to following code:
.main-navigation li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
Here the other CSS code
.main-navigation a {
display: block;
text-decoration: none;
color: white;
.main-navigation a:hover {
text-decoration: underline;
}
.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
background-color: black;
}
.main-navigation ul ul a {
background-color: rgba(0, 0, 0, 0.5);
width: 200px;
}
This worked for me and created more space in the menubar however it's also added the padding to the links in the dropdown menu, which shouldn't be done. I have tried to much things but it seems I cannot solve it. Could someone tell me what I could do? Please see below to see what I mean.
Screenshot of the problem
Add this
.main-navigation ul ul li {
padding-right: 0;
}
The CSS declaration that you posted, .main-navigation li {}, is saying "target every <li> that is a descendant of .main-navigation". So your <li> elements that are in the next level of lists also get targeted.
You can use the > child selector to select only direct children of the parent. So the following code should work for you, and not affect the dropdown elements:
.main-navigation > li {
display: inline-block;
float: none;
list-style-type: none;
padding-right: 30px;
}
Here on my website http://www.collectifsaga.com/X/wordpress/fr/home-fr/ , I have a menu on hover.
In the menu, there is some filters (architecture, news …) to reorganize the grid (displaying the posts).
The problem is when I click on a filter, I would like the menu disappear. It's a small thing, but to have a clean webpage when I select a filter I would like to have only the logo at the top and the the grid with a few elements and not the menu.
Of course the menu disappear when the mouse is out of it, but I would like it disappears right after clicking on a filter.
Do you have an idea how to make it ?
Here is my CSS:
#nav, #nav ul {
align-text: left;
list-style: none;
max-height: fit-content;
}
#nav a {
display: inline-block;
}
#nav a:hover {
display: inline-block;
}
#nav li {
float: left;
}
#nav li ul {
position: absolute;
left: -999em;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
And the same on mobile devices
Thanks a lot for your help : )
My sub menu disappears immediately after I move my mouse pointer to scroll towards the sub menu. Feel like I have screwed my CSS somewhere. I could not figure out after several attempts to make it stay active. I followed few tutorials(have a look at it) where they have called the hover on the ul instead of a(anchor), I tried similar ways but could not achieve what I want. Please point out where I have made the mistake. Here is my fiddle(my code). Sample CSS code for hover is below.
#topnav ul li ul
{
display: none;
position: absolute;
text-align: left;
background:#510000;
top:30px;
}
#topnav ul li:hover ul
{
display: block;
}
Put the padding on your list items instead of your ul or container. That way the dropdown overlaps your hover element and your browser never thinks that you hovered out of the element. See this:
#topnav li {
display:inline-block;
padding:10px 0;
margin-right:30px;
position: relative;
}
http://jsfiddle.net/jeffreyTang/q5cmqLrf/1/
You can also give
#topnav ul li ul {
padding-top:30px
}
instead of:
#topnav ul li ul {
top:30px
}
The problem is with your padding being at the nav level and you trying to make the drop down appear below it. Because you position your dropdown away from the parent li, you're no longer hovering over it when you move your mouse down. To fix, remove the padding from the nav and add it to the li.
remove padding from here:
#topnav{
display:block;
clear:both;
width:500px;
margin:0;
padding:0;
text-align:center;
}
add to here:
#topnav li{
display:inline-block;
padding: 15px 0 15px 5px;
margin-right:30px;
position: relative;
}
remove top from here:
#topnav ul li ul {
display: none;
position: absolute;
text-align: left;
background:#510000;
}
fiddle: http://jsfiddle.net/zj8krh95/7/
Here's a way to do it (it's more of a trick):
http://jsfiddle.net/zj8krh95/5/
#topnav ul li:hover {
padding-bottom: 10px;
margin-bottom: -10px; /* so that the menubar's height stays the same */
}
#topnav ul li:hover ul {
margin-top: -10px; /* so that the menu opens at the right position */
}
Basically, on hover, i extend the menu item's height so that no mouseout is trigger when i move down to the menu.
I have a folder that drops down when you hover over it, however I've placed a 20px margin-top to the drop down so it's not pushed up against the main navigation. I like the spacing however when you move your mouse to go select a sub-item the menu disappears.
How would you adjust the margin of the drop down so that it stays so the user can select an item in it?
> ul {
display: none;
}
&:hover > ul {
display: block;
position:absolute;
text-align: left;
z-index:1000;
background-color:#nav-folder-bg-color;
width:150px;
padding: 10px;
list-style: none;
border-radius:#nav-border-radius;
margin-top:20px;
> li a {
color:black;
font-size: .8em;
text-decoration: none;
}
}
EDIT: Here is the menu I am working on - http://menudemo.squarespace.com/home
Put the margin on the first LI in the sub-menu:
&:hover > ul li:first-child {
margin-top:20px;
}
Needed to add
height:50px;
to .main-navigation ul li