How to create a Menu in a list with position absolute

HTML & CSS
1

Hi,

I am trying to create a menu with one of the list item to be position absolute. Here is the code

HTML:

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li> <div id=“account_summary”>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul></div>
</li>
</ul>

CSS:
div#account_summary { background:#e8f9e9; border:1px solid #d3e4d3; border-top:none; position:absolute; top:0; right:0; padding:10px 4px 10px 56px; width:148px; font-size:12px; font-style:italic; border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; }
div#account_summary p { margin-bottom:2px; color:#555; }
div#account_summary a { color:#555; text-decoration:underline; }
div#account_summary a:hover,
div#account_summary a:focus { color:#000; }
div#account_summary img { position:absolute; top:9px; left:7px; }
div#account_summary p.action { margin:0; font-family:Verdana,sans-serif; font-size:9px; font-weight:bold; font-style:normal; text-transform:uppercase; color:#999; }
div#account_summary p.action a { color:#999; text-decoration:none; }
div#account_summary p.action a:hover,
div#account_summary p.action a:focus { color:#666; }

In the second list items i need a list where it overflows the parent list…

I need a list item under <ul> overflowing without changing the height of the <ul>

Pictorial representation can be found here: Imagebin - A place to slap up your images.

You can clearly see the border bottom, so i need the one of list item to be out of the border bottom but still act as a list item…

Can anybody please help…

2

Hi, welcome to Sitepoint:)

You could use negative margins if you just want to overlap the border but still retain the flow.

This is just rough but something like this should work.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
ul {
	list-style:none;
	margin:0;
	padding:15px 0 1px;
	border-top:1px solid #999;
	border-bottom:10px solid #000;
	float:left;
	width:100%;
	line-height:1.0;
}
ul ul {
	border:none;
	padding:0;
	width:auto
}
li {
	float:left;
	margin-right:20px;
}
div#account_summary {
	background:#e8f9e9;
	border:1px solid #d3e4d3;
	border-top:none;
	padding:10px 4px 10px 56px;
	width:148px;
	font-size:12px;
	font-style:italic;
	border-bottom-left-radius:5px;
	-moz-border-radius-bottomleft:5px;
	-webkit-border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	position:relative;
	height:30px;
	margin:-15px 0 -25px;
}
div#account_summary p {
	margin-bottom:2px;
	color:#555;
}
div#account_summary a {
	color:#555;
	text-decoration:underline;
}
div#account_summary a:hover, div#account_summary a:focus {
	color:#000;
}
div#account_summary img {
	position:absolute;
	top:9px;
	left:7px;
}
div#account_summary p.action {
	margin:0;
	font-family:Verdana, sans-serif;
	font-size:9px;
	font-weight:bold;
	font-style:normal;
	text-transform:uppercase;
	color:#999;
}
div#account_summary p.action a {
	color:#999;
	text-decoration:none;
}
div#account_summary p.action a:hover, div#account_summary p.action a:focus {
	color:#666;
}
</style>
</head>
<body>
<h1>testing</h1>
<ul>
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>
		<div id="account_summary">
			<ul>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
			</ul>
		</div>
	</li>
</ul>
</body>
</html>
3

Hi paul,

Thanks a lot for the help… I was working on that last night, and figured it out…

Thanks

:slight_smile: