我正在尝试向我下载的模板添加下拉菜单,但就现有模板而言,我并不是最擅长 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 一段时间了。
编辑:我很欣赏对这一切含义的解释,但有人可以帮助我实现我的目标吗? :)
最佳答案
让我逐一分析:
#
:通过元素的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
:<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
是什么意思?
A: 在 CSS 中任何地方看到空格,都表示“的后代”。在上面的(更新的).myClass > .mySubClass
示例中,如果我使用了 .myClass .mySubClass
,它会选择 div
文本为“Foo”,div
文本为“Bar”。尽管带有“Bar”的 div
不是带有 class="myClass"
的 div
的直接后代。
.menu ul ul ul
将选择下一个示例中的所有 ul
,我已在注释中注明:
<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>
关于jquery - 尝试将下拉菜单添加到菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31360571/