www.webdeveloper.com
Results 1 to 5 of 5

Thread: Drop Down Menu Not Displaying Within A Div Table Cell

  1. #1
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700

    Drop Down Menu Not Displaying Within A Div Table Cell

    I need to put a simple css drop menu within a div table cell.

    Note that I'm using the table cells as a workaround of CSS's inability to control vertical alignment in float divs, and I need to use those because the page is built from a matrix of divs that are dynamically generated so I have no way to predict their length. If you have an alternative that doesn't involve complex after load redraws with javascript, I'm happy to hear it.

    The menu is not displaying within the cell (perhaps indicating that CSS/HTML doesn't want to recognise this structure?), and when it does display, the sublists aren't properly aligned.

    Here is the CSS
    HTML Code:
    <style type="text/css">
    
    	ul {
    	font-family: Arial, Verdana;
    	font-size: 14px;
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	}
    	ul li {
    	display: block;
    	position: relative;
    	float: left;
    	}
    	li ul {
    	display: none;
    	}
    	ul li a {
    	display: block;
    	text-decoration: none;
    	color: #ffffff;
    	border-top: 1px solid #ffffff;
    	padding: 5px 15px 5px 15px;
    	background: #1e7c9a;
    	margin-left: 1px;
    	white-space: nowrap;
    	}
    	ul li a:hover {
    	background: #3b3b3b;
    	}
    	li:hover ul {
    	display: block;
    	position: absolute;
    	}
    	li:hover li {
    	float: none;
    	font-size: 11px;
    	}
    	li:hover a { background: #3b3b3b; }
    	li:hover li a:hover {
    	background: #1e7c9a;
    	}
    </style>
    Here is the HTML
    HTML Code:
    <div style='display:table'>
    	<div style='display:table-row; '>
    		<div style='display:table-cell; 18px;  text-align:left;'>
    			<ul id="menu">
    				<li><a href="#">Home</a></li>
    				<li><a href="#">About</a>
    				    <ul>
    					   <li><a href="#">First Item</a></li>
    					   <li><a href="#">Second Item</a></li>
    					   <li><a href="#">Third Item</a></li>
    				    </ul>
    				</li>
    				<li><a href="#">Products</a>
    				    <ul>
    					   <li><a href="#">Typing Gizmo</a></li>
    					   <li><a href="#">Water Cannon</a></li>
    					   <li><a href="#">Laser Gun</a></li>
    					   <li><a href="#">Submarine</a></li>
    					   <li><a href="#">Invisibility Cloak</a></li>
    				    </ul>
    				</li>
    				<li><a href="#">Contact</a>
    				    <ul>
    					   <li><a href="#">Email</a></li>
    					   <li><a href="#">Skype</a></li>
    					   <li><a href="#">The Old Fashioned Way</a></li>
    				    </ul>
    				</li>
    			 </ul>
    		</div>
    	</div>
    </div>
    Any suggestions?
    Oh Lord, please help me be the person my dog thinks I am.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    The code you posted works fine for me. Was the '18px' in the table-cell <div> supposed to be height:18px?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Aug 2003
    Location
    Sydney, Australia
    Posts
    700
    Hmmm... Thanks Rick. It seems to be working when I use it in isolation, but when it gets incorporated into the dynamically generated page, something seems to go wrong. It must be a problem elsewhere.

    I do have one other issue though... below it, I'm using a jquery slideshow. I've been able to bypass the CMS (the bit that goes wrong) and hand generate code that works, but the menu drops down behind the pictures in the slide show. I do recall reading about this issue, but can't remember the fix. I hope you can point me in the right direction.

    Thanks for taking the time to get it to work. That has been of enormous assistance in making me look elsewhere for the problem.

    Cheers
    CTB

    (and yes, it was supposed to be height:18px)
    Oh Lord, please help me be the person my dog thinks I am.

  4. #4
    Join Date
    Mar 2011
    Posts
    1,133
    I poked around with your code and found that if I set #menu { height:18px; }, and removed the display:table-xx and the padding on the <a>nchors, it did shrink the individual cells so that they just enclosed the text. I don't know if that helps, but it might lead you closer to what you're after.
    Rick Trethewey
    Rainbo Design

  5. #5
    Join Date
    Apr 2013
    Posts
    1

    Let get informatin about easylifeapp

    Hello friends. I have downloaded software from easylifeapp.com. I can't active it on my win-8. My friends also using this software on win-8. Please help me out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles