I have a nested list like:
<ul id="nav">
<li id="" class="">
Wedding
<div class="flyoutWrapper" style="display:block;">
<ul class="flyout fourCol">
<li id="" class="">
.....
</li>
<li></li>, etc
</ul>
</div>
</li>
</ul>
I want all the li's inside of class="flyout fourCol" to float next to each other.
This is what I want my dropdown to look like:
#nav .flyout.fourCol { width:900px; }
http://jsfiddle.net/t7esz/ (this works)
#nav .flyout.fourCol { width:auto; }
http://jsfiddle.net/sumcA/2/ (this doesn't work!)
If you only want it to expand, set the min-width property to a fixed value (like 900px). Keep width on auto.
I haven't inspected how your entire menu works, but setting that min-width on .flyout.fourCol only seems to work for the entire thing.
Related
I'm trying to stop moving objects when hovering.
See what i'm doing here>JSFIDDLE
When hovering the second link (TEST2), it changes to bold property (need to be), but it pushes the other button (TEST) to the left. How can i anchor other elements in the header and stop their movement?
give an item class to normal list elements and seperator class to seperator list element
<div class="header-bg">
<div class="container">
<div class="menu-header">
<nav>
<ul>
<li class="item">Test</li>
<li class="seperator"><span>∴</span></li>
<li class="item">Test2</li>
</ul>
</nav>
</div>
</div>
</div>
and give a fixed width to list elements at .item class
.item {
width:70px;
}
working demo
give them a fixed width, ie width:80px
I am trying to make a three tiered CSS style menu.
Jsfiddle here : https://jsfiddle.net/kBVYD/1/
What I need to accomplish is to have the third tier of the menu to stay aligned with the parent menu. When you hover over menu item A, Menu B dropsdown. When you hover over the menu items in the dropdown they show a third dropdown to the right of Menu B.
Right now the third menu (products) when hovered is floating to the left, and it should be droping down under the initial menu item.
<div class="full_width">
<div class="wrapper">
<div class="page-wrap">
<ul class="dropdown">
<li>HOME</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
<li>PRODUCTS
<ul class="sub_menu">
<li>
Compliment Containers<span class="span_right">»</span>
<ul class="test">
<div class="menu_level3_01">
<span>Wastebaskets</span>
<span>Compost</span>
<span>Curbside</span>
<span>Deskside Recycling</span>
</div>
<div class="menu_level3_02">
<span>Large Trash Collection</span>
<span>Large Reycling Collection</span>
<span>Waste Streaming Containers</span>
</div>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
You just need to make the second tier relative and left: 0.
#menu1 ul.menu li ul.sub-menu li ul
{
position: relative;
display: none;
left: 0%;
}
https://jsfiddle.net/kBVYD/34/
I think this is what you want: Fiddle
You need the parent of the last menú (the "li") to NOT have position relative so the last menu absoluted position won't depend on the parent.
The as you have fixed values it's easy to set the submenu right where you want with 5px top (the margin of the first submenu with the main menú and the just a value for the left position, in this case 180px).
basically I've just added this to the fiddle:
.sub-menu > li {position:static !important;}
.sub-menu ul {top:5px !important; left:180px !important; }
Edited: the !important is just to overwrite your css's in the fiddle. You may better implement this attributes insteed of the others for a cleaner css sheet.
I am developing a website and I want a menu like the above image. This is what I have tried: jsFiddle
HTML
<div class="">
<ul class="header-menu-ul">
<li class="header-menu menu-link1-color">ABC's Office</li>
<li class="header-menu menu-link2-color">Benefits</li>
<li class="header-menu menu-link3-color">NEW Brand</li>
<li class="header-menu menu-link4-color">Editorial</li>
<li class="header-menu menu-link5-color">Manger</li>
<li class="header-menu menu-link6-color">Extra</li>
</ul>
</div>
The problem I'm facing is it's taking a space between <li> tags.
I just floated the list items to the left, like this:
.header-menu-ul li {
float: left;
}
WORKING FIDDLE: link.
DEMO
This will create an always single line menu unliek the floating solution where often items fall from position on small sizes + no spaces between the items.
Code:
.header-menu-ul{
display: table;
width: 100%;
}
.header-menu{
display: table-cell;
}
my approach would be using inline-block and min-width. can also use percent in width (1oo% / total_li ).
I am trying to set a nested set of list items in a Joomla menu so that the outermost parents move down to make room for the children. The height of the list items also needs to be a set height because the menu items are buttons. At the moment what happens is that the parent items below a child item horizontally get pushed into the space of the child item so that they overlap. Here is a simplified example of what I am trying to achieve:
<ul>
<li style="height: 40px;">Parent Item 1
<ul>
<li style="height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="height: 40px;">Parent Item 1</li>
</ul>
Here is a link to a page on my site showing exactly this situation:
http://procadsys.worldnz.co.nz/test
Is there any way with CSS to have the heights properly calculated down this list so that each level is 40 pixels below the previous one without any levels overlapping? I've tried changing the position attribute to fixed and relative as well, but this didn't work.
Solved it. The answer is to use line-height, not height:
<ul>
<li style="line-height: 40px;">Parent Item 1
<ul>
<li style="line-height: 40px;">Child item of 1</li>
</ul>
</li>
<li style="line-height: 40px;">Parent Item 1</li>
</ul>
You use this style code
ul > li:hover ul{
height:40px;
margin:0;
padding:0;
}
Please refer to the code below:
<ul>
<li style="height:100px; overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
From the code above, we know that we can only see 100px height of black background.
Hhow can we see 500px height of <div> black background? In other words, how can I make the <div> appear in front of <li>?
Use the CSS z-index property. Elements with a greater z-index value are positioned in front of elements with smaller z-index values.
Note that for this to work, you also need to set a position style (position:absolute, position:relative, or position:fixed) on both/all of the elements you want to order.
You can set the z-index in css
<div style="z-index: -1"></div>
In order an element to appear in front of another you have to give higher z-index to the front element, and lower z-index to the back element, also you should indicate position: absolute/fixed...
Example:
<div style="z-index:100; position: fixed;">Hello</div>
<div style="z-index: -1;">World</div>
Upper div use higher z-index and lower div use lower z-index then use absolute/fixed/relative position
The black div will display the full 500px unless overflow:hidden is set on the 100px li
I think you're missing something.
http://jsfiddle.net/ZNtKj/
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
</ul>
In FF4, this displays a 100px black bar, followed by a 500px red block.
A little bit different example:
http://jsfiddle.net/ZNtKj/1/
<ul>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:black;">
</div>
</li>
</ul>
<ul>
<li style="height:100px;">
<div style="height:500px; background-color:red;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:blue;">
</div>
</li>
<li style="height:100px;overflow:hidden;">
<div style="height:500px; background-color:green;">
</div>
</li>
</ul>