I have an example of my problem set up here.
I have had to set some li's to display: inline, so that they can occur on the same line, but now I need to add drop-down lists to them, and the drop down lists are happening on the other side of the page from where I would like them to. Do I have to position my original li's in a different manner?
Keep in mind that if you want to use the :hover class in anything other than an anchor tag, forget getting it to work in IE6 and make sure you have the correct DOCTYPE for the other browsers.
Try replacing the relevant parts of your CSS with this:
li
{
display: inline;
}
ul.level_1 li
{
position: relative;
}
ul.level_1 ul
{
position: absolute;
visibility: hidden;
}
li:hover ul
{
position: absolute;
right: 0;
visibility: visible;
width: 300px;
}
Basically hides the sub-level list until you hover over the parent list item node.
Setting the parent list item nodes as position:relative means that if you set any child nodes within as position:absolute it will be set relative not to the browser window but to the parent list item. This will have them show up directly underneath the list item you're hovering over and not on the other side of the window.
The width was added to have the sub-level list display as a line instead of a column.
I'm not sure if you're trying to move the top menu to the left, or the submenus to the right, so I'll propose a solution either way.
If you want the main menu items to appear on the left, then you need to remove or change the text-align: right in your body css.
If you want the submenus to appear on the right side, then because your <ul>s are absolutely positioned, you should change this rule:
li:hover ul
{
left: auto;
}
to this:
li:hover ul
{
right: 0;
}
Related
I guess it's kinda easy, but I've been stuck here for 3 hours already.
My dropdown menu moves whole content when used. I searched for similar questions on StackOverflow, for questions related to dropdown menus and got the following answer that partly helped:
.menu > ol {
position:absolute;
z-index:100;
}
I've added the snippet above to the original code. It worked out somehow - it doesn't move other content but now I can't centre it horizontally.
Using margin:0 auto; also did not help.
Could you please help me out? I've either placed position + zindex in wrong place, or I'm missing something.
Codepen:
https://codepen.io/graphconcept/pen/MdwQBM
Remove the position: absolute from .menu > ol and add it to .menu. Also add width: 100% to .menu. If you want your menu to be visible regardless of scrolling make the position fixed instead and add top: 0.
.menu {
margin: 15px;
position: fixed;
width: 100%;
top: 0;
}
.menu > ol {
list-style: none;
margin: 0;
padding: 0;
z-index:100;
}
Explanation:
Block elements with position: static (the default value for position) have a default width of 100%; Setting the position to absolute or fixed changes their width to auto; i.e. they shrink to fit their content's width. Your menu list is being horizontally centred within the menu element. This meant that when the menu element was 100% the width of the page, horizontally centring the menu list would also centre it with respect to the page. However when the menu element shrank to fit its width, the menu list couldn't be centred any more than it already was. The width of the menu element needed to be explicitly set to 100% to allow the centring to have a visible effect.
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.
Another developer has made a menu in a nav tag that is like this:
_layout page
<div>#Html.Partial("_menu")</div>
then in the _menu.cshtl page:
<div>#Html.RenderMenu("mainMenu")</div>
In the C# code a bunch of ul and li nested elements are generated, which looks fine at first on the page.
But when you hover over one of the elements the nested elements drop down and the div right below that gets pushed down the page. It's ugly. How do I fix this? Is there some CSS magic I can do to make it overwrite the div below rather than pushing it down?
Just add position with a property value of absolute and a higher z-index to the element that shows on hover. You can control the position with Top, Bottom, Left and Right properties values.
Example:
ul {
position: absolute;
left: 0; /* Adjust as needed */
right: 0; /* Adjust as needed */
}
Note: Make sure that the element that contains the element that shows on hover has a position property value of relative to help contain the Ul(in this case). Otherwise, it will overlap.
Hard to see without the code, but you can apply absolute positioning to overlapping element.( I have no clue which one is that as you didn't provide any code). So:
position: absolute
You have to make the position of the ul element relative.
ul{
position: relative;
}
I have an issue with inline list elements.
The issue is that when I limit the width of my menu, which contains inline list elements, to put it onto multiple lines (for mobile devices) the right-side of elements is being cut off.
Here's a JSFiddle showing this: http://jsfiddle.net/vk2bK/7/
The menu in the orange with:
width: 210px;
background-color: #ffc20e;
In this JSFiddle the right-side of the 2nd list element is cut off. There's lots of space beside it in the div with the class 'menu', so it's not because of that. I assume it's because of some inline list property I'm unaware of.
How do I prevent the right-sides of inline list elements being cut off when the list expands onto a second line?
Simple CSS fix should do it.
You need to modify the li elements so they are inline block with a defined width:
.menu li {
display: inline-block;
width: 90px;
}
See it here: http://jsfiddle.net/vk2bK/21/
EDIT
I played around with it, see if this is what you want: http://jsfiddle.net/vk2bK/22/
ok i found a solution : JsFiddle
.menu a {
display: inline-block;
}
.menu a {
width:80px;
background-color: #7dc242;
line-height: 30px;
margin: 3px;
}
i removed the lists and made all elements inline-block u can edit their width and height if u need to.
Take a look at this page and click on the arrows to activate the carousel: http://bethhaim.spin-demo.com/browse/divisions/i
As you can see, the ul overflows over the div with the black background, I need to fix this.
I've created a class called .stop_overflowing_plz and inside of that I've put a ul which is part of the carousel you see. The purpose of that new class is to stop the ul from overflowing all the way over the black div, but isn't working as intended.
Anyone know what I could do in order to keep the ul inside of .stop_overflowing_plz and stop it from overflowing like it currently is doing?
You appear to have the following CSS applied to the ul:
.le_carousel .overview {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
left: 0 top: 0;
}
You need to change position to relative otherwise it will always position itself relative to the page and not the surrounding div.
You need to add position: relative to your stop_overflowing_plz div.
As you're setting position: absolute on your ul, you need to make your div the containing block.