I'm trying to fix a problem I have with one of my custom theme I am working on.
If you browse to the site http://www.worclan.com/ you will see I have made a drop down menu. When you hover over a menu item or you are on the current page the item turns yellow.
The problem is I can't get the bottom of the yellow to touch the bottom of the containing menu box. There appears to be a added padding or margin which I can't track down and remove.
Any help or suggestions?
For future reference, you need to post the code in your question in your question.
If you set #navarea to line-height:0, it will work.
Related
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
I got one really annoying bug, that I couldn't find an answer for. I have a menu slider that has a drop-down menu attached to each item. The slider itself is custom made, but the drop-downs functionality is provided by UI-Bootstrap.
Here is a simple fiddle, that I've made to get more about the problem:
https://jsfiddle.net/Lus92rqm/7/
If you can see in the CSS tab, I've added some comments about where I think the problem comes from and a possible solution that I ran into. So basically, all the thing is not working because of the overflow: hidden style attached to the .menu-slider-wrapper. I needed it though, because I want to hide all the items that are not in the visible area - the 570px width of this container.
I also tried to add position: fixed to the .dropdown-menu class and thought it was working perfectly, until I tried to scroll the page down... The shown menu is scrolling with the page which is not the behavior I'm searching for.
One more thing is that I definitely need a position: relative attached to .menu-slider class, because in that way I can move the slider from left to right and opposite - changing the left property of it.
Sooo, anyone with any ideas how I can manage to workout this thing?
Thanks! :)
You need to use dropdown-append-to-body, see the example on the docs page.
I don't know how to formulate my question perfectly, so I made a (quick) example so will illustrate my problem exactly : http://jsfiddle.net/kn5GT/1/
If the last item is near the bottom and you hover it, the submenu will be displayed like the other, but this will extend the height of the page, thus showing the vertical scrollbar of the browser.
I'd like to avoid that by making all dropdown that would extend the height of the page by showing not from the up, but from the bottom (the bottom of the submenu would be near the end).
Is this possible only in CSS or do I have to put some js in it?
this might not be the best solution, but you could fix this with a little help of the css-pseudoclass nth-last-of-type().
I have modified your fiddle (the borders are just there for better visual distinction.)
I just added the following rule:
ul>li:nth-last-of-type(-n+2)>div {
top:auto;
bottom: 50px;
}
Don't get confused by the strange selector, essentially (-n+2) makes the last 2 Submenus pop up from the bottom instead from the top.
Alright, I have some questions...
When you have a moment, can you take a look at http://www.crystalcoach.com/new
I'm having some trouble with the hover menu. Okay, I know it's probably a super out of date code... But it works, haha.
What I'm having difficulty with (and see image for examples) is when you hover over the menu, the positioning is wrong. If you go to the URL above and hover over a menu, you'll see what I mean.
In addition, where in the code can I change it so the menus are wider? If you hover over "Fleet", you'll see that the menu itself is not wide enough to encompass all of the vehicles in there. I had to abbreviate a few but the hover portion isn't fully working.
Thanks so much for your help.
Here's the image: http://i1166.photobucket.com/albums/q617/stevezee87/menusample.jpg
Well, its old alright, messy too, but here's what you need to change:
1)
There is a div being presented with the sub-menu options. That div contains a width of 150px, loose that declaration and the sub-menu will grow according to its contents!
The mentioned div is right after the <a></a> with the menu text:
2)
The span.qmritem needs to have a top value just about 10px by my tests, to keep in line regarding the non-hovered menu options.
3)
The div mentioned at point 1), must get those same 10px increase on the existent top value:
Link to both images in full size:
Screen-shot for Problem 01
Screen-shot for Problem 02/03
I have a css menu, pretty standard functionality. I have implemented it within a Netsuite site im working on.
The menu is visible here:
http://www.gardensandhomesdirect.co.uk
Its the one just under the header.
Ive been trying to get the only part of the menu with dropdowns to come left instead of right when hovered so that it is not being 'hidden' underneath the wrapper.
What is the best way to get this menu showing correctly? I there a way i can get it hover over the top of everything else instead of underneath like now?
Any help appreciated.
-Wayne
You need to have overflow: visible on #outerwrapper if you want to show anything outside that div.
Alin