Question

<!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，您将看到它未正确填充。

Answer 1

我删除了＆＃34; .sub1 li a＆＃34;上的黑色背景，并创建了一个新的选择器＆＃34; .sub1 li：hover a＆＃34;并在那里将颜色设置为黑色。更新后的代码可以在下面找到。

＆＃13;

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;
      }
  }*/

＆＃13;

<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>

＆＃13;

如何填补垂直子菜单上的差距？

1 个答案: