I have implemented a dropdown menu into a website, here:
http://www.gardensandhomesdirect.co.uk/
However, The dropdowns themselves seem to contract prematurely. Its sometimes difficult to keep the dropdown open when moving from the initial button onto an option in the dropdown.
Is this a problem with the code or something is affecting it? Is there anything I can do?
Thanks!
Your dropdown divs .dropdown_Xcolumns have a top margin of 4px, When the mouse is on these 4px it's breaking the hover (unless it's done really fast!).. remove the top margin and all should be well.
If you want the effect of a gap between the <li> and the dropdown div - try a top white border on that div
or alternatively, leave the top margin, and add 4px bottom padding to the container <li>s to make them meet up better
try to change for margin: 4px auto; to margin: 2px auto; for .dropdown_buildings in menu.css
You can try to add padding to each li element. It increase the active surface area of the hover area. When the user hover over the top nav and the sub-menu appears, the user can move the mouse downwards, and since he is now still within the padding area the hover is still activated.
Related
I have a button on my wordpress site titled 'try apptive free' in my header with a 2px border around it. The border already inherits a 10px padding. I want to bring the padding down to 5px to shrink the border distance however, changing the padding movies the 'try apptive free' out of line with the logo on the left side of the header titled 'Apptive'.
Is there an easy way to change the padding to 5px without moving the button out of line with the logo?
www.allaboutcats.wordpress.com
You could always add some margin to it, to compensate for the removed padding. Or you could place both elements in one container and give them vertical-align: middle.
Give it a margin-top: 5px; It should work.
I have a bug in the rendering of border-radius under all major browsers (tested: IE 9, Chrome, Firefox).
What happen is that I have a menu bar with border-radius, and in there some links width a background color. In order to keep the button inside the shape of the menu, I set a overflow hidden on the menu container. Until there all goes well, but then, there's a little white line appearing on the corner edge.
I made a reduced test case here: http://dabblet.com/gist/3828561
Anyone have a solution to overcome this one? Thanks!
A dimensions-dependent solution...but maybe that's OK since it's a menu bar not a content holder? Anyway, you can set border-radius on your inner elements, give the parent a height, and also use that height value for the line-height of the inner elements.
Once you apply the height/line-height, you don't have to use overflow: hidden.
Since your menu bar has a border radius of 3px, apply the same rounding to the appropriate corners of the first menu item like so:
.outer .inner:first-of-type { border-radius: 3px 0 0 3px; }
And make the corresponding corners of the bar even more rounded, to hide them beneath the first menu item:
.outer { border-radius: 10px 3px 3px 10px; }
http://dabblet.com/gist/3828755
I have this website where on the left menu there's a nested menu on the "hotel" link. The submenu that appears hovering "hotel" has a gap on the left, but since in the gap the mouse hovers the nested "ul" element there are no problems in Firefox or Google Chrome. But this doesn't work in IE9 (not sure about other versions), infact I can't reach the submenu because it disappears.
Is this a known bug? Am I doing something wrong?
IE9 is seeing the <ul/> padding-left or <li/> margin-left as empty content and so the mouse hover goes straight through it.
I'm not sure why it is doing this but an easy fix would be to add a repeating transparent background image or, if legacy support is not needed, add background-color: (255, 255, 255, 0.01)
Try removing the 20px padding on the nested UL
Then give the UL a margin top of -5px
Then give the nested LI elements a margin-left of 20px
I'm looking for a bit of brainstorming assistance.
I am coding a layout that was put together by a designer and am trying to think of a way to handle a horizontal navigation that has angled edges, and goes from a blue background, to a white background when a link is selected.
I'll actually just include a screenshot. This is actually the navigation for a Tabbed content area. The top half of the screenshot shows what it will look like when the first tab is selected. The bottom half of the screenshot shows the 2nd tab selected.
http://i.stack.imgur.com/P34yI.gif
So my problem comes from the fact that HTML elements are rectangles, not rectangles with angled edges. I saved the angled edge with the shadow as a CSS background, and that worked fine, until I realized that each link can turn white and the BG image has a bit of the next link embedded in it to give the illusion of the angle, and thus the left most link would need a different background then the middle link, and the right most link, etc...
I could assign a unique class / id (or use nth child) to each link, but I would like to keep the solution flexible so I can add another link/tab in the future.
I was curious if anyone had any ideas on how to create this appearance by possibly using CSS3 / HTML5 / or some transparent PNG and negative margins or relative positioning?
I'm not asking for code or for you to do my work for me :) I'm just looking for ideas - just a bit of community brainstorming. If anyone has any suggestions please let me know, it might lead me to a solution.
Thanks!!
Assuming you're using a 'ul > li > a' structure for the menu, I would use two angled backgrounds (right and left... the right one is about 27px with the shadow, the left about 22px). Apply the left corner to the <li>, and the right corner to the <a>. That will give you doubled backgrounds on each list item, so you should use negative margins on each side of the <li> to pull its siblings to overlap. Then use z-index to make sure on hover or highlight that the menu item shows up on top of the others. I've added an additional 30px of padding on both sides to create the extra space around the text:
li {
margin-right: -27px;
margin-left: -22px;
padding-left: 52px;
position: relative;
background: url(leftcorner.jpg) left top no-repeat;
background-color: #3aa1cc
}
li a {
padding-right: 57px;
background: url(rightcorner.jpg) right top
}
li:hover {z-index: 5; background: url(leftcorner-hover.jpg) left top no-repeat}
li:hover a {background: url(rightcorner-hover.jpg) left top no-repeat}
I haven't tested this but I think it should work... possibly with some additional tweaking.
This solution doesn't include the subtle inner shadow... to do that you would have to use a 1px repeating gradient background on the <li> then use :before and :after pseudo elements for the two corner background images.
Additionally in my code I put two seperate .jpgs (normal and hover) but really you should use a sprite and background-position so there is no flash while the hover state image is loading.
my problem is that when I try to show my dropdown menu under "Departamentos" its kinda to the left... not in the right position under Departamentos...
I try for hours but nothing, What could be the problem??
LINK TO THE WEBSITE
Change #mainNav li from display:block; to display:inline-block;. Just tried in firebug, menu moves to the right place.
The problem is that with display:block or display:inline li has zero width (despite inner content) and thus all li elements are shifted to the left. display:inline-block makes it stretch to incorporate inner content.
You can see the area element takes highlighted if you move mouse over it in html tab in firebug.