I made a navigation with the help of bootstrap. With css i made a submenu that appears on hover.
Only when i want to click a title in the submenu, the submenu dissapears before i can click it.
I have read on other threads that i have to add the following to the css:
.dropdown:hover > .dropdown-menu {
display: block;
}
I added it, but it's still not working. What am i doing wrong?
This is the fiddle: http://jsfiddle.net/robin2609/buw4wc1t/
Gr. Robin
This happens because you have your padding only going down 10px and then your submenu is below the gray. while your padding does not reach the end of the main menu and therefore when the hover comes off the .nav > li > a it is now hovering just .nav which doesn't keep the sub menu open.
Change padding in:
.nav > li > a
to:
.nav > li > a
{
padding: 10px 13px 30px 13px;
}
Working JSFiddle: http://jsfiddle.net/buw4wc1t/3/
Related
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
I made a fixed navigation bar but can't seem to determine why when you hover on the "Main Menu" and then hover the sub menu, the text of "Main Menu" doesn't change color?
#nav-top > ul > li > a:hover, .nav-top-menu-button:hover {
background-color: #fff;
color: #000;
}
JSFiddle: https://jsfiddle.net/owboLy2s/1/
You can use #nav-top > ul > li:hover > a, .nav-top-menu-button:hover instead of #nav-top > ul > li > a:hover, .nav-top-menu-button:hover. So,change is :hover should be moved one step up. Otherwise, only your <a href=''>Menu</a> code will trigger color change.
li.nav-top-menu-button:hover a{
color:#000!important;
}
This should work.
It targets your main li that contains the "Menu" link. Since the drop-down menu is still inside that li you will still be hovering it when selection a sub-link. The !important just says that it takes precedence over any other styling.
I am currently learning CSS and HTML and I wanted to build a basic dropdown menu using CSS only. There are some things that I don't understand if someone could help me figure out what is going on.
Here's how it looks
http://liveweave.com/eTdt7V
Why is my Menu 1 being pushed at the top of the nav? How can I avoid that?
Why is my Submenu 1 to the right of the Menu 1? How do I fix it?
The height of my submenu is overflowing over the first UL. Is that supposed to be?
Hopefully someone can help me understand what's going on here that would be a valuable lesson for myself. I know I could find an online tutorial but I feel that starting from scratch is a better leaning opportunity, but right now I am stuck.
Thanks!
Ok here are some point (i still suggest you find some page like w3chool or here or whatever page you can find to learn more or fully understand your problem)
Menu 1 pushed away because you set your 2nd ul with visibility:hidden - it hidden but still take same space (width and height), so if you change that to display:none and remove height:100px in your 1st ul it will become one line and smooth (don't set height to ul, especially when it have 1 or more ul inside, it will ruin your menu)
Your Submenu 1 to the right of the Menu 1 because, uhm not sure how to say so i skip to solution to solve this. To position your submenu, i suggest use position:absolute with margin to position your submenu (beside your main menu if vertical menu or below if horizontal)
This is your new CSS after i modify a bit
body {margin: 0; padding: 0;}
nav {background-color: pink; margin: 0; padding: 0; height: 100px;}
ul {list-style: none; width: 50%; background: yellow; margin: 0 auto}
li {display: inline-block; background-color: green; width: 100px; height: 50px}
a {text-decoration: none;}
ul > li > ul {display: none; position: absolute; margin: 35px 0 0 -40px;}
ul > li:hover > ul {display: block;}
ul > li > ul li {display: block;}
And this the new DEMO
Hope you lucky with learning HTML and CSS!
Ok, i am gonna try to explain this as well as i can. I want to have a dropdown menu and when you hovering over the sub item of the menu item, I want ONLY that menu item to be a different colour but the sub menu items should stay the same.
Using the li:hover method, makes both the sub menu and the menu item change to that color. Is there any way to only change the top menu item when the sub menu is being hovered over?
Thanks in advance
EDIT:
here is my current CSS
.dropdown-horizontal-container
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
ul.dropdown li ul li
{
border-bottom: #FFF 1px solid;
}
ul.dropdown li
{
position: relative !important;
display: block !important;
}
ul.dropdown li a
{
position: relative !important;
display: block !important;
padding: 10px 15px !important;
}
ul.dropdown li a:hover
{
color:#428bca !important;
}
PS: this is overwriting the css generated by a wordpress plugin. Not quite sure how to post the code it generates...if it helps the plugin is http://wordpress.org/plugins/dropdown-menu-widget/
How about:
ul.dropdown:hover {
background-color:#fff;
}
ul.dropdown li:hover {
background-color:#3e3e3e;
display:block;
}
Since i was short on time, I took the easy way out and removed the background for the hover so i didnt need to change the link color when hovering over the sub menu items. I am going to look into Jquery as some people suggested later on though to see if i cna get it working.
Im working on a dropdown menu, and i want my Parent <a> to "keep its color" when i move to a child <a>.
I know how i could do it by using hover on my <li> with something like:
ul#nav li:hover > a. but that wont work here, cause i only want hover on my <a>'s...
Hope you understand my problem
Heres my jsfiddle: http://jsfiddle.net/F623k/7/
Used to this
ul#nav > li:hover > a {
color: #ff7800;
}
ul#nav li ul li a:hover {
color: #ff7800;
}
Demo