Clever Geek Handbook

Trying to add Dropdown to the menu

I'm trying to add a dropdown menu to a downloadable template, but I'm not the best 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>

The CSS that currently exists:

/***** 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 problem with css like this is that I don't know the difference between # and. also what> does.

Sorry if I'm like a noob, moved away from CSS for a while.

EDIT: I appreciate an explanation of what this all means, but can anyone help me achieve my goal? :)

+3


source to share


2 answers


Let me take each one individually:

  • #

    : selects items by theirs id

    . For example #myElement

    will select this div:

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

    IDs are exclusive to the 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 items.

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

  • >

    selects the direct child of the selector on the left. For example, this selector: .myClass > .mySubClass

    will match div

    with the text "Foo" but not with the text "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 it mean .menu ul ul ul

?



A: Wherever you see a space in CSS it means "descendant". In the example (above) for .myClass > .mySubClass

, if I had used .myClass .mySubClass

instead, it would have selected div

with the text "Foo" and div

with the text "Bar". Even if div

s "Bar" is not a direct descendant of div

s class="myClass"

.

.menu ul ul ul

will select everything ul

in the following example, which I 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>
+2


source


CSS is not very hard to understand. Just start reading the tutorials or W3Schools or this . Just to get started:



  • #, ., >

    etc. all are called Selectors. CSS selectors allow you to select and manipulate HTML elements. The '#' refers to the id of any HTML element that is usually 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, so they can all have the same styles. Example: .menu

    refers to the class name.

  • >

    refers to a direct descendant selector, that is, any element that is a direct descendant of any other element. An example .menu > li

    . In this case, all direct children of the li

    parent .menu

    will have the specified style.

  • :first-child, :last-child

    etc. are called pseudo-class selectors and provide additional options for targeting a specific element. An example in your case: .menu > li:first-child

    will link to first li child of menu class

    .

+1


source






More articles:


All Articles