Dropdown Menu Help Please

[Landslyde]

I made a navbar (I guess that's what it's called) for my website. Horizontal. It has the look I want and it works. But I have client-related pages that will fill their respective navbars up fast, making them crowded, probably even falling off the right side of the pages. So I need to make my existing format into a dropdown type. I tried to integrate tutorial code I found online into making this, with bad results. The navbar background color (#000) grew in height when a submenu item dropped down, instead of that menu item alone being #000. Would someone look at my code and get me headed in the right direction with the current style I have?

 

 

<div id="navigation">
        <ul>
              <li><a href="index.html" class="active"><span>Home</span></a></li>
              <li><a href="about.html"><span>About Us</span></a></li>
              <li><a href="services.html"><span>Services</span></a></li>
              <li><a href="register.php"><span>Register</span></a></li>
              <li><a href="client.php"><span>Client Area</span></a></li>
              <li><a href="contact.php"><span>Contact Us</span></a></li>
        </ul>
</div>

 

#navigation {

    font-family: ambleregular;

    font-size: 1.1em;

    float: left;

    width: 100%;

    background-color: #000;

}



#navigation ul {

    margin: 0;

    padding-left: 62px;

    text-transform: uppercase;

}



#navigation ul li {

    list-style-type: none;

    display: inline;

}



#navigation li a {

    display: block;

    float: left;

    padding: 5px 10px;

    color: #fff;

    text-decoration: none;

    border-right: 1px solid #fff;

}



#navigation li a.active {

    display: block;

    float: left;

    padding: 5px 10px;

    color: #fff;

    background: #696969;

    text-decoration: none;

    border-right: 1px solid #fff;

}



#navigation li a:hover {

    background: #2F4F4F;

}



#navigation li a:active {

    background: #C0C0C0;

}

That's what I'm using. Thanks for any and all help.

 

[beermantm]

Out of my snippets from years ago. You could try to adapt it to your needs.

 

 

 

HTML

<div id="nav">
<ul class="menu">

  <li><a href="#">Item 1</a><span class="down">▼</span>
  
     <ul class="sub">
      <li><a href="#">Item 1.1</a></li>
      <li><a href="#">Item 1.2</a></li>
      <li><a href="#">Item 1.3</a></li>
     </ul>
    
 </li>

  <li><a href="#">Item 2</a></li>
  
  <li><a href="#">Item 3</a><span class="down">▼</span>
     <ul class="sub">
      <li><a href="#">Item 3.1</a><span class="right">▶</span>
          <ul class="sub2">
           <li><a href="#">Item 3.1.1</a></li>
           <li><a href="#">Item 3.1.2</a></li>
          </ul>
  </li>

      <li><a href="#">Item 3.2</a></li>
      <li><a href="#">Item 3.3</a></li>
    </ul>
  
  </li>
  <li><a href="#">Item 4</a></li>
</ul>


</div>

CSS

<style type="text/css">
* {
	margin:0;
	padding:0;}

#nav {
	width: 960px;
	margin: auto;
	height: 35px;
	position: relative;
	
	}

ul.menu {
	position: relative;
	top: 0px;
	left:0px;
	list-style:none;
	
	
	
}

ul.menu li {
	height: 35px;
	position: relative;
	float:left;
	min-width:125px;
	background-color: #7d2a35;
	text-align:center;
	display: inline-block;
	
}
ul.menu li a {
	display:block;
	height: 35px;
	line-height:35px;
    color:#fff;
	text-decoration:none;
}


ul.menu li a:hover {
	height: 35px;
	min-width:125px;
	background-color:#fff;
	color: #000;
	
	}

ul.sub  {
	position: absolute;
	left:0px;
	top:35px;
	display:none;
	
	}
	
ul.sub li {
	
	list-style:none;
	width:125px;
	
	text-align:left;
	}
	
ul.sub li a {
	text-indent: 5px;
}

ul.sub2 {
	position: absolute;
	display:none;
	left:125px;
	top:0px;
	
	}
	
ul.sub2 li a {
	
}

ul.menu li:hover .sub {display:block;}
ul.menu ul.sub li:hover .sub2 {display:block;}
.down {
	position:absolute;
	font-size:11px;
	top:20px;
	right: 1px;}
.right {
	position:absolute;
	font-size:11px;
	top:20px;
	right: 4px;}

</style>

[Landslyde]

beermantm:

 

Thanks. I'll take a look at what you offered and see what I can come up with. Much appreciated.