I've currently working through a tutorial on responsive webdesign, and I wanted to make my navigation different than what the tutorial had (I want my nav bar to have a coloured background, and be centered..as opposed to the tut's not having a bkgd and was left-aligned).
Without the background I had the submenu displaying properly. When working to setup the coloured bar in the background, the only way I could get it to show up was to remove the 'float:left;' that I originally had in my '.primary ul li{}' selector. Now that that is removed, when I mouse over 'Item 4' which is the item with the submenu, the submenu now displays left-aligned with the bar instead of directly below Item 4. You can see what I mean here:
http://jsfiddle.net/mark_a_b/ytB66/1/
If I add the 'float:left;' back in, you'll see that the background colour bar of my navigation disappears, and my menu items are no longer centered as I want them (not I set the bkgd colour for this version to be dark grey just so you can see the menu items) as shown here:
http://jsfiddle.net/mark_a_b/ytB66/3/
I'm sure it's likely something silly that I'm just overlooking, but I've spent too much time messing around with it and getting nowhere, so was hoping someone else might be able to help me out with this. Appreciate any help offered!
Thanks!!
Just add a positioning to your sub-menu left: 0; - DEMO
.primary ul ul{
position: absolute;
left: 0; /* this */
z-index: 999;
background-color: #ccc;
height:0px;
overflow: hidden;
min-width: 100%;
}
<ul> and <li> are block-level elements;
normally <li> are placed vertically, while here they're displayed horizontally because of the display: inline; property value.
Every <li> here is also a container for another <ul> and it's not good to use an inline-level element as container for a block-level element.
The solution is: use display: inline-block;, which combine inline-level display style with block-level behaviour:
.primary ul li{
display: inline-block;
position: relative;
}
Related
I guess it's kinda easy, but I've been stuck here for 3 hours already.
My dropdown menu moves whole content when used. I searched for similar questions on StackOverflow, for questions related to dropdown menus and got the following answer that partly helped:
.menu > ol {
position:absolute;
z-index:100;
}
I've added the snippet above to the original code. It worked out somehow - it doesn't move other content but now I can't centre it horizontally.
Using margin:0 auto; also did not help.
Could you please help me out? I've either placed position + zindex in wrong place, or I'm missing something.
Codepen:
https://codepen.io/graphconcept/pen/MdwQBM
Remove the position: absolute from .menu > ol and add it to .menu. Also add width: 100% to .menu. If you want your menu to be visible regardless of scrolling make the position fixed instead and add top: 0.
.menu {
margin: 15px;
position: fixed;
width: 100%;
top: 0;
}
.menu > ol {
list-style: none;
margin: 0;
padding: 0;
z-index:100;
}
Explanation:
Block elements with position: static (the default value for position) have a default width of 100%; Setting the position to absolute or fixed changes their width to auto; i.e. they shrink to fit their content's width. Your menu list is being horizontally centred within the menu element. This meant that when the menu element was 100% the width of the page, horizontally centring the menu list would also centre it with respect to the page. However when the menu element shrank to fit its width, the menu list couldn't be centred any more than it already was. The width of the menu element needed to be explicitly set to 100% to allow the centring to have a visible effect.
I can't find a way to make my header dropdown to be positioned the way I want it to. First off, the dropdown is horizontal, while it is supposed to stack up under each other. Second, the dropdown is not vertically aligned with the parent link, so I want it to be directly under its parent link and not a few pixels to the right of it. Using the left: __% only worked on one while totally pulling off track the other dropdown of a different parent, so it wasn't relative to the position of the parent of the dropdown.
Here is the jsfiddle: https://jsfiddle.net/u6v44hdw/
I'm having trouble and I think I'm supposed to add the code here somewhere:
li ul {
display: none;
position: absolute;
top: 15%;
padding-left: 1px;
}
Thanks!
Your missing the class="sub" in <ul> sub menu.
Edit:
Here is he full example of what you want: https://jsfiddle.net/u6v44hdw/2/
Edit2: I think you don't need that z-index.
I designed a vertical menu using CSS, li and ul tags. It works fine, but just for many hints. After some time, hover effect works just for the last item.
Please look at my project here: http://www.saberi.ws/test/
Please move your mouse on the menu in the left side (Products, Countries, ...) to see this in action.
You can see related CSS file here.
Your #ticker is lying in front of your navigation. Add z-index: 0 to your #ticker and add position: relative; z-index: 1 to your #container_left_menu.
This will move your navigation over your ticker. The position: relative is neccessary, because z-index does only work with position:absolute, position:relative, or position:fixed.
http://www.w3schools.com/cssref/pr_pos_z-index.asp
My solution is much simpler, to my mind. Simply add overflow: hidden; to your #news.
http://jsfiddle.net/FS4zT/
If you visit the above link you see what am describing below.
Summary: I have set the z-index of the submenu to 99 and the z-index top level menu to 9..
So basically i was thinking when i move the mouse over to the 1st menu, the 1st submenu will stay in focus when i move the mouse over the items of the submenu.
But for some reason in Firefox 11.0 it switches over to the 2nd Top Level Menu when i try to move my mouse over the 2nd/3rd/4th items of the first sub menu.
In IE 7 : It works as desired by i can still see the border of the 2nd Top Level Menu overlapping the items of the sub-menu even tho their z-index is higher. The border problem can be even seen in firefox.
Can someone shed some light where i might be going wrong?
This should fix it, I hope.
#menu li ul li {
position: relative;
}
Beware of the stacking context of the z-index. What you want is not working for parent-child z-indices.
The problem is that the parent li of the submenu is not as wide as the submenu (4x times smaller). So if you hover to the right, the li loses focus.
One way to solve this, is setting z-index: 0 on al ul submenus and z-index: 1 on the current submenu. The submenu's should have position: absolute.
Update: Solution with position: relative (accepted answer) is really a good one. This is working because the lis of the submenu do not make the parent container larger since they are left floated.
You must change the height in #menu li
#menu li {
width: 140px;
height: 25px;
float: left;
border-right: 1px inset white;
z-index: 9;
}
The other way you can go to keep your borders at 50px is when you add to the CSS something like this.
#menu li:hover ~ li{
height:25px;
}
My web page is at http://www.sarahjanetrading.com/js/j/index.html.
In the navigation, when I hover or want to click on the first three navigation
items, they don't function properly. The whole of the area of the first three navigation items
are not clickable. The rest of the navigation items are working properly.
Any help would be highly appreciated.
Your logo is appearing over the top of the 3 items
If you reduce the height of the logo you can select the items
The logo (< div class="logo">) is above the first 3 elements, try resizing it.
.logo {
height: 45px;
}
Firebug is quite good to find these problems
As Curt said Your logo is appearing over the top of the 3 items . So, here is the solution just give z-index to your ul#nav DIV.
Like this:
ul#nav {
margin-left: 25px;
position: relative;
top: 22px;
z-index: 1;
}