上拉框

2013-11-08

下拉框!DOCTYPEhtmlheadtitle new document /titlemeta namecontent charsetutf-8styl

下拉框
<!DOCTYPE>
<html>
<head>
<title> new document </title>
<meta name="content" charset="utf-8">
<style type="text/css">

.fam-drop-menu * {
    margin: 0;
    padding: 0;

}
.fam-drop-menu a {
    text-indent: 20px;
    text-decoration: none;
    line-height: 35px;
    line-height: 35px;
    color: #000;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 10pt;
    font-style: normal;
}
.fam-drop-menu ul {
    list-style: none;
}
.fam-drop-menu > ul > li {
    float: left;
    display: inline-block;
    width: 150px;
}
.fam-drop-menu ul ul li {
    float: left;
    display: block;
    width: 100%;
}
.fam-drop-menu ul ul {
    border: 1px solid #aaa;
    background: #f1f1f1;
    -webkit-box-shadow: 1px 1px 5px #AAA;
    -moz-box-shadow: 1px 1px 5px #AAA;
    box-shadow: 1px 1px 5px #AAA;
    z-index: 9999;
}
.fam-drop-menu ul ul ul {
    position: absolute;
    float: left;
    top: 35px;
    left: -4px;
}
.fam-drop-menu ul li > ul {
    width: 150px;
    left: 151px;
    _left: 0;
    top: 0;
    display: none;
}

.fam-drop-menu li a:hover {
    color: #008df2;
}

.fam-drop-menu ul li a:hover {
    background-color: #008df2;
    color: #fff;
}
.fam-drop-menu ul ul li {
    font-weight: normal;
}
.fam-drop-menu ul ul li:hover {
    background-color: #9acd32;
    font-weight: bold;
}

.fam-drop-menu ul li:hover > ul {
    display: block;
}
.fam-drop-menu ul ul li {
    position: relative;
    float: left;
}

.fam-drop-menu ul li a {
    display: block;
    background: transparent;
    border-bottom: 1px solid #e5e5e5;
    _float: left;
}

</style>
</head>

<body>
<div class="fam-drop-menu">
    <ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Projects +</a>
    <ul>
      <li><a href="#">Websites +</a>
        <ul>
          <li><a href="#">Website 1</a></li>

          <li><a href="#">Website 2</a></li>
          <li><a href="#">Website 3</a></li>
          <li><a href="#">Website 4</a></li>
        </ul>
      </li>
      <li><a href="#">Website design</a></li>
      <li><a href="#">Javascript</a></li>

    </ul>
</li>
<li><a href="#">Learn +</a>
    <ul>
      <li><a href="#">Javascript +</a>
        <ul>
          <li><a href="#">Mootools +</a>
                <ul>
                    <li><a href="#">Official +</a>
                            <ul>
                              <li><a href="#">Github Core</a></li>

                              <li><a href="#">Github More</a></li>
                              <li><a href="#">Lighthouse</a></li>
                              <li><a href="#">Mootorial</a></li>
                              <li><a href="#">Mootools Blog +</a>
                                  <ul>
                                      <li><a href="#">sub</a></li>

                                      <li><a href="#">sub</a></li>
                                      <li><a href="#">sub</a></li>
                                      <li><a href="#">sub +</a>
                                          <ul>
                                          <li><a href="#">sub sub</a></li>
                                          <li><a href="#">sub sub</a></li>
                                          <li><a href="#">sub sub</a></li>
                                        </ul>
                                      </li>
                                   </ul>
                              </li>
                            </ul>
                        </li>

                  <li><a href="#">eSteak.net</a></li>
                  <li><a href="#">Mooforum.net</a></li>
                  <li><a href="#">DavidWalsh.name</a></li>
                </ul>
            </li>

          <li><a href="#">jQuery</a></li>
          <li><a href="#">Quirksmode.org</a></li>
          <li><a href="#">Ajaxian</a></li>
          <li><a href="#">W3School</a></li>
        </ul>
      </li>
      <li><a href="#">CSS +</a>

        <ul>
          <li><a href="#">W3Scool</a></li>
          <li><a href="#">Ajaxian</a></li>
          <li><a href="#">A List Apart</a></li>
        </ul>
      </li>
    </ul>

</li>
<li><a href="#">Info</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

热点排行

Web前端

上拉框