如何填充垂直子菜單上的間隙？

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Test</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <style> 

      h1{ 

       background: blueviolet; 

       font-size:70px; 
       font-weight: bolder; 
       margin:0 auto; 
       padding:15px; 
       text-align: center; 

      } 

     ul ul { 
    display: none; 

      } 



     ul li:hover > ul{ 

     display: block; 


    } 

     .ul1 { 
      position:absolute; 
      top: 15px; 
      width:50%; 
      font-size: 30px; 

      } 





     .ul1 li{ 

      /* display: block;*/ 
       list-style-type: none; 
       background: black; 
       border-right: 1px solid white; 
       color:white; 
       width: 90px; 
       float:left; 
       text-align: center; 
       text-decoration: none; 

       padding: 5px; 

      } 




     .sub1 li a{ 
      list-style-type:none; 
      background: black; 

      color:white; 
      text-align: center; 
      text-decoration: none;  





     } 

     .ul1 li:last-child { 
     border-right: none; 

     } 

     .sub1 li,a{ 

      border-right: none; 


     } 



     .ul1 :hover { 

       background: black; 
       color: yellow; 

      } 


      .sub1 li{ 


       position: relative; 
       right:45px; 

      } 



     .sub1 li:hover { 
     background: white; 
     color:black; 

     } 

     .sub1 a:hover { 
     background: white; 
     color: black; 
     text-decoration: underline; 

    } 
      img{ 

       width: 200px; 
       height: 200px; 
       /* position: absolute;*/ 
       top:270px; 
       float: left; 

       transition: all .2s ease-in-out; 
      } 

      img:hover{ 


     transform:scale(1.9); 

      } 




      .p2{ 

      font-size:24px; 
      margin: 0px; 
      color:blue; 
      margin-right: 25px; 




      } 





     body{ 

      background: grey; 



     } 

    /* @media(max-width:500px){ 
      h1 { 

     float: right; 

      } 
     }*/ 


     </style> 



    </head> 
    <body> 
     <div id="div0"> 



      <h1 >Καλήμερα Ελλάδα!!</h1> 


       <ul class="ul1"> 

        <li>Home</li> 
        <li>Menu</li> 

        <li>Menu2 
        <ul class="sub1"> 
        <li>Home</li> 
        <li>Menu</li> 
        <li id="ok"><a href="testindex.html" target="_blank">Menu2</a></li> 

        </ul> 
        </li> 



       </ul> 









       <p class="p1"> 

       <img src="./images/im1.png" > 



       </p> 


        <p class="p2"> 


      </p> 








     </div> 


    </body> 
</html>

在子菜單Menu2鏈接如何填補空白？如果您將鼠標指向Menu2，您將看到它沒有正確填充。如何填充垂直子菜單上的間隙？

來源

2016-10-04 asd32

我刪除了「.sub1 li a」的黑色背景，並創建了一個新的選擇器「.sub1 li：hover a」，並將顏色設置爲黑色。更新的代碼可以在下面找到。

h1 { 
 
    background: blueviolet; 
 
    font-size:70px; 
 
    font-weight: bolder; 
 
    margin:0 auto; 
 
    padding:15px; 
 
    text-align: center; 
 
} 
 

 
ul ul { 
 
    display: none; 
 
} 
 

 
ul li:hover > ul { 
 
    display: block; 
 
} 
 

 
.ul1 { 
 
    position:absolute; 
 
    top: 15px; 
 
    width:50%; 
 
    font-size: 30px; 
 
} 
 

 
.ul1 li { 
 
    /* display: block;*/ 
 
    list-style-type: none; 
 
    background: black; 
 
    border-right: 1px solid white; 
 
    color: white; 
 
    width: 90px; 
 
    float: left; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    padding: 5px; 
 
} 
 
.sub1 li a { 
 
    list-style-type: none; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
} 
 

 
.ul1 li:last-child { 
 
    border-right: none; 
 
} 
 

 
.sub1 li, a { 
 
    border-right: none; 
 
} 
 

 
.ul1 :hover { 
 
    background: black; 
 
    color: yellow; 
 
} 
 

 
.sub1 li { 
 
    position: relative; 
 
    right:45px; 
 
} 
 

 
.sub1 li:hover { 
 
    background: white; 
 
    color:black; 
 
} 
 

 
.sub1 li:hover a { 
 
    color: black; 
 
} 
 

 
.sub1 a:hover { 
 
    background: white; 
 
    color: black; 
 
    text-decoration: underline; 
 
} 
 

 
img { 
 
    width: 200px; 
 
    height: 200px; 
 
    /* position: absolute;*/ 
 
    top: 270px; 
 
    float: left; 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
img:hover { 
 
    transform: scale(1.9); 
 
} 
 

 
.p2 { 
 
    font-size: 24px; 
 
    margin: 0px; 
 
    color: blue; 
 
    margin-right: 25px; 
 
} 
 

 
body { 
 
    background: grey; 
 
} 
 

 
/* @media(max-width:500px){ 
 
    h1 { 
 
    float: right; 
 
     } 
 
    }*/

<div id="div0"> 
 
    <h1>Καλήμερα Ελλάδα!!</h1> 
 
    <ul class="ul1"> 
 
    <li>Home</li> 
 
    <li>Menu</li> 
 
    <li>Menu2 
 
     <ul class="sub1"> 
 
     <li>Home</li> 
 
     <li>Menu</li> 
 
     <li id="ok"><a href="testindex.html" target="_blank">Menu2</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
    <p class="p1"> 
 
    <img src="./images/im1.png"> 
 
    </p> 
 
    <p class="p2"> 
 
    </p> 
 
</div>

來源

2016-10-04 16:52:48

日Thnx非常有人竊聽我天。 – asd32

如何填充垂直子菜單上的間隙？

回答

相關問題