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

我尝试了很多不同的组合，无法弄明白。任何帮助，将不胜感激。

Answer 1

下拉菜单有很多例子。这是一个非常好的：

https://www.justsoftwaresolutions.co.uk/articles/css_menus.html

我把上面提到的文章中提到的一些代码放在JSFiddle上：

https://jsfiddle.net/57sgxwtj/

.navmenu,
.navmenu ul,
.navmenu li
{
  padding: 0px;
  margin: 0px;
}

添加下拉到现有模板

1 个答案: