Trying to add Dropdown to menu

Question

I'm trying to add a dropdown to a template i downloaded, but i'm not the greatest with CSS when it comes to existing templates.

HTML Code:

    <header>
  <div class="main">
    <div class="wrapper">
      <h1><a href="index.html">KB Customs</a></h1>
      <div class="fright">
      <div class="indent"> <span class="address">MI 49544</span> <span class="phone">Tel: 174</span> </div>
      </div>
    </div>
    <nav>
      <ul class="menu">
        <li><a class="active" href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="maintenance.html">Products </a></li>

          <!-- Insert 5 drop downs here ------------------------->

        <li><a href="repair.html">Gallery</a></li>
        <li><a href="price.html">FAQ & Prices</a></li>
        <li><a href="locations.html">Contact Us</a></li>
      </ul>
    </nav>
    <div class="slider-wrapper">
      <div class="slider">
        <ul class="items">
          <li> <img src="images/slider-img1.jpg" alt="" /> </li>
          <li> <img src="images/slider-img2.jpg" alt="" /> </li>
          <li> <img src="images/slider-img3.jpg" alt="" /> </li>
        </ul>
      </div>
      <a class="prev" href="#">prev</a> <a class="next" href="#">next</a> </div>
  </div>
</header>

CSS that is currently there:

/***** menu *****/
header nav {
width:100%;
height:52px;
background:url(../images/menu-bg.jpg) 0 0 no-repeat;
overflow:hidden;
}

#page1 header nav {
margin-bottom:28px;
}

.menu li {
float:left;
position:relative;
background:url(../images/menu-spacer.gif) left top no-repeat;
}

.menu > li:first-child {
background:none;
}

.menu li a {
display:inline-block;
font-size:18px;
line-height:25px;
padding:12px 28px 12px 29px;
color:#808080;
text-transform:capitalize;
}

 .menu > li:first-child > a {
text-indent:-999em;
background:url(../images/menu-home.png) center -25px no-repeat;
min-width:22px;
}

 .menu li a.active, .menu > li > a:hover {
color:#fff;
}

 .menu > li:first-child > a.active, .menu > li:first-child > a:hover {
background-position:center 15px;
 }

My main issue with css like this is that i don't know the difference between # and . also what > does.

Sorry if i sound like a noob, been away from CSS for a while.

EDIT: I appreciate the explanation of what all that means, but can someone help me in achieving my goal? :)

Answer 1

Let me take each one individually:

• #: selects elements by their id. For example, #myElement will select this div:

  <div id="myElement"></div>
  

  IDs are exclusive on a page, so it will only style the first element with that ID.

• .: selects all elements with the given class. For example .myClass will select all of the following elements.

  <div class="myClass">
     <h1 class="myClass">Header</p>
     <p class="myClass">Text</p>
  </div>
  

• > selects a direct child of the selector on the left. For example, this selector: .myClass > .mySubClass will select the div with text "Foo" but not the ones with text of "Bar" or "Baz":

  <div class="myClass">
      <div class="mySubClass">Foo</div>
      <div class="notMySubClass">
          <div class="mySubClass">Bar</div>
      </div>
  </div>
  <div class="mySubClass">Baz</div>
  

Answer to Question from Comments:

Q: What does .menu ul ul ul mean?

A: anywhere you see a space in CSS, that means "descendant of". In the (updated) example above for .myClass > .mySubClass, if I had used .myClass .mySubClass instead, it would have selected the div with text "Foo" and the div with text "Bar". Even though the div with "Bar" isn't a direct descendant of the div with class="myClass".

.menu ul ul ul would select all of the uls in the next example that I have noted with a comment:

<div class="menu">
    <ul>
        <li>
            <ul>
                <li>
                    <ul> <!-- will be selected -->
                        <li>Foo</li>
                        <li>Bar</li>
                        <li>
                            <ul> <!-- will be selected -->
                                <li>Foo</li>
                            </ul
                        </li>
                    </ul>
                </li>
                <li>
                    <ul> <!-- will be selected -->
                        <li>Foo</li>
                        <li>Bar</li>
                    </ul>
            </ul>
        </li>
    </ul>
</div>

Answer 2

CSS is not very difficult to understand. Just start reading tutorials or from W3Schools or this. Just for a start:

• #, ., > etc are all called Selectors. CSS selectors allow you to select and manipulate HTML elements. '#' refers to an id of any HTML element which is generally unique, Ex: page1 in your example. . refers to the class attribute.

• The class selector selects elements with a specific class attribute. Many elements can have the same class name and so they can all have the same styles. Example: .menu refers to a class name.

• > refers to the direct descendant selector i.e. any element which is direct descendant of any other element. Example .menu > li. In this case all the direct li children of .menu parent will have the style specified.

• :first-child, :last-child etc are called pseudo-class selectors and provide additional options for targeting a particular element. Example in your case: .menu > li:first-child will refer to the first li child of menu class.