Drop-down/pop out menu bar html/css

**miocene** · 05-03-2009 06:03 PM

OK, I'm trying to make a simple menu bar that when I hover over a menu item, a sub-menu pops out the side.
I've got very close to achieving it except when the sub-menu pops out it pushes the main menu items down beneath it.

This is what I have got so far:
http://i19.photobucket.com/albums/b1...ne/menu2-1.png

(Orange is where the cursor is)

I used this HTML code:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<!-- #BeginTemplate "template.dwt" -->

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<link href="sitestyle.css" rel="stylesheet" type="text/css"/>

<!-- #BeginEditable "doctitle" -->
<title>Site Title</title>
<!-- #EndEditable -->
</head>

<body>

<div id="container">

<div id="logo">
<h1>Site Title</h1>
</div>

   <ul id="navi">

      <li class="mlink"><a href="#">Item</a></li>
      <li class="mlink"><a href="#">Multiple I</a>
      	<ul>

      	<li><a href="#">Item 1</a></li>
      	<li><a href="#">Item 2</a></li>
      	</ul></li>
      <li class="mlink"><a href="#">Item</a></li>
      <li class="mlink"><a href="#">Item</a></li>

  </ul>

<!-- #BeginEditable "main" -->
<div id="main">
  <h2>Page Title</h2>
  
  <p>This is the first bit of content</p>
	<p>more content&nbsp;</p>
	<p>even more content.....</p>


</div>
<!-- #EndEditable -->

</div>


</body>

<!-- #EndTemplate -->

</html>

And this CSS:

Code:

/*Style sheet by hg*/

div {
padding: 3px;
}

div#container {
width: 75%;
margin: 0px auto;
padding: 5px;
}

div#logo {
height: 10%;
background-color: #B1B1B1;
border-width: 1px 1px 1px;
border-style: solid solid solid;
border-color: #545454;


}

ul#navi, ul#navi ul {
    width: 150px;
    float: left;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 4px;
    margin-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    background-color: #C0C0C0;
    padding-top: 0px;
    list-style-type: none;
    left: 0px;
    right: 0px;
}

ul#navi li {
    width:149px;
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #545454;
    padding-top: 3px;
    padding-bottom: 3px;
    height: 23px;

}

ul#navi a{
	white-space : nowrap;
	z-index : 2;

}

li a{
    padding:3px 4px 3px 4px;
    text-decoration: none;
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    font-size: 15px;

}

ul#navi ul {
	float: left;
	position: relative;
	top: -24px;
	left: 149px;
	display: none;
	border-top:1px #545454 solid;
}

ul#navi a:hover{
	text-decoration:underline;
}
ul#navi li:hover{
    background-color:orange;
}

ul#navi li:hover > ul{
	
	display: block;
}



.mlink{
text-align:center;
}
    

div#main {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #545454;
}


div#main p, div#main h2, div h1
{
    margin-left: 4px;
    margin-right: 4px;
}
h1 {
    font-family: Georgia, serif;
    font-size: xx-large;
    color: #666666;
}
h2 {
    text-decoration: none;
    font-family: Georgia, serif;
    font-size: x-large;
    color: #000066;
}
p {
    font-family: "trebuchet ms", verdana, arial, sans-serif;
    font-size: 14px;

}

Anyone know what I need to add/change to the code to make it work proper?

**Fang** · 05-04-2009 02:46 AM

http://htmldog.com/articles/suckerfish/dropdowns/

**miocene** · 05-05-2009 10:26 AM

That is a very helpful link, thanks for the reply..

Thread: Drop-down/pop out menu bar html/css

Thread Tools

Display

Drop-down/pop out menu bar html/css

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions