试图添加下拉菜单

我想添加一个下拉到我下载的模板，但我不是最大的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主要问题是，我不知道之间＃和差异。还有什么>做。

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

编辑：我很欣赏所有这些意思的解释，但有人可以帮助我实现我的目标吗？ :)

来源

2015-07-11 user1574685

小提琴的链接，如果有的话？ – Varun

不幸的是我没有一个......我试图实现我的网站生活......但我的路由器不让我转发端口 – user1574685

@ user1574685，你是否正在制作一个下拉菜单功能？ –

让我把每一个单独：

#：通过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将选择div文本“富”，而不是那些与“酒吧”或“巴兹”的文本：

<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不是div与class="myClass"的直接后代。

.menu ul ul ul会选择所有ul S IN下面的例子中，我已经有评论指出的：

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

来源

2015-07-11 18:51:18

当你有这样的东西时，怎么办：.menu ul ul ul – user1574685

@ user1574685，请参阅我的最新更新。 –

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。

来源

2015-07-11 18:52:46

试图添加下拉菜单

回答

相关问题