Question

嗨，我是新手并且正在学习HTML，但我现在已经被困在这里，我正在尝试制作一个下拉框，比如

enter image description here

我很困惑，不知道该怎么办我真的被卡住了，谷歌也无法帮助我所以我在这里，对不起，如果我错过任何事情。

HTML：

<div class="navigation">
        <!----------------------------------------------------------------------------------------------------->
            <ul>
                <li><a href=""> Multi Theft Auto </a>
                    <ul>
                        <li><a href=""> Free Resources </a></li>
                        <li><a href=""> Paid Resources </a></li>
                        <li><a href=""> Requests</a></li>
                        <li><a href=""> Information</a></li>
                    </ul>
                </li>

                <li><a href=""> Minecraft </a>
                    <ul>
                        <li><a href=""> Forge Mods </a></li>
                        <li><a href=""> Bukkit Plugins</a></li>
                        <li><a href=""> Requests</a></li>
                        <li><a href=""> Information</a></li>
                    </ul>
                 </li>

                <li><a href=""> Web Design </a>
                    <ul>
                        <li><a href=""> Website Templates </a></li>
                        <li><a href=""> Freelance Work </a></li>
                        <li><a href=""> Information </a></li>
                    </ul>
                </li>

                <li><a href=""> Miscelanious </a>
                    <ul>
                        <li><a href=""> Contact Information </a></li>
                        <li><a href=""> Support Center </a></li>
                    </ul>
                </li>
            </ul>   
        </div> <!--END navigation -->

CSS：

.navigation{
    width:200px;
    height:1000px;
    background-color:#333;
    opacity:0.75;
}

.navigation ul{
    padding: 3px 0 0 0;
    margin:0;
    list-style:none;        
}

.navigation li{
    float:left;
    width:120px;
}

.navigation ul{
    position: absolute;
    width:120px;    
    margin:100px 0px;
}

.navigation ul li{
    padding:20px;
    width:160px;
    margin:0px 0px 0px 0px;
    background-color:#000;
}

.navigation ul li ul li{
    visibility:hidden;  
}
.navigation ul li:hover{
    background-color:#FFF;
}

.navigation ul li a{
    text-decoration:none;
    color:#06F; 
}

.navigation ul li ul li:hover{
    visibility:visible;
}

Answer 1

这是 FIDDLE 略有改进;）

<div class="navigation">
   <ul>
      <li><a href="#">Link 1</a>
          <ul class="sub1">
              <li><a href="#">Link 1.1</a></li>
              <li><a href="#">Link 1.2</a></li>
              <li><a href="#">Link 1.3</a></li>
              <li><a href="#">Link 1.4</a></li>
          </ul>
      </li>
      <li><a href="#">Link 2</a>
          <ul class="sub1">
              <li><a href="#">Link 2.1</a></li>
              <li><a href="#">Link 2.2</a>
                  <ul class="sub2">
                      <li><a href="#">Link 2.2.1</a></li>
                      <li><a href="#">Link 2.2.2</a>
                          <ul class="sub3">
                              <li><a href="#">Link 2.2.2.1</a></li>
                              <li><a href="#">Link 2.2.2.2</a></li>
                              <li><a href="#">Link 2.2.2.3</a></li>
                              <li><a href="#">Link 2.2.2.4</a></li>
                          </ul>
                       </li>
                       <li><a href="#">Link 2.2.3</a></li>
                       <li><a href="#">Link 2.2.4</a></li>
                   </ul> 
              </li>
              <li><a href="#">Link 2.3</a></li>
              <li><a href="#">Link 2.4</a></li>
          </ul>
      </li>
      <li><a href="#">Link 3</a>
          <ul class="sub1">
              <li><a href="#">Link 3.1</a></li>
              <li><a href="#">Link 3.2</a></li>
              <li><a href="#">Link 3.3</a></li>
          </ul>
      </li>
      <li><a href="#">Link 4</a>
          <ul class="sub1">
              <li><a href="#">Link 4.1</a></li>
              <li><a href="#">Link 4.2</a></li>
          </ul>
      </li>
   </ul>    
</div>


.navigation{
   width:200px;
   height:1000px;
   background:#333;
   opacity:0.75;
}

.navigation ul{
   background:#333;
   position: absolute;
   width:200px; 
   margin:100px 0;
   padding: 0;
   list-style:none;     
}

.navigation ul li{
   float:left;
   padding:0;
   margin-bottom:1px;
}

.navigation ul li a{
   background:#000;
   display:block;
   width: 200px;
   height: 30px;
   padding: 25px 0 10px 0;
   text-align:center;
   text-decoration:none;
   color:#06F;  
   transition:all 0.2s ease-in;
}

.navigation ul li a:hover{
   background:#fff;
}

.navigation .sub1,
.navigation .sub2,
.navigation .sub3{
   position:absolute;
   display:none;
   margin-top:-65px;
   margin-left:200px;
   border-left:1px solid #666;
}

.navigation li:hover .sub1,
.navigation .sub1 li:hover .sub2,
.navigation .sub2 li:hover .sub3{
   display:block;
}

enter image description here

HTML卡在垂直菜单上

1 个答案: