I know, a vague title but it's hard to describe what I want in one sentence.
My problem is as follows, I have a template with several dropdown menus activated by jQuery. The dropdown lists appear as second level navigational items within a the first-level list, as follows:
<ul class="tools">
<li class="dropdown">
Tools
<ul class="submenu">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
<li>More</li>
</ul>
The submenu is hidden by default, and can be shown by clicking the list item it belongs to (in this case 'tools'). The submenu is positioned absolute, so that when it shows it's always just below the clicked link. This all works perfectly fine.
The problem is that all this is wrapped in a div that has an overflow: hidden. When the submenu is too close to the right side of this div, and the list items are too long, the list falls under the right border of the wrapper, rendering it partly invisible.
Overflow: auto gives the wrapper a scrollbar, which is unwanted. Overflow: visible solves the problem, but makes the wrapper have no height so that the background color and borders aren't visible, which is part of it's function, so that doesn't help either.
To not have to quote a large bunch of code, a live example can be seen on http://www.pkr.nl/template/forumdisplay.html
Does anyone know a solution that will make the menus either show outside the wrapper, or that makes them align to it's right in a decent way?
Is there a reason you are floating #container .column left?
If you remove the float and then remove the overflow:hidden from #container, your menu will show up.
Related
I am creating a responsive mobile version of my website. As you can see in this jsfiddle, when a user hovers <li> item, the menu opens up but overlays the <li> instead of expanding the menu.
I have added display: block in various places and width: 100% hoping that would fix the issue.
What do I need in the code for the menu to expand with a <ul> tag correctly once hovering over an <li> tag?
It's not pushing the menu down because it's positioned absolutely, therefore being removed from the normal document flow.
Remove all position:absolute statements from the li ul selector.
Working demo:
http://jsfiddle.net/306pfgs3/1/
I am using twitter bootstrap 2.3, I need the menu to be aligned to the right and also need the anchor to have a diferent widt, depending on the size of the world inside the anchor.
With next code, it's working, I leave empty columns with offset class, but not sure it there is a better to achieve the same result with another technique.
What I don't know how to do it is get the same "empty space separation" between each li, each li having a different width.
<div class="row_fluid">
<ul class="menu_logged span7 offset5">
<li class="span1 offset6"><a>Test</a></li>
<li class="span1"><a>Medium phrase</a></li>
<li class="span1">123</li>
<li class="span1">Hello World</li>
<li class="span2">Back</li>
</ul>
</div>
Any help?
Thank you
I have the basics of my navigation menu set up by floating three divs left within a #nav div that is centered using margin:auto;.
Only one of these nav menu options requires a drop down menu. I'm assuming that I'd have to bring the drop down menu out of normal flow so that it doesn't move the other floated objects.
This is my first project so I'm just trying to conceptually wrap my head around how to position this menu. I'm afraid that if I do a position relative with pixel values the menu might not show up under the original link depending on the user's screen size/resolution.
The red X marks the location of where the drop-down should appear.
Should this un-ordered be nested under the portfolio list item, or should it be a separate un-ordered list that is somehow positioned under the portfolio link? I'm afraid that if it's nested it might knock the bottom-border down with it?
I can post code, but I'm sort of at a loss on where to begin here. Looking for a push in the right direction!
Thanks
This is generally done this way:
<ul class=menu id=leftLinks>
<li>about</li>
<li>portfolio
<ul class=submenu>
<li>Submenu item</li>
</ul>
</li>
</ul>
.menu > li {
position: relative;
}
.submenu {
position: absolute;
left: 0;
top: 100%;
}
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I have organized a menu. Its HTML is as follows:
<ul class="topmenu">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
<li>Text 4</li>
<ul>
This is a horizontal menu, so I have floated the list items to left to appear them in a horizontal line. I could have used display:inline to appear them in a single line, but since IE does not support it and I don't know any other way to do so, I used float:left;.
It's css is:
.topmenu {
list-style:none;
margin:0;
padding:0;
}
.topmenu li {
float:left;
}
This brings the menu in a perfect horizontal line, but the entire list is floated to the left. I want to bring the .topmenu to appear in the center of the document and keep the listitem inside it floated towards the left.
I found that this is achievable by defining width property of the .topmenu, but I dont want to fix its width as the list-items are dynamically generated and thus could increase and decrease.
Any one know of any solution?
Here is the solution without using width:)
display: inline is supported fine by all versions of IE. It's inline-block that isn't supported completely in IE 6 and 7 (source).
This should be solvable by simply switching to display: inline.