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.
Related
I created a dropdown menu and made it drop on hover, but the problem is that I need to make a space between the toggle and the dropdown-menu as:
<http://jsfiddle.net/yabasha/nbbjm/1/>
When hover it displays the dropdown-menu but the problem when I want to select the menu it disappears.
Please advice,
Your problem is there is a gap between the li and the second level menu so when you are hovering, you are no longer on the li when you try to move to your submenu, which causes it to close.
You either need to move your submenu up, or extend the height of your li on hover to cover the space in between the li and the submenu
Adding the following styles to your fiddle seems to fix the problem:
.dropdown:hover {padding-bottom:20px;}
.dropdown-menu {top:auto;}
http://jsfiddle.net/nbbjm/8/
On a submenu on a website (lainegabriel.net), I have bottom borders that disappear on some of the links in the submenu under "Buy". This only appears in Chrome; Firefox and Safari render it properly. I believe the anchor tag is somehow overlapping over elements in the unordered list. But I simply cannot figure out what is happening.
And the problem goes away if you navigate to a page inside the submenu. Otherwise, some of the borders disappear.
Any ideas?
Thanks!
ul.sub-menu li{
float:none}
replace this with ul.sub-menu li{
display:block;
width:100%;}
I'm trying to work on a layout and I have an issue with the navigation. If you look on the Codepen posted below and hover over the 'Home' link in the navigation, the drop-down menu will appear and it will push the other main links to the left. What is causing this and how can I fix it? I've been messing with it for a couple hours and I'm lost. Thanks for any help.
http://codepen.io/anon/pen/Cmcyr
There's no width being set on the a, ul or lis, so when the ul is displayed, the parent is expanding to the width of its widest child.
Remove the horizontal padding from the lis and set text-align: center; and give them or their parent (ul) a max-width the same size or narrower than its parent (a).
I setup a jsFiddle to show what I'm doing:
http://jsfiddle.net/UfzCS/
Basically the border I set (needs to go all the way across) on the UL is showing up over (instead of under) the LI's because the LI's are floated left. Is there any workaround for this? I know I can set a height, but I may make the text a variable size so the height may dynamically change.
Your LI are floated, so the UL does not know where to wrap them.
An easy way to fix this is to make the UL float: left or add a overflow: hidden to it.
I have created a CSS dropdown menu, but when it drops down, it is being overlapped by the content, and renders useless.
How do i fix this?
Code
QUESTION SOLVED...THANKS...
Try changing the z-index of the drop down menu
http://www.w3schools.com/Css/pr_pos_z-index.asp
Set your z-index of your nav higher than your content and the problem will go away. For z-index to work properly in all browsers the element with the z-index on it much also have a position:relative or position:absolute.
Update
ul.dropdown { position: relative; border-radius:10px; z-index:9999}
#content{position:relative; z-index:100} /* #content should be whatever your content div is */