尝试将下拉菜单添加到菜单

Question

我正在尝试向我下载的模板添加下拉菜单，但在涉及现有模板时，我并不是最擅长使用 CSS 的。

HTML 代码：

    <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：

/***** 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;
 }

我对这样的 css 的主要问题是我不知道 # 和 .还有 > 做什么。

对不起，如果我听起来像个菜鸟，我已经离开 CSS 一段时间了。

编辑：我很欣赏对这一切的解释，但有人可以帮助我实现我的目标吗？ :)

Answer 1

让我一个一个来看看：

• #：通过id 选择元素。比如#myElement会选择这个div：

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

  ID 在页面上是独占的，因此它只会设置具有该 ID 的第一个元素的样式。

• .：选择给定类的所有元素。例如.myClass 将选择以下所有元素。

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

• > 选择左侧选择器的直接子代。例如，这个选择器：.myClass > .mySubClass 将选择带有文本“Foo”的div，但不会选择带有“Bar”或“Baz”文本的那些：

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

对评论问题的回答：

问：.menu ul ul ul 是什么意思？

答：任何你在 CSS 中看到空格的地方，都表示“的后代”。在上面.myClass > .mySubClass 的（更新的）示例中，如果我改用.myClass .mySubClass，它将选择带有文本“Foo”的div 和带有文本“Bar”的div。即使带有“Bar”的div 不是带有class="myClass" 的div 的直系后代。

.menu ul ul ul 将选择下一个示例中的所有uls，我在注释中注明：

<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 不是很难理解。只需开始阅读教程或来自W3Schools 或this。 只是一个开始：

• #, ., > 等都称为选择器。 CSS 选择器允许您选择和操作 HTML 元素。 '#' 指的是通常唯一的任何 HTML 元素的 id，例如：page1 在您的示例中。 .指类属性。

• 类选择器选择具有特定类属性的元素。许多元素可以具有相同的类名，因此它们都可以具有相同的样式。示例：.menu 指的是类名。

• > 指直接后代选择器，即任何其他元素的直接后代元素。示例.menu > li。在这种情况下，.menu 父级的所有直接li 子级都将具有指定的样式。

• :first-child, :last-child 等被称为伪类选择器，并提供用于定位特定元素的附加选项。您的示例：.menu > li:first-child 将引用 first li child of menu class。