Thread: Force Overflow

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

    Join Date
    Jun 2011
    Rep Power

    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">
    			<span>Date Range</span>
    			<?php include("timeMenu.html"); ?>
    	<ul class="nav-menu-list">
    					<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>

    I also have an event tied to the SPAN using jQuery:
    JavaScript Code:
    $('#nav span').click(function(){
    	if($(this).next().css('display') == 'none'){
    				'display'	:	'block'
    				'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?

    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 02:49 PM.

IMN logo majestic logo threadwatch logo seochat tools logo