使用<div>和<ul> / <li> </li> </ul> </div>创建子菜单

时间：2015-02-27 22:13:51

标签： html css

所以目前我的菜单栏里面有一些带有div的锚元素，我想将其中的一些放到子菜单中，我不知道怎样为了让它工作，这是我的HTML：

<ul>
<div id="HeaderContainer">
<div id="title"><a href="/"><img src="images/title_g-u5076.png" alt=""></a></div>
<li><a href="/" class="Home"><div id="Home"><div id="HomeT">HOME</div></div></a></li>
<li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a></li>
<li><a href="/" class="Forum"><div id="Forum"><div id="ForumT">FORUM</div></div></a></li>
<li><a href="/" class="Blog"><div id="Blog"><div id="BlogT">BLOG</div></div></a></li>
<li><a href="/" class="Guilds"><div id="Guilds"><div id="GuildsT">GUILDS</div>  </div></a></li>
<li><a href="/" class="Play"><div id="Play"><div id="PlayT">PLAY NOW</div></div>       </a></li>
</div>
</ul>

CSS有很多代码：

      #HeaderContainer {
      z-index: 3;
      position: absolute;
      top: 28px;
      left: 0px;
      width: 100%;
      height: 65px;
      margin: 0;
      background: url(../images/tri-button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
 }
  #title {
      z-index: 4;
      position: relative;
      width: 252px;
      height: 70px;
      margin: 0 auto;
      top:-10px;
      right: 383px;
  }

  #Home {
      z-index: 4;
      position: relative;
      width: 96px;
      height: 65px;
      margin: 0 auto;
      right: 204px;
      top:-70px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

  #Home:hover {
      width: 96px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

  #Home a{
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 66px;
      vertical-align: middle;
  }

   #HomeT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

    a.Home { 
      text-decoration: none; 
    }

  #Guides {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -135px;
      right: 89px;
      width: 133px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Guides:hover {
      width: 133px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

  #GuidesT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Guides { 
      text-decoration: none; 
  }     

  #Forum {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -200px;
      left: 33px;
      width: 114px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
 }

 #Forum:hover {
      width: 114px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

   #ForumT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Forum {  
      text-decoration: none;
  }


 #Blog {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -265px;
      left: 141px;
      width: 102px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Blog:hover {
      width: 102px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

 #BlogT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

 a.Blog { 
       text-decoration: none; 
    }

 #Guilds {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -330px;
      left: 262px;
      width: 138px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Guilds:hover {
      width: 138px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

   #GuildsT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Guilds { 
     text-decoration: none; 
  }

   #Play {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      width: 168px;
      height: 65px;
      top: -395px;
      left: 415px;
      background: url(../images/button%20texture%20bright.jpg) ;
      background-size: cover; 
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

   #Play:hover {
      width: 168px;
      background: url(../images/button%20overlay%20c.png) no-repeat center, url(../images/button%20texture%20bright.jpg) no-repeat top left;
      background-size: cover;
  }

   #PlayT {
     text-decoration: none;
     font-family: "Cinzel Bold";
     font-size: 18px;
     font-weight: bold;
     color: #000000;
     line-height: 64px;
     vertical-align: middle;
 }

     a.Play { 
       text-decoration: none;
     }

1 个答案:

答案 0 :(得分：1)

这里兄弟......希望这会有所帮助.. 

ul li {
    position:relative;
    float: left;
    list-style:none;
}
ul li a {
    padding: 10px;
    display:block;
    background:black;
    color:#fff;
}
ul ul ul {
    left: 100%!important;
    top: 0;
}
ul ul, ul li:hover ul ul, ul ul li:hover ul ul, ul ul ul li:hover ul ul {
    display:none;
    position:absolute;
    left:0;
    padding: 0;
}
ul li:hover ul, ul ul li:hover ul, ul ul ul li:hover ul, ul ul ul ul li:hover ul {
    display:block;
}
ul ul li {
    width:100%;
}
<ul>
    <div id="HeaderContainer">
        <li><a href="/" class="Home"><div id="Home"><div id="HomeT">HOME</div></div></a>

            <ul>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                    <ul>
                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                            <ul>
                                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                </li>
                                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                </li>
                                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                    <ul>
                                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                        </li>
                                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                        </li>
                                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                        </li>
                        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                        </li>
                    </ul>
                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
            </ul>
        </li>
        <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

            <ul>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
                <li><a href="/" class="Guides"><div id="Guides"><div id="GuidesT">GUIDES</div></div></a>

                </li>
            </ul>
        </li>
        <li><a href="/" class="Forum"><div id="Forum"><div id="ForumT">FORUM</div></div></a>

        </li>
        <li><a href="/" class="Blog"><div id="Blog"><div id="BlogT">BLOG</div></div></a>

        </li>
        <li><a href="/" class="Guilds"><div id="Guilds"><div id="GuildsT">GUILDS</div>  </div></a>

        </li>
        <li><a href="/" class="Play"><div id="Play"><div id="PlayT">PLAY NOW</div></div>       </a>

        </li>
    </div>
</ul>

相关问题
最新问题