I have a menu whose sub menu is causing a horizontal scroll bar to appear when the viewport is decreased.
Here is the css
.main-menu ul li > .sub-menu{
position: absolute;
top: 100px;
z-index: 99;
width: 200px;
left: 0;
background-color: #fff;
visibility: hidden;
opacity: 0;
transition: all 0.4s;
}
Right now the sub menu is floating right(i hope i used the right term). Will it be possible to just float the sub menu to left of its parent???
Here is the fiddle to reporduce the issue. https://jsfiddle.net/sk8m54g1/
As you can see in the image, the sub menu is extending to the right from its parent. What i want is, the sub menu to extend to the left from its parent.
Change the left value. -40px or -35px.
.main-menu ul li > .sub-menu {
...
left: -40px;
...
}
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 seem to be having a problem with my Wordpress CSS Menu. I am trying to create a dropdown element in the menu, which is conveniently wrapped in a div automatically called "sub-menu".
When normal, the menu looks like this:
However, when I try to access the drop-down menu under "Photography", this happens:
I have tried everything and am unable to get it to correctly show up under Photography. Any help would be much appreciated:
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
#header li:hover ul.sub-menu {
display:block;
}
You need to make sure the container element (#header li) is set to a position as well. I would use relative becasue it will (hopefully) not break other positioning:
#header li {
position: relative;
}
#header li ul.sub-menu {
display:none;
position: absolute;
top: 10px;
left: 50%;
width: auto;
}
header li:hover ul.sub-menu {
display:block;
}
Absolute elements will position itself based on the nearest parent who's position is set explicitly.
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/