Menu Cut off by Div?

HTML & CSS
1

Hello all!

I received wonderful help here not too long ago, and now I’ve run into another issue that I can’t quite figure out how to fix.

My submenu (if you hover over “White”) is getting cut off by its containing DIV! I’m trying to make it show the submenu without having to move any of the other page’s elements (even if it shows on top of the table below it on the page). I tried playing with padding, margins, and even putting different DIV’s within one another as well as changing absolute/relative position, but none of that is working!

Anyone have any idea how I can fix this?

Here is the fiddle.

Or…

Here is my CSS:

*
{
	margin: 0;
	padding: 0;
}

html,
body
{
	background: #000;
}

body
{
	font: 13px/1.231 arial,helvetica,clean,sans-serif
}

#page
{
	overflow: hidden;
	width:1000px;
	height:840px;
	background: #fff;
}

.widget
{
	overflow: hidden;
	width:290px;
	height:316px;
	margin: 256px 0px 0px 60px;
	padding: 0px;
	float: left;
}

.scroll-pane
{
	width: 360px;
	height: 400px;
	overflow: auto;
	margin: 72px 95px 0px 0px;
	padding: 0px;
	float: right;
}

h1
{
	font-size: 116%;
	color: #fff;
	background: #50506d;
	margin: 0 0 1em;
	padding:4px 8px 5px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

h2
{
	clear: left;
	font-size: 100%;
	color: #fff;
	background: #000;
	padding:4px 8px 5px;
	margin: 0px;

	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

h2 span.setting-type
{
	font-weight: normal;
}

p
{
	font-size: 93%;
	margin: 1em 0;
}

#menu {
    margin: 52px -350px 0px 0px;
    float:right;
    padding: 0;
    width:100%;
    background: transparent;
	overflow: hidden;
 }
#menu a {
    font-family: Impact, Helvetica, sans-serif;
    background-color: black;
    color: white;
    border: 2px solid transparent;
    -moz-border-radius:50%;
    -khtml-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
    display: block;
    font-size: 28px;
    line-height: 106px;
    vertical-align: middle;
    /*font-weight: bold;*/
    width: 106px;
    height: 106px;
    text-align: center;
    text-decoration: none;
}

#menu a:hover, #menu .sub-menu a:hover {
    border-color: red;
    cursor:pointer;
}

#menu , #menu ul {list-style: none;}
#menu li {
    float: left;
    position: relative;
    text-align: center;
    margin-left:10px;
}

#menu .sub-menu {
    position: absolute;
    top: 80px;
    left: -9999em;
    padding: 10px;
    z-index: 90;
}

#menu .sub-menu li {
    text-align: left;
    margin-bottom:6px; 

}

#menu li:hover .sub-menu {
    left: -54px;
    /*border: 1px solid #ececec;*/
}

#menu .sub-menu a {
    font-family: Impact, Helvetica, sans-serif;
    display: block;
    font-size: 24px;
    padding: 10px;
    /*padding: 19px 25px;*/
    height: auto;
    width: 150px;
    border: 1px solid #ececec;
    -moz-border-radius:15px;
    -khtml-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    /*background: -moz-linear-gradient(center top, rgb(0, 0, 204), rgb(0, 255, 0)) repeat scroll 0% 0% transparent;*/
    text-decoration: none;
    line-height: normal;
}

And here is my HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>

		<title>Red, White, and Blue</title>
		
		<link type="text/css" href="style/style.css" rel="stylesheet" media="all" />

	</head>
	<body>
	<center>
	<div id="page">
		<ul id="menu">
			<li><a href="about.php">Red</a></li>
			<li><a href="about.php">White</a>
				<ul class="sub-menu">
				<li><a href="about.php">Alaska</a></li>
				<li><a href="about.php">Rhode Island</a></li>
				<li><a href="about.php">Florida</a></li>
				<li><a href="about.php">District of Columbia Downtown</a></li>
				<li><a href="about.php">New York City</a></li>
				</ul>
			</li>
			<li><a href="about.php">Blue</a></li>
			<li ><a href="about.php">Stars</a></li>
			<li><a href="about.php">Stripes</a></li>
		</ul>

		<div class="widget">
			<table>
				<tbody>
					<tr>
						<td>One
						</td>
						<td>Two
						</td>
						<td>Three
						</td>
					</tr>
					
					<tr>
						<td>Apples
						</td>
						<td>Oranges
						</td>
						<td>Pears
						</td>
					</tr>
					
					<tr>
						<td>Square
						</td>
						<td>Circle
						</td>
						<td>Triangle
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="scroll-pane">
			<h2>Hello World!</h2>
			<table>
				<tbody>
					<tr>
						<td>First
						</td>
						<td>Second
						</td>
						<td>Third
						</td>
						<td>Fourth
						</td>
					</tr>
					
					<tr>
						<td>How
						</td>
						<td>Are
						</td>
						<td>You
						</td>
						<td>Doing?
						</td>
					</tr>
					
					<tr>
						<td>Here's
						</td>
						<td>a
						</td>
						<td>test
						</td>
						<td>table
						</td>
					</tr>
				</tbody>			
			</table>
		</div>
	</div>

	</center>
	</body>
</html>

Thanks!

  • Pamela
2

Just remove overflow: hidden from here:

#menu {
margin: 52px -350px 0px 0px;
float: right;
padding: 0;
width: 100%;
background: 
transparent;
[COLOR="#FF0000"]overflow: hidden;[/COLOR]
}
3

Wow! Such a SIMPLE fix!!! I was trying to do all sorts of complicated stuff!

Thanks so much, Ralph!

4

You’re welcome. :slight_smile: overflow:hidden certainly does what it says. It’s useful in a lot of circumstances, but can’t be used where a drop down is needed … and now you know why. :slight_smile: