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).
Related
I've integrated the Mega Menu Plugin into the Wordpress site I'm working on. The last menu item gets truncated, because the main container has max-width set. I want the last item to overflow while still keeping the same max-width. I've tried setting overflow-x and z-index on menu ul, li and main div container, but to no avail.
EDIT: the parent of the menu had overlow: hidden. Setting it to overflow: inherit fixed the problem.
<div id="wrapper"> is getting overflow: hidden. If you remove that your menu will not get cut off.
I'm implementing a menu based on this one:
http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
(Demo)
The menu uses a UL / LI structure and CSS for appropriate rendering.
The trouble is, if the browser is not wide enough, the main menu items wrap.
I have surrounded the menu in a DIV.
When I apply
overflow-x: auto;
to that DIV, mousing over a menu item causes scroll bars to appear around the DIV (presumably to accommodate the drop down menus).
How can I prevent the DIV from wrapping while retaining the drop-down menus?
You could simply add a fixed width to the div tag, like such width: 700px;
The best solution I can think of is the one suggested in the comments in The Jonas Persson's answer. It's using white-space: nowrap. For this to work though, you'd have to be using display: inline-block instead of float:left/right to horizontally align the menu's elements.
I played around with your demo using chrome's web developer and made it work.
Just replace every float: left with display: inline-block Add font-size: 0 to ul#menu and override it on ul#menu li with font-size:12px - that's the size your using. (Using display: inline-block adds some whitespace between the blocks. That font-size stuff takes care of it.).
Next ensure the inline blocks are vertically aligned with the top of the container - add vertical-align: top to the li's.
Finally, add the whitespace: no-wrap to the div wrapping ul#menu. That's it.
I'm creating a header that holds an image (logo) and a navigation.
The UL for the navigation is floated right within the header div. This places it at the top of the div but I'd like to align it to the bottom.
What is the best way to do this?
Have tried vertical align, which seems to do nothing and have tried position property too (bottom:0) but does not work.
I'm sure this is a common problem.. any ideas?
With CSS:
.header {position:relative}
.header ul {position:absolute;right:0;bottom:0}
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 */
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.