Member Avatar for darren2005

Hi,

I was wondering if anyone could help me make my existing CSS horizontal menu drop down so when I hover over the main title it drops to submenus?

CSS:

#tray {position:relative; width:960px; height:45px; background:url("../design/tray.gif") 0 0 no-repeat; overflow:hidden; font:bold 90%/1 "tahoma",sans-serif;}
    #tray ul {margin:0 20px; list-style:none;}
    #tray li {display:inline;}
    #tray li a {display:block; float:left; padding:17px 20px 17px 18px; background:url("../design/tray-separator.gif") 100% 0 no-repeat; text-decoration:none;}
    #tray li a:hover {background:url("../design/tray-hover.gif");}
    #tray li#tray-active a {background:url("../design/tray-active.gif");}

HTML:

<div id="tray">
    <ul>
      <li id="tray-active"><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
	  <li><a href="#">LINK</a></li>
    </ul>

Thanks!

  • 3 Contributors
  • 4 Replies
  • 171 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by darren2005

Recommended Answers

All 4 Replies

Member Avatar for bharanidharanit

Hi try this,

<!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" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title></title>
		<style type="text/css">

html,body {
	margin: 0;
	padding: 0;
}

body {
	background: #CCC;
	font-family: 'Arial', sans-serif;
	font-size: 9pt;
	width: 100%;
	
}
#content{
	height: 500px;
}
#hovermenu *  { padding:0px; margin: 0px; font: 1em arial; }

#hovermenu {  
	position: absolute; 
	z-index: 99; 
	margin: -5px auto; 
	float: left; 
	line-height: 20px; 
	text-align:  center;
	}

#hovermenu a { 
	display: block; 
 	background: #005277; 
 	text-decoration: none; 
 	padding: 0px;
 	padding-top: 5px;
 	color: #CCCCCC;
 }
#hovermenu a:hover { 
	font-weight: bold;
	font-size: 14px;
	}


#hovermenu ul li, #hovermenu ul li ul li  { 
	width: 100px; 
	list-style-type:none; 
	}

#hovermenu ul li {
	 float: left; 
	 width: 100px;
	 }

#hovermenu ul li ul, #hovermenu:hover ul li ul, #hovermenu:hover ul li:hover ul li ul{ 
	display:none;
	list-style-type:none; 
	width: 100px;
	}

#hovermenu:hover ul, #hovermenu:hover ul li:hover ul, #hovermenu:hover ul li:hover ul li:hover ul { 
	display:block; 
	}

#hovermenu:hover ul li:hover ul li:hover ul { 
	position: absolute;
	margin-left: 120px;
	margin-top: -20px;
	}

#document {
	overflow: hidden;
	position: relative;
	width: 100%;
}

#header {
	background: #005277;
	height: 75px;
}

#header h1 {
	line-height: 60px;
	margin: 0;
	padding: 0;
}

		</style>
	</head>
	<body>
		<div id="document">
		<div id="header">
		<h1 id="colorwhite">SNW</h1>
			<div id="hovermenu">
				<ul>
					<li><a href="">Menu1</a>
						<ul>
							<li><a href="">Submenu1</a></li>
							<li><a href="">Submenu2</a></li>
						</ul>
					</li>
					<li><a href="">Menu2</a>
						<ul>
							<li><a href="">Submenu1</a></li>
							<li><a href="">Submenu2</a></li>
						</ul>
					</li>
					<li><a href="">Menu3</a></li>
					<li><a href="">Menu4</a></li>
					<li><a href="">Menu5</a></li>
				</ul>
			</div>
			</div>
			<div id="content">
				
			</div>
			<p id="footer">
			
			</p>
		</div>
	</body>
</html>
Member Avatar for darren2005

Hi - Thank you for you reply and example but it was not what I was looking for.

I basically want to keep my existing menu and CSS configuration but modify it to a drop down menu. Not quite sure on how to do that?

Member Avatar for darren2005

Thanks! I have now sorted it out myself...thanks again

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.