下拉列表使用css行爲不當（項目之間的空白）

我只是在玩一個例子，並陷入了一些東西。我想知道什麼可能會造成你在下面的截圖中看到的差距，一直在嘗試不同的事情，但我想我需要一些幫助。下拉列表使用css行爲不當（項目之間的空白）

Gap

的代碼如下：

HTML

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="menuhovercss.css"> 
      <base target="main" /> 
      <title> 
       home 
      </title> 
     </head> 
     <body> 
      <div> 
       <ul> 
        <li><a href="">Home</a> </li> 
        <li><a href="#">Tracks</a> 
         <ul> 
          <li><a href="">SD</a> 
           <ul> 
            <li><a href="">Schedule</a></li> 
            <li><a href="">Materials</a></li> 
            <li><a href="">Contacts</a></li> 
           </ul> 
          </li> 
          <li> 
           <a href="">GIS</a> 
           <ul> 
            <li><a href="">Schedule</a></li> 
            <li><a href="">Materials</a></li> 
            <li><a href="">Contacts</a></li> 
           </ul> 
          </li> 
          <li> 
           <a href="">UI</a> 
           <ul> 
            <li><a href="">Schedule</a></li> 
            <li><a href="">Materials</a></li> 
            <li><a href="">Contacts</a></li> 
           </ul> 
          </li> 
         </ul> 
        </li> 
        <li><a href="">Web of the week</a> </li> 
       </ul> 
      </div> 
     </body> 
    </html>

CSS

ul { 
    padding: 0; /*Remove Indentation*/ 
    list-style: none; /*Remove leading bullet*/ 
    /*position:relative; 
    display:block;*/ 
} 

ul li { 
    float: left; /*Force it to one line*/ 
    width: 130px; /*Set each menu item to specific width*/ 
    text-align: center; /*centers each inside its own 'cell'*/ 
    /*display:list-item;*/ 
    /*border-bottom: 5px solid #2ecc71;*/ 
} 

ul li a { 
    display: block; 
    padding: 5px 10px; /* Create Padding for each link*/ 
    color: #333; 
    background-color: #f2f2f2; 
    text-decoration: none; 
    border-bottom: 4px solid green; 
} 

ul li a:hover { /* Change color when hovering */ 
    color: #fff; 
    background-color: #939393; 
} 

ul ul { 
    display: none; /*Hide the submenus*/ 
} 

ul li:hover > ul { 
    display: list-item; /*Show the submenus when hovering > means direct child*/ 
    /*float: left;*/ 
} 

ul ul > li { /*Submenu*/ 
    float: left; 
    position: relative; 
    border-bottom: none; 
} 

ul ul ul li { /*Sub-submenu*/ 
    position: absolute relative; 
    top: -25px; 
    left: 130px; 
}

來源

2014-10-06 AngelicCore

第三級菜單位於第二級菜單的<li>內，給予父元素高度。

只需添加此規則，以避免這種影響

ul ul ul{position:absolute;}

來源

2014-10-06 23:43:50 thetont

，並從該行刪除'absolute'：'的位置是：絕對相對;''你UL UL UL li'規則內（它不亂任何東西，它只是馬虎） – myfunkyside 2014-10-06 23:53:38

完美的作品:) – AngelicCore 2014-10-07 00:13:05

下拉列表使用css行爲不當（項目之間的空白）

回答

相關問題