Thread: Force Overflow

    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2011
    Posts
    158
    Rep Power
    98

    Force Overflow


    Hello all,

    I'm trying to accomplish a behaviour which I'm not sure how to implement. The ebst way I can describe it is to force overflow.

    I have the following div:
    HTML4strict Code:
    <div id="nav">
    	<ul id="dateselect-all" class="timechange-menu">
    		<li>
    			<span>Date Range</span>
    			<?php include("timeMenu.html"); ?>
    		</li>
    	</ul>
    	<ul class="nav-menu-list">
    		<li>
    			<span>Profiles</span>
    				<ul>
    					<li><a href="#" onclick="ClickHandler();">All</a></li>
    		  			<li><a href="#" onclick="ClickHandler();">Bad</a></li>
    		  			<li><a href="#" onclick="ClickHandler();">Good</a></li>
    		  			<li><a href="#" onclick="ClickHandler();">Mixed</a></li>
    		    		</ul>
    		</li>
    	</ul>
    </div>


    I also have an event tied to the SPAN using jQuery:
    JavaScript Code:
    $('#nav span').click(function(){
    	if($(this).next().css('display') == 'none'){
    		$(this)
    			.next()
    			.css({
    				'display'	:	'block'
    			});
    	}else{
    		$(this)
    			.next()
    			.css({
    				'display'	:	'none'
    			});
    	}
    });


    As you can tell, when the span is clicked, the "submenu" drops down and makes the containing LI, thus the UL, to get wider. I know it's fairly easy in JavaScript to acomplish what I want but I'm curious: Is there is a way so that when the SPAN element is clicked the the child list is displayed, can I force the UL and LI not to grow and only force the overflow to go beyond the already existing bounds of the containing LI/UL?

    [edit]
    I think the only way to accomplish what I want with CSS is to give the parent ULs a static width IE width:150px; which is not a solution I'm happy with.
    Last edited by WrinkledCheese; May 29th, 2013 at 03:49 PM.

IMN logo majestic logo threadwatch logo seochat tools logo