5

I have a menu (jsfiddle) which displays like below, it is built from <ul> and <li> elements.

enter image description here

The child menu elements show up below the parent element, and the container is a fixed-width <ul>. The problem I have is that for menu element further to the right, this second-level <ul> overflows the parent element's width, like so:

Current state

How can I make sure that the submenu shows up as in the first picture, but for menu elements further right just moves no further than to the right border, keeping the size intact, instead of overflowing?

enter image description here

likeitlikeit
  • 5,563
  • 5
  • 42
  • 56
  • I think its more easy to write it than to edit yours I had this answer check it please .[**this**](http://stackoverflow.com/questions/15938038/trying-to-add-a-css-sub-sub-menu/15959920#15959920) and also [_this_](http://jsfiddle.net/D9X6b/) – Sina R. May 18 '13 at 00:29

3 Answers3

4

add to your container overflow-x (you want to keep the y perhaps...) hidden..

#navigation{
    width:900px;
    margin:0px 0 13px;
    padding:0px;
    float:left;
    background:#3b6daa;
    overflow-x:hidden; <------------------------------- note the X..
}

or just make sure your menu isn't fixed width:

#navigation>ul li ul {
    float: left;
    padding: 8px 0;
    position: absolute;
    left:auto; 
    top:42px;
    display: none;
    width:auto;   <------------------- will make it adjust to the contain and the content
    background: #81abdd;
    color: #1c508e;
    list-style: none;
}

or if you want to align it different (like a tooltip that aligns to the right or left of the parent..then I suggest you go down the javascript path..)

Here are some examples:

examples of aligning jquery vertical align 2 divs

jQuery position (also check out width etc) http://api.jquery.com/position/

a great tooltip that aligns all around http://craigsworks.com/projects/qtip/

No out of the box example, but this should give you the right direciton I believe..

Community
  • 1
  • 1
Dory Zidon
  • 10,497
  • 2
  • 25
  • 39
  • Thanks for the update. This will solve the overflowing part, but it won't keep the menu its original size. – likeitlikeit May 18 '13 at 00:33
  • the first part will..I understand you want to move the whole menu to the left right, so it will be align differently to the parent? – Dory Zidon May 18 '13 at 00:34
  • Sorry, I meant to say that the submenu should keep its size. Can you somehow accomplish that? – likeitlikeit May 18 '13 at 00:38
  • you want to move the whole submenu to align differently to the parent..sounds like js would be your route rather than just css I believe..I suggest you look at using jQuery to measure the viewPort and the parent stuff, then align it.. – Dory Zidon May 18 '13 at 00:40
  • I use jQuery. Can you somehow accomplish that using JavaScript? – likeitlikeit May 18 '13 at 00:41
  • Please see my answer. It can be accomplished in pure css. – BIOS May 18 '13 at 00:43
2

You can add parent div to all of your elements with overflow: hidden;.

Like this

Parandroid
  • 513
  • 2
  • 11
1

Add the following to your container:

overflow-x: hidden;

You also need to add a height to it that will so that it will display the submenu.

To move certain sub-menu's further left, you need to add a class to their <ul> element and then add css to target them and move them as far left as you want:

Ex: if you add the class push_left to the submenu <ul> element, you can then target it like so:

#navigation>ul li .push_left {

    position: absolute;
    top: 42px;
    left: 0px; /* set this value to however far left you want the sub-menu */

}
BIOS
  • 1,655
  • 5
  • 20
  • 36
  • It's not that easy. Can you make sure that the element is actually moved to the left, instead of just cutting off the overflowing part? – likeitlikeit May 18 '13 at 00:30
  • 1
    I would also suggest to use overflow-x (not the y part of it..) – Dory Zidon May 18 '13 at 00:33
  • `overflow-x` somehow cuts off the remainder of the submenu. It doesn't move the submenu to the left to keep it at it's size. – likeitlikeit May 18 '13 at 00:39
  • Edited answer to show how to move only certain items left. Hope it helps. You obviously need to add a different class for each submenu you want to move left if each will be positioned differently (i.e not all the same distance left). – BIOS May 18 '13 at 00:42
  • I have a dynamic menu. Can I somehow do that without differentiating between elements on the left and the right? – likeitlikeit May 18 '13 at 01:10
  • As indicated above, you only apply the class to whatever submenu ul elements you wish to move left. – BIOS May 18 '13 at 01:15
  • @DoryZidon I'd like to keep all menu elements with the same style. – likeitlikeit May 18 '13 at 01:18
  • likeitliekit..I got that..that is why css only with not work, jQuery and some tinkering..have a look at hte links I setn you. @BIOS gotchya, but still you need to measure to know when to push right or left as it also depends sometimes on the viewport or device.. – Dory Zidon May 18 '13 at 01:25
  • If the parent container is a fixed width pure css is fine. The example uses a fixed width 900px container so the above will work perfectly in this case. – BIOS May 18 '13 at 01:34