I'm creating a simple category tree for a shop and I have a problem, its look like that:
Question is how to fix its that big space that appears root-cat:hover, can anyone explain whats problem and what a solution.
Fiddle
Copied some html and css that I have in my tree, hope it will help.
You can add these rules, which will fix things for the first sub menu and partly for the other ones:
root-cat {
position: relative;
}
.sub-cat {
position: absolute;
left: 260px;
top: 8px;
}
Fiddle: https://jsfiddle.net/eLat18Ls/1/
Note: To have the other submenus appear not at the top of their page, but beside their main menu entries, you have to nest the sub menus into their respective main menu entries (in the HTML). Usually, this is done with unordered lists: ul and li elements. Just google for how to build a menu using ul and li
Related
https://bethparmar.co.uk/
The impact of this is from the homepage only, other pages work as expected.
This is a WordPress site, and the home page has code created using the old school editor method rather than a page builder.
Its a strange one as the I have concluded that the '
My Programmes' section is actually blocking the ability to click on the menu items, for example, 'Workshops'.
If you double click on the Workshop menu item, a sub menu opens, but the actual links appear blocked by the div#pg-11-0 { section.
I feel like I need to add some form of invisible space in between the elements - but by doing so it changes the page layout.
Via CSS I thought that I maybe able to force the menu element to be 'ontop' so not being blocked by another layer...
I tried doing this by changing the menu position: absolute; but failed.
Any help please?
#site-header {
z-index: 10;
position: relative;
}
Adding this css code to your theme's css file should fix your problem.
I see that you give position: absolute in your #site-header .navbar.navbar > .navbar-collapse > .navbar-nav > li > ul
So give z-index in your css.
#site-header .navbar.navbar > .navbar-collapse > .navbar-nav > li > ul {
z-index: 9
}
I want my drop down list top apear inline aswell as in the same place. So if you over over each list it will just change the text. http://868rcacs.ca/test.php
Right Now I have the drop down list working. But when you hover over Admin the list will apear right below it and not to the far left. Is there a way to fix this without using individual classes or id's?
Add the following styles:
nav{
position:relative;
}
nav li ul {
display: none;
position: absolute;
left: 10px;
}
This ensures that your layout doesn't break and you get what you want. Don't forget to thank me if this works ;-) Just kidding!
I am trying to make my first pure css/html dropdown menu but I was having a hard time getting the Hover function to work properly. I received great answers but this time, its all messed up and its not in the right spot. I am so lost at this point.
http://jsfiddle.net/X5Dbc/
position: absolute; or somthing like that...
i have a hunch it has somthing to do with positioning
the jsfiddle above is what i have after asking about the "Dropdown" effect..
Keep in mind I am still a novice when it comes to proper CSS. Any Advice or help making this menu work would be most appreciated! And constructive criticism is always welcome.
Your markup is not valid. IDs must be unique. ie you can't use the same ID on muiltiple elements. That's what class is for. There is no need to use IDs for this anyway.
#navwrap ul li ul {
display: none;
}
#navwrap ul li:hover ul {
display: block;
position: relative;
}
Move the :hover to the parent li
You can style the two ul seperately like this:
Top level:
#navwrap > ul { your styles ... }
Sublevel:
#navwrap ul ul { your styles ... }
I have a blog which is hosted at blogger.google.com.Recently i encountered a problem with the dropdown menu called "Categories". The children elements(sub menu items) auto disappear just when i move my cursor over them. I have tried the other answers to similar questions like this but they were not of great help in my case. I just want the dropdown elements to remain at their places when i move my mouse over them so that i can select them.
Can anyone please check the problem?
My website link is http://www.techtreck.in
Try to go to the Categories tab and you will see what exactly i am saying.
Many thanx in advance..
..hope to get a reply soon !!
There is a hidden gap between you main menu and sub menu.Inspecting you css with firebug, I found this in your code :
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 20px;
padding: 5px 0 3px;
width: 187px;
}
Now margin-top: 20px; is too far from main menu. So change it to:
#top li ul {
background: none repeat scroll 0 0 #111111;
margin-top: 14px;
padding: 5px 0 3px;
width: 187px;
}
And it will work fine.
If you move your mouse quick enough it works :P
But it looks like it is due to the gap between the categories and the actual drop down, when you move your mouse down, it goes in the gap so it no longer triggers the onmouseover event, hiding the drop down.
You should move the position of the dropdown up higher, so that it is perfectly align with the categories button.
The gap between the main menu and the submenu is indeed what causes the problem. #kakarott solutions is also what i would do, it is by far the easiest solution. If however the gap is there by design, you could still achieve the desired result by playing with your css. Something like this should do the trick:
remove the background color of the sub ul to make it transparent
change the margins of the sub ul into paddings
change the margins of the sub li into padding as well
set the background color that was on the sub ul on the sub li
add the padding that was on the sub ul to the corresponding padding of the sub li
(I did not test this, but it should do the trick i think, if i did not forget anything)
What this does is make the nested ul transparent and overlapping the parent li. This way the hover state remains triggered when you move the mouse onto the submenu. Visualy there should be no changes.
I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.