Sub-Menu Custom Positions

HTML & CSS
1

Hi all,

I’m trying to get the sub-menu items on my menu to have custom positions. I’m trying to make them appear as such:


O O O
 O O
  O

However, the sub-menu items are refusing to move at all and just stay in the same place. I tried adding new classes as containers, changing the menu variables, and playing with other attributes, but all to no avail. I can’t even get the sub-menu items to move using firebug!

I thought this was a simple matter and that I would just define one class for each sub-menu item and would be able to move the sub-menu items wherever I wanted to, but it turned out not to be the case.

As a sidenote, I should mention that the reason I added a class for “#menu span” and started using spans on the sub-menu is because I had previously been using “line-height: 91px;” & “vertical-align: middle;” to vertically center the text, but when I tried to change the sub-menu positions, this vertical aligning stopped working (it made sub-menu items that were more than one word run into the next sub-menu item via overlapping!), so I started using spans.

Here is the fiddle.

Or if you prefer, the HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<meta http-equiv="content-language" content="en-US">
		<meta name="language" content="english">
		<meta name="author" content="Pamela">
		<link type="text/css" href="style.css" rel="stylesheet" media="all">

		<title>Red, White & Blue</title>
		<meta name="description" content="Description of Red, White & Blue">
		<meta name="keywords" content="red, white, blue, stars, stripes">

	</head>
	<body>
	<center>
	<div id="page">
	<div id="menu-container">
		<ul id="menu">
			<li class="red"><a href="red.php">Red</a></li>
			<li class="white"><a href="white.php">White</a>
				<ul>
				<li><a href="alaska.php" class="al"><span>Alaska</span></a></li>
				<li><a href="ri.php" class="ri"><span>Rhode Island</span></a></li>
				<li><a href="fl.php" class="fl"><span>Florida</span></a></li>
				<li><a href="dc.php" class="dc"><span>District of Columbia Downtown</span></a></li>
				<li><a href="nyc.php" class="nyc"><span>New York City</span></a></li>
				<li><a href="la.php" class="la"><span>Los Angeles</span></a></li>
				</ul>
			</li>
			<li class="blue"><a href="blue.php">Blue</a></li>
			<li class="stars"><a href="stars.php">Stars</a></li>
			<li class="stripes"><a href="stripes.php">Stripes</a></li>
		</ul>
	</div>
		<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>

And the CSS:

* {
	margin: 0;
	padding: 0;
}
html, body {
	background: blue;
	font: 13px/1.231 arial,helvetica,clean,sans-serif
}

#page
{
	overflow: hidden;
	width:1000px;
	height:840px;
	background: white;
	margin: 0;
	padding: 0;
}

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

.scroll-pane
{
	width: 360px;
	height: 400px;
	overflow: auto;
	margin: 61px 95px 0px 0px;
	padding: 0;
	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: 0;

	-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-container {
    margin: 45px -340px 0px 0px;
    float:right;
    padding: 0;
    width:100%;
    background: transparent;
}

#menu, #menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#menu > li {
	float: left;
	position: relative;
	margin-left: 10px;
}
#menu > li a {
	text-indent: -9999px;
	display: block;
	width: 116px;
	height: 128px;
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
}
/*sub-menu*/
#menu ul li a {
	text-indent: 0;
	font-family: Impact, Helvetica, sans-serif;
	display: block;
	font-size: 18px;
	padding: 0;
	margin: 0 0 6px 50px;
	background: blue;
	color: #fff;
	text-decoration: none;
	text-align: center;
	/*margin-bottom: 6px;*/
    -moz-border-radius:50%;
    -khtml-border-radius:50%;
    -webkit-border-radius:50%;
    border-radius:50%;
	/*line-height: 91px;*/
    vertical-align: middle;
	width: 91px;
    height: 91px;
	opacity: 1 !important;
	-webkit-box-shadow: 0 0 7px rgba(255,0,0,.6);
	-moz-box-shadow: 0 0 7px rgba(255,0,0,.6);
	box-shadow: 0 0 7px rgba(255,0,0,.6);
}
#menu ul li a:hover {
	-webkit-box-shadow: 0 0 7px rgba(255,0,0,.6), inset 0 0 7px rgba(255,0,0,1);
	-moz-box-shadow: 0 0 7px rgba(255,0,0,.6), inset 0 0 7px rgba(255,0,0,1);
	box-shadow: 0 0 7px rgba(255,0,0,.6), inset 0 0 7px rgba(255,0,0,1);
}
#menu span {
	margin-top: 25px;
	text-align: center;
	display: inline-block;
	padding: 0;
    width: 91px;
    height: 91px;
    overflow: hidden;
}
#menu.al {
	position: absolute;
	margin: 0 0 6px -150px;
	left: -100px;
	top: 73px;
}
#menu.ri {
	position: absolute;
	margin: 0 0 6px -150px;
	left: 0px;
	top: 73px;
}
#menu.fl {
	position: absolute;
	margin: 0 0 6px -150px;
	left: 100px;
	top: 173px;
}
#menu.dc {
	position: absolute;
	margin: 0 0 6px -150px;
	left: -50px;
	top: 73px;
}
#menu.nyc {
	position: absolute;
	margin: 0 0 6px -150px;
	left: 50px;
	top: 73px;
}
#menu.la {
	position: absolute;
	margin: 0 0 6px -150px;
	left: 0px;
	top: 73px;
}

#menu:hover > li a, #menu li:hover ul a {
	opacity: .5;
}
#menu > li:hover a, #menu li ul a:hover {
	opacity: 1;
}
#menu ul li a:hover {
	background: blue;
	color: #fff;
	text-align: center;
}
#menu ul {
	position: absolute;
	top: 120px;
	left: -9999em;
	padding: 10px;
	z-index: 90;
}
#menu li:hover ul {
	left: -47px;
}

#menu .red > a {
	background: url('http://2.bp.blogspot.com/-akO3TOU8fuE/TnA15HfGHZI/AAAAAAAAB6M/tG2g7C1nsRs/s200/imagesCA91Q61X.jpg');
}
#menu .red:hover > a {
	background: url('http://lh5.ggpht.com/-0msPBzQIjAw/S0jRxgi201I/AAAAAAAAAes/Oaa0dPQSI8s/s128/RedStripes.jpg');
}
 
#menu .white > a {
	background: url('http://membership.uhms.org/resource/resmgr/images/la_foto.jpg');
}
#menu .white:hover > a {
	background: url('http://img.tfd.com/wn/47/64422-area.jpg');
}
 
#menu .blue > a {
	background: url('http://atastypixel.com/blog/wp-content/uploads/2009/02/200902081924.jpg');
}
#menu .blue:hover > a {
	background: url('http://static.wix.com/media/ead4a9_4c5478dc902932c7740f200ec157f18d.png_128');
}
 
#menu .stars > a {
	background: url('http://1.bp.blogspot.com/_gJ4222TxWAs/SqjtlOKWkQI/AAAAAAAAATc/6bNr4s_jeac/s320/vote.jpg');
}
#menu .stars:hover > a {
	background: url('http://www.clipartpal.com/_thumbs/frank3_008658_tns.png');
}
 
#menu .stripes > a {
	background: url('https://secure.10foldsolutions.com/ecommerce/images/9/products/29197.jpg');
}
#menu .stripes:hover > a {
	background: url('http://www.clipartpal.com/_thumbs/024/christmas/christmas_024_02_tns.png');
}

I would greatly appreciate if someone could please point me in the right direction.

Thanks!

  • Pam
2

You can move elements around by giving them position: absolute and then settings like left: 20px, top: 40px etc. The key is to make sure that the element they are being placed in relation to has position: relative on it—which you do have here.

Be careful about getting too fancy with web design, though. It can easily make like harder for visitors, so proceed with caution. :slight_smile:

3

Thanks Ralph! I did not know that about having to put an absolute-positioned element within a relative-positioned one.

I’ve removed everything except the absolute position and the left/top position values from all the sub-menu classes, but it’s still not moving the sub-menus at all! Here’s the updated fiddle.

I’m still not able to figure out what is causing this problem. Is it possible that I may have a missing a bracket someplace which is causing this problem?

Thanks!

4

What I meant was something like this:


#menu li li {position: absolute; left: 80px;}

… just as an example.

5

Thanks so much, Ralph! It’s working very nicely now!

Thanks!