I'm trying to make a pure CSS dropdown menu, but it has one odd bug;
when the page loads, the text in the main menubar is slightly offset to the right.
It jumps back to the left when the page is modified or when a menu item is moused-over.
This includes right-click > inspect element, which makes it really hard to find out what's going on.
Here's an example of it: http://jsfiddle.net/m75p3/1/
As you can see, it's in the wrong position on load, but jumps to the correct one a few milliseconds after. This is because jsfiddle is modifying the page.
If loaded from its own file, it will not exhibit this jumping behaviour until moused-over.
Any ideas why?
The problem is that you have declared 'position:absolute' on your 'toplink' elements but not given any left value, so their position is determined by their parent's text-align:center rule. When the transition occurs, that disturbs the layout so they move. To fix it you need to declare the li as position:relative, so that it becomes the layout parent, and then set left:0 on the 'toplink' a element.
Addition:
To prevent the text from wrapping in the sub-menus, you can set their white-space to nowrap.
#head ul li {
position: relative;
...
}
.toplink {
left: 0;
...
}
#head li li, #head li li a {
white-space: nowrap;
...
}
http://jsfiddle.net/m75p3/5/
Related
I want to show the content of my Mega-menu also within the page. I duplicated the CSS styles but it seems that I still miss a rule because the border of the UL with id="wrongBorder_because_of_no_Height" does not show around the whole UL, probably because the UL height is 0
sample page - http://www.teddicom.com/test_07_ul_border_stack_overflow.htm
[compare the border of the floating menu of family 2, and the border of the UL in the page]
What is setting the height of horizontal ul to zero?
How can I show the border properly?
Add overflow:hidden or overflow:auto to your class
#wrongBorder_because_of_no_Height
{
overflow:hidden;
}
The reason why this works is because by setting the overflow property to a value which is not visible - this triggers a block formatting context.
Check out this post for a full explanation.
Add this to your CSS:
.menuInPage ul
{
height: 200px;
}
You are floating the li elements left. Parent elements, the ul, are never to expand to contain floated children.
Haven't checked to see if this is what you want but either remove the float or try overflow:auto.
I created a DIV which on the right top corner must have two links (Menu and Options):
<div class="Clear">
<ul class="Clear">
<li><a>Menu</a></li>
<li><a>Options</a></li>
</ul>
<h2>Header</h2>
<p>Text</p>
</div>
To align the ul on the right I used "float: right".
The online example is in: http://jsfiddle.net/y2hhm/8/
Each link text will be replace by an icon image using background-image.
It looks fine on the first DIV. But on the second the table is pushed down.
I also tried "position:absolute" but it makes hard to align it on the right.
Does anyone knows how to make the Menu/Options list look the same in both?
EDIT:
Tables have default styles applied to them by the browser. To solve this specific problem on your second fiddle (yellow-orange one), you need to set the table's border-spacing: 0;.
Perhaps you can turn to CSS resets if these pre-set properties annoy you.
-----------------------------
I think you might have overlooked the fact that ul's and ol's have a default styling applied to them, which differs from browser to browser. Some might set padding, others margin (I haven't tested it myself).
All you need to do is add this to your CSS: (tested and working in your fiddle)
ul {
padding: 0;
margin: 0;
}
Your h2 element and table element respond differently to the float of the ul. If you set your h2 CSS to clear:both the margin from the ul will also impact it. The table element for some reason considers the margin of your floated element (I can't explain why).
NB: // are not valid CSS comments. Use /* */.
If you absolutely want the menu to be removed from the flow, set the parent div to position: relative; and the ul to position: absolute; margin-left: 80%; margin-top: 0%;.
The disadvantage of this method is that you have to approximately estimate the menu's length. (in this case I took 80% margin, so estimated at 20%) . Given that your divs have dynamic widths, it will also cause the menu to float outside of the table when the viewport is too small. You can prevent this by setting the div to overflow: hidden;, but overall...
If this were a problem I had to solve, I would simply stick with the float: right; and leave some whitespace between the menu and the next elements...
The code sample below works almost the same, if I include or remove the 'float: left' line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don't understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn't that the purpose of floating?
ul
{
list-style-type: none;
float: left;
width:100%;
padding:0;
margin:0;
}
li
{
display: inline;
}
The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:
ul {
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}
li {
float: left;
}
This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.
The float property is meant to allow an object to be displayed inline with the text directing it to one side. Float left is thus a lot like inline but with the exception that the element being floated is aligned towards the left or the right. It is not necessary to use the float:left; flag for what you are trying to do, It can often be better to place the ul where you want it using position, margin, padding, left , top , right , bottom instead. This usualy gives a more controllable result.
Here is an example fiddle of what happens when switching between no float and float left.
http://jsfiddle.net/um9LV/
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.
float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
Have a look at my page at http://81.216.141.82/flygklubb
Hover the first menu item "Flygplan" and then hover the first child item. As you can see the child to "DELTA 3000 MK2" appears on top of that item, but i want that level to appear right to the first level, but i don't want to have any fixed values for position. How can i accomplish that?
Something alongst the lines of:
#topnavigation ul li ul li ul{
margin-top: -50px;
margin-left: 140px;
}
Should do it. It's not necessarily fixed positions, more relative positions to the original element.
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 */