Question

我有一个我正在玩弄的示例菜单，虽然它在桌面视图中是正确的，但如果我在480px的小窗口中查看，当我从.has-children类中的最后一个项目悬停时，来自About的项目联系消失。当我徘徊时，就好像菜单不够大。

我附在一个片段中，非常感谢您能给我的任何帮助。我一直试图修改.has-children课程并没有取得进展。

非常感谢

.has-children ul {
        display: none;
        width: 100%;
      }
      nav ul li:hover ul,
      .has-children ul .has-children:hover ul {
        display: flex;
        flex-direction: column;
      }

html,body,nav, ul, li, a, span{
  margin:0; padding:0;
}
body{
  font-family:helvetica;
  font-size:16px;
}
nav ul {
  background-color:#444;
  display:flex;
  flex-direction:column;
}
nav ul li{
  list-style-type: none;
}
nav ul li a{
  padding:.8rem 1rem;
  display:block;
  text-decoration: none;
  color:#f9f9f9;
}
nav ul li:hover{
  background:rgba(0,0,0, .25);
}

.arrow{
  font-family:FontAwesome;
  float:right;
}
.arrow-down::after{
  content:"\f107";
}
.arrow-right::after{
  content:"\f105";
}


@media only screen and (max-width:480px){
  .has-children ul {
        display: none;
        width: 100%;
        position: absolute;
      }
      nav ul li:hover ul,
      .has-children ul .has-children:hover ul {
        display: flex;
        flex-direction: column;
      }
      .has-children ul li a {
        padding-left: 2rem;
      }
      .has-children ul .has-children ul a {
        padding-left: 3rem;
      }
      nav ul li {
      list-style-type: none;
    }
      .arrow-down::after {
        content: "\f107";
      }
}

@media only screen and (min-width:480px){
  nav ul{
    flex-direction:row;
/*     justify-content:flex-end; */
  }
  nav ul li{
    position:relative;
    flex:1 0 auto;
    text-align:left;
  }
  .has-children ul, .has-children ul .has-children ul{
    display:none;
    width:100%;
    position:absolute;
  }
  .has-children ul .has-children ul{
    left:100%;
    top:0;
  }
  nav ul li:hover ul,  .has-children ul .has-children:hover ul{
     display:flex;
    flex-direction:column;
  }
  
}

<nav>
  <ul>
    <li class="has-children"><a href="#">Home
      <span class="arrow arrow-down"></span>
      </a>
       <ul>
        <li><a href="#">Item - 1 </a></li>    
        <li><a href="#">Item - 2 </a></li>
        <li class="has-children"><a href="#">Item - 3
          <span class="arrow arrow-down arrow-right"></span>
          </a>
           <ul>
            <li><a href="#">Item - 1 </a></li>    
            <li><a href="#">Item - 2 </a></li>
            <li><a href="#">Item - 3</a></li>
            <li><a href="#">Item - 4 </a></li>
            <li><a href="#">Item - 5 </a></li>
          </ul>
         </li>
        <li><a href="#">Item - 4 </a></li>
        <li><a href="#">Item - 5 </a></li>
      </ul>
    
    </li>    
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 1

您希望让您的网站响应最好，最简单的工具，让您的网站响应 BootStrap 为什么不使用这种方式。
这是下载的链接bootstrap文件

https://getbootstrap.com/docs/4.0/getting-started/download/
从此链接下载编译的css和js 。它包括两个文件，一个是css文件，另一个是javascript文件，以及将这些文件包含在html标头标签中的方式，如下面的代码

<head>
  <title> Website Title </title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="filename.css">
  <script src="filename.js"></script>
</head>

这里是折叠导航栏的链接
https://www.w3schools.com/bootstrap4/bootstrap_navbar.asp和 https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_collapse&stacked=h

我希望这会帮助你

响应式菜单项消失

1 个答案: