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
Related
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 used the method shown in How to target the href to div
to target the href to div. It worked. But I need to add another level.
HTML
<ul >
<li class="active">home</li>
<li>settings</li>
</ul>
<div class="target">
<div id="m1">
<ul >
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
<div id="m2">
<ul>
<li class="active">Item1</li>
<li>Item 2</li>
</ul>
</div>
</div>
<div class="target123">
<div id="subm1-1">
content1
</div>
<div id="subm1-2">
content2
</div>
<div id="subm2-1">
content3
</div>
<div id="subm2-2">
content4
</div>
</div>
CSS
.target > div {
display:none;
}
.target > div:target{
display:block;
}
.target123 > div {
display:none;
}
.target123 > div:target{
display:block;
}
My issue is when I click on the link, "item 1" in the content in appears in the correct place. But the content in disappears.
How can I stop this?
My divs are positioned next to each other. So one div doesn't overlap the other.
If I understand correctly what you're trying to do, this is not possible using the :target attribute. The target is always the part of the URL after the #, and there can always only be one target at a time.
This means that whenever you activate a target all the other elements are going to be hidden again. You cannot show contents based on two different targets at the same time using this method.
I have the following html as part of my layout page:-
<div class="top-nav nav-collapse">
<ul class="nav">
<li class="customTitle">custome Title </li>
<li>
</li></ul>
</div>
but the title was at the top of the page as follow:-
so I added a before the title text as follow:-
<div class="top-nav nav-collapse">
<ul class="nav">
<li class="customTitle"><br/>custome Title </li>
<li>
</li></ul>
</div>
and the title was shifted to the bottom as follow:-
but my question is wheatear adding the <br/>, is the right approach to follow to achieve my layout requirement ?
thnaks
Try adjusting the line-height of the .customTitle class. In particular, if you set line-height to be equal to the height, then your text will appear in the middle of the title bar.
try this one,
.customTitle
{
line-height:(somevalue)px;
}
You can Use padding-top: which sets the top padding (space) of an element
.nav .customTitle { padding:YYYpx; }
or
line-height: specifies the line height
.nav .customTitle { line-height:XXXpx; }
Never use<br/>'you can use padding or line height.
.customTitle
{
line-height:___px;
}
or
.customTitle
{
padding-top:___px;
}
Never use <br/> for styling!
You can use
li.customTitle { line-height:...; }
or
li.customTitle { padding:...px; }
you can youse style tag. And give padding....
<li class="customTitle"><span style="padding-top:10px">custome Title</span> </li>
you can adjust height according to your need....
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.
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>