Im having some issue with this sub-menu I need it to look like this
Right now it looks like this http://paramountwell.staging.wpengine.com/
By Default the sub-menu parent is set to relative and the sub-menu is set to absolute. I tried moving the position: relative to the header container. Which sort of achieves what I want but then the sub-menu is always shown even when the parent isn't being hovered. Anyone help would be awesome!
There are 2 CSS rules you need to change.
Then the submenu needs some better formatting.
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 179px;
left: 0;
z-index: 99999;
background-color: #106ccc;
width: 100%;
display: none; /* Added */
}
.main-navigation ul li:hover>ul, .main-navigation ul li.focus>ul {
/* left: auto; */
display: block; /* Added */
}
Related
I created a navigation bar with a first and second level navigation. You can see the latest version here as a JSFiddle (maybe you have to increase the width of the frame containing the output to see the navigation bar with two levels).
At the moment, I have several issues with this navigation bar:
The width of the first level element "Menu1" should only be the width which it will need and not the width of the total width of the elements inside the second level navigation.
The second level navigation should be width 100% so the same as the yellow header and not only the width of the elements of the second level navigation bar.
So the navigation bar should look like the following image:
But how can this be achieved, especially the width of 100% of the second level navigation bar? I tried this CSS-Tricks: Full Browser Width Bars with "Using pseudo elements", because I did not want to have this definition globally on
html, body {
overflow-x: hidden;
}
Any help is highly appreciated!
Is this what you want http://jsfiddle.net/aytaxykf/5/
i added this ontop of your styling. so you can probably remove some of the rules you have there
.top-bar {
position: relative;
}
.top-bar-section {
height: 70px;
}
ul.sub-menu {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: blue;
text-align:center;
}
ul.sub-menu li{
display: inline-block;
float: none;
}
.menu-center a {
position: relative;
}
.menu-center .active > a:before {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -10px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent lime transparent;
}
I have a navigation:
<ul>
<li>Button
<div class="sub-container">Sub navigation</div>
</li>
</ul>
Sub container is set to opacity 0 and on hover of LI opacity goes to 1.
Now I have a problem that sub-container has a border and that border is on top of the parent LI element. I want LI element to be on TOP of the sub-container child element. So that they will look "merged".
I tried z-index -1 solution which works PERFECTLY in FireFox, but in Chrome it crashes.
Screenshot:
This is my CSS code:
#topBarHeader nav ul.main-nav {
list-style: none;
position: absolute;
left:0;
display: inline-block;
z-index: 100;
}
#topBarHeader nav ul.main-nav > li {
float: left;
display: inline-block;
padding: 15px 17px 10px 17px;
border: 1px solid rgba(255, 255, 255, 0);
margin-right: 10px;
}
#topBarHeader nav li .sub-container {
position: absolute;
top: 49px;
left: 0px;
width: 640px;
opacity: 0;
visibility: hidden;
overflow: scroll;
overflow-x: hidden;
height: 380px;
background: white;
z-index: -1;
border: 1px solid #d5dbdf;
}
#topBarHeader nav li:hover > .sub-container {
opacity: 1;
visibility: visible;
}
Here is the link to my page menu. (very slow, on a bad server.)
You should try declaring position: relative on the parent <li> element, or else absolute positioning may not work properly.
I wouldn't say this is a bug with Chrome, but more like how different browsers attempt to handle ambiguous rules when there isn't enough information.
[Edit]: I think I understand your problem now. The trick to make the top border disappear behind the active tab, is to actually wrap the content in the <li>, and then assigning it a higher z-index compared to the dropdown content, and change the bottom border colour to match the background so that it disappears.
Here is a Fiddle as a proof-of-concept - http://jsfiddle.net/teddyrised/EPYvq/
I've faced a problem putting a horizontal sub menu bar. Basically, I can do vertical dropdown menubar, But I haven't any idea how to make horizontal dropdown menu bar. This is what I can:
http://jsfiddle.net/eSxT9
But I need this: https://www.dropbox.com/s/idx2r5bkbuzd1t0/horizonatl-sub-menubar.png
I want to do with CSS. I thought, I would have to change this code:
.nav ul ul {
position: absolute;
left: 0;
right: 0;
display: none;
z-index: 5;
}
I removed left:0, right: 0, gave width 100%. But, it won't work. I can't get the idea what should I do. Please, help me.
Give a width to the inner UL and float the LI for that inner UL http://jsfiddle.net/eSxT9/1/
.nav ul ul {
position: absolute;
width:1000px;
left: 0;
right: 0;
display: none;
z-index: 5;
}
.nav ul ul li {
float:left;
margin: 0;
}
You need to use display: inline for that particular <ul>
Heres a simmilar example of the logic http://jsfiddle.net/kevinPHPkevin/te5AU/268/
I have top menu with drop down navigation(sub menu) and drop down comes right side of main menu.
css:
ul.dropdown ul {
width: 220px;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
}
How can change position to left for a last menu because if i hover on last menu, drop-down comes with horizontal scroll because there is no space on right side to display menu?
Please help
ul.dropdown li {
position: relative;
}
ul.dropdown li ul {
position: absolute;
top: 20px; /* assign the correct value of the top line height */
left: 0px;
}
This should work^^ When assigning position:absolute; to an child element of an element with position:relative the absolute positioning is relative to its parent and not to the body.
My fault, somehow overread the last part with "last child".
This could work:
ul.dropdown li:last-of-type ul {
position:absolute;
left:0px;
}
You can use jquery to fix the problem,try this
$(function(){
$(".dropdown:last").css("left","-120px");
})
You should use last-child selector to set right property instead of left:
.dropdown > li:last-child:hover ul {
left: auto;
right: 0;
}
You don't provide a fiddle so I've set up this simple example to demonstrate the principle: http://jsfiddle.net/6eBd2/
I currently am working a CSS navigation system on my client's website at http://cjcdigital.net/clients/andrea and while the top navigation has been working fine, I am unable to recreate the rollover effect on the vertical sidebar containing the social media buttons.
To achieve the top navigation effects I followed the steps at:
http://www.elated.com/articles/css-rollover-buttons/
With my navigation elements each being stacked top/bottom.
For the side navigation however, despite setting the image:hover to push the sprite to the left, the image hover property does not kick in at all.
Below is some code from the top nav, and below that is code form the side nav.
#headerMenu {width: 1200px;}
#headerMenu ul{display: inline;}
#headerMenu li a{top:334px; position:absolute;}
#magazine
{
display: block;
width: 112px;
height: 17px;
background: url("./images/magazine.gif") no-repeat 0 0;
left:160px;
}
#magazine:hover
{
background-position: 0 -17px;
}
#magazine span
{
position: absolute;
top: -999em;
}
Social Navigation
#facebook
{
display: block;
width: 149px;
height: 57px;
background: url("./images/facebook.gif") no-repeat 0 0;
}
#facebook:hover
{
background-position: -300 0;
}
#facebook span
{
position: absolute;
top: -999em;
}
Thanks in advance for any assistance
You haven't specified any units in your CSS declaration for #facebook:hover. You probably wanted to do something like:
#facebook:hover
{
background-position: -300px 0;
}