Member Avatar for simonfoley

Hi there

I'm a bit ring-rusty with HTML / CSS . . . I found a template I really liked online when looking for one for my cousins business. There is a nav bar at the top of the screen, and I wanted to add a drop-down menu to one of the entries. Now, forgive me, but my mind has gone a complete blank (and I've lent my good HTML / CSS reference book to a friend!!)...can anyone help me out here?

Immediately under the nav bar is a picture, but I wanted (if possible) to retain the background etc of the original nav bar for the drop down, which would have about 6 or 7 option on it...

Heres the relevant section of the HTML:

<div id="nav">
		  <div id="nav-menu-left"></div>
		  <div id="nav-menu">
		  <!-- start of navigation -->
		    <ul>
			  <li><a href="index.html">Home</a></li>
			  <li><a href="about.html">About</a></li>
			  <li><a href="services.html">Our Services</a></li>
			  <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="faq.html">FAQ</a></li>
			  <li><a href="contact.html" style="background-image: none;">Contact Us</a></li>
			</ul>
			<!-- end navigation -->

And here's the accompanying CSS:

/* TOP NAVIGATION BAR */
#nav {
  width:610px;
  float:left;
  margin-top:136px;
}

#nav-menu-left {
  background:url(images/navbar-left.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu-right {
  background:url(images/navbar-right.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu {
  background:url(images/navbar-bg.gif) repeat-x top left;
  height:55px;
  width:556px;
  float: left;
}

#nav-menu ul {
  list-style:none;
}
  
#nav-menu ul a {
  background-image: url(images/navbar-divider.gif);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 12px;
  padding-left: 12px;
  padding-top:5px;
  display: block;
  line-height: 50px;
  text-decoration: none;
  text-shadow:1px 1px 1px #000;
  font-family: Arial, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #FFF;
}
	
#nav-menu ul a:hover {
  text-decoration:underline;
  text-shadow:0px 0px 4px #FF0000;
}
 
#nav-menu li {
  float:left;
}



/* END NAVIGATION BAR */

Many thanks in anticipation of any help. I really like the template so wanted to try and adapt it rather than start afresh!

  • 2 Contributors
  • 2 Replies
  • 159 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by elneco

Recommended Answers

All 2 Replies

Member Avatar for elneco

something like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="charset=UTF-8" />
<title>f_atencia</title>

<style>
/* TOP NAVIGATION BAR */


#nav-menu-left {
  background:url(images/navbar-left.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu-right {
  background:url(images/navbar-right.gif) no-repeat top left;
  width:27px;
  height:55px;
  float: left;
}
#nav-menu {
  background:url(images/navbar-bg.gif) repeat-x top left;
  height:55px;
  width:610px;
  float: left;
  background-color:white;
}

#nav-menu ul {
  list-style:none;
}
  
#nav-menu ul a {
  background-image: url(images/navbar-divider.gif);
  background-repeat: no-repeat;
  background-position: right;
  padding-right: 12px;
  padding-left: 12px;
  padding-top:5px;
  display: block;
  line-height: 50px;
  text-decoration: none;
  text-shadow:1px 1px 1px #000;
  font-family: Arial, "Times New Roman", Times, serif;
  font-size: 18px;
  color: #FFF;
}
	
#nav-menu ul a:hover {
  text-decoration:underline;
  text-shadow:0px 0px 4px #FF0000;
}
 
#nav-menu li {
  float:left;
}

/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
	background: none;
	border: none;
	color: #666;

}
#nav ul a:hover {
	background: #eee url(img/gradient.png) repeat-x 0 -100px !important;
	color: #666 !important;
;
}

/* dropdown */
#nav li:hover > ul {
	display: block;
}

/* level 2 list */
#nav ul {
	display: none;

	margin: 0;
	padding: 0;
	width: 120px;
	position: absolute;
	top: 65px;
	left: 200px;
	background: #ddd url(img/gradient.png) repeat-x 0 0;
	border: solid 1px #b4b4b4;

}
#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}

#nav ul a {
	font-weight: normal;
	text-shadow: 0 1px 0 #fff;
}


</style>

</head>

<body>




		  <div id="nav-menu">
		  <!-- start of navigation -->
		    <ul id="nav">
			  <li><a href="index.html">Home</a></li>
			  <li><a href="about.html">About</a></li>
			  <li><a href="services.html">Our Services</a>
              		<ul>
              			<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>
              </li>
			  <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="faq.html">FAQ</a></li>
			  <li><a href="contact.html">Contact Us</a></li>
			</ul>
			<!-- end navigation -->
           </div>


</body>
</html>
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.