Attached is some css codes for a website. It has 3 parts: top-bar,
side-bar (on the left) and main-body. The top-bar has a mouseover menu
called top-menu implemented via ul:hover.
When the mouse pointer hovers over the top-menu, the bottom margin of
the top-bar expands downwards. How could I make the hover menu to stack
on top of the main-body, not expanding the bottom margin of the top-bar?
I believe it has something to do with absolute positioning, but I
couldn't figure it out.
--
.~. Might, Courage, Vision. In Linux We Trust.
/ v \ http://www.linux-sxs.org
/( _ )\ Linux 2.4.22-xfs
^ ^ 6:08pm up 3 days 8:35 load average: 1.06 1.03 1.00
<html><head>
<style type="text/css">
#sbr {
border:1px solid yellow;
position:absolute;
margin:0;
width:150px;
}
#sbr h5 {
padding:0;
margin:0;
background:black;
color:white;
}
#sbr p {
padding:0;
margin:0;
}
#topbar {
border:1px solid brown;
margin:0;
}
#topmnu {
margin:0 50px 0 50%;
}
#topmnu ul {
list-style:none;
display:none;
margin:0;
padding:0;
left:0;
top:100%;
width:100px;
border:1px solid red;
border-width:0 0 1px;
}
#topmnu li {
text-align:left;
border:1px solid green;
border-width:1px 1px 0 1px;
}
#topmnu:hover > ul {display:block;}
#topmnu li:hover > ul {display:block;}
#body {
margin:0 0 0 150px;
border-collapse:collapse;
border:1px solid blue;
background:white;
}
</style>
</head><body>
<div id="topbar">
<h1>TOP BAR</h1>
<div id="topmnu">
topmenu1 |
<ul>
<li>topmenu 1.1</li>
<li>topmenu 1.2</li>
</ul>
</div>
</div>
<div id="sbr">
<h5>sidemenu1</h5>
<p>menuitem1.1
<p>menuitem1.2
<br><br>
<h5>sidemenu2</h5>
<p>menuitem2.1
<p>menuitem2.2
</div>
<div id="body">
<p><b>topic one</b>
<p>first line of paragraph one
<p><b>topic two</b>
<p>first line of paragraph two
</div>
</body></html>
