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.
Related
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.
Good morning, I have a menu where you need it has a vertical side bar. As you can see in the picture, I could add it. However, when the mouse pointer hovers over the menu items, submenus appear, but they are hidden by the bar. I would like the sub menus stay overlapped the bar, ie, they appeared in front, not getting hidden. Already tried changing the z-index of the submenu, but it did not work. Anyone know any alternative, or how can I solve this?
then, as the system menu is all dynamically mounted, I created an example in jsFiddle. The problem is that the menu has sub-menus, and when I try to access them, they are "inside" the box that creates the scrollbar. link: jsfiddle.net/tBJe3/10/
thank you!
try this one,
.menuLateral {
margin-left: 4px;
margin-top: 1%;
position: relative;
width: 35%;
height:200px;
color: #B2C2B9;
float: left;
overflow:visible;
}
http://jsfiddle.net/tBJe3/11/
In your code you have set position: relative; for almost all containers. If you remove them, your absolutely positioned sub-menus will be relative to the document and also will be on top of your scrollable content.
Here is the updated version of your code in JSFiddle.
Please note, that by doing in this way, some of your sub-menus will not appear where you want. So maybe you need to make with fixed positions or position them manually (and dynamically) using JavaScript.
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;
}
Why does the top category menu (Everything, Ballet Flats, Boots, etc) - div id="header-bar" - look great in FireFox and Chrome, but be hidden in IE unless you scroll down the page?
http://shoeporn.com
Any help will be much appreciated :)
It's positioned underneath (behind) the top bar. Either change the z-index to something bigger than the top bar, or change the top to position it below the top bar.
Its hidden in chrome as well. The z-index is lower than the one of the background or something.
Anyway add something like this to your header-nav:
z-index: 130;
I find setting position:absolute on #header-bar in this particular example to be poor practice. Consider changing that to
#header-bar {
position: relative;
/*left: 0;
right: 0;
top: 44px; - remove these*/
}
This will maintain natural document flow; position:relative allows for dropdown positioning and maintaining rendering context (compare with removing position property altogether and see the dropdown menus going "behind" the shoe tiles)
Rule of thumb: avoid absolute positioning if you can build without it.
For me its hidden in chrome too... anyway change this in css:
#header-bar {
top: 84px;
z-index: 105;
}
remove z-index from #header-wrapper and add z-index:106 to #header-nav.
Hope it will help...
This is my first question in stackoverflow, so I will be quick and precise.
I am dealing with a css/z-index related problem in a website. The url of the site is http://birthz.com and the problem is that the slideshow overlaps the submenus of the top menu. If you hover for example over "Skin care" there is a submenu that show up, but gets hidden by the slides of the slideshow.
Does anyone have any suggestions? I tried increasing the z-index of the submenu's ul element but no luck.
Thanks!
add this
div.MagicToolboxContainer {
position: relative;
text-align: center;
z-index: 0;
}