Question

问题是侧边栏菜单列表项会破坏父边界。我怎么能解决这个问题，有什么不让孩子超越父母宽度？从左侧导航站点菜单滑出工作。它看起来很好，当我将鼠标悬停在列表项上时会发生实际问题。正如您所看到的，列表项目会自动显示出来，超越父边界。这看起来很糟糕。我很确定这个问题可以用css修复，但不幸的是我的知识在这一刻并不牢固。你能帮我解决这个问题吗？提前谢谢！

此图像显示了正确的行为。

＆＃13;

body {
    		font-family: 'Open Sans', sans-serif;
    }
    
    img {
    		position: relative;
    		color: #999;
    }
    
    #one {
    		padding: 17px 15px 15px 17px;
    }
    
    #two {
    		padding: 20px 14px 15px 12px;
    }
    
    #three {
    		padding: 15px 17px 15px 15px;
    }
    
    #four {
    		padding: 20px 16px 15px 17px;
    }
    
    #five {
    		padding: 20px 14px 15px 17px;
    }
    
    #six {
    		padding: 17px 14px 15px 14px;
    }
    
    nav {
    		background: #1b1e22;
    		border-right: 1px solid #e5e5e5;
    		position: absolute;
    		top: 0;
    		bottom: 0;
    		height: 100%;
    		left: 0;
    		width: 60px;
    		overflow: hidden;
    		transition: width .5s linear;
    }
    
    nav > ul {
    		margin: 7px 0;
    }
    
    nav li {
    		position: relative;
    		display: block;
    		width: 250px;
    		transition: width .5s linear;
    		border-bottom: 1px solid #24272a;
    }
    
    nav li > a {
    		height: 60px;
    		color: #999;
    		font-size: 14px;
    		position: relative;
    		display: table;
    		border-collapse: collapse;
    		border-spacing: 0;
    		padding: 15px 0;
    		text-decoration: none;
    		-webkit-transition: all 5s linear;
    		transition: all 5s linear;
    }
    
    nav span {
    		position: relative;
    		display: table-cell;
    		vertical-align: middle;
    		width: 190px;
    }
    
    a:hover,
    a:focus {
    		text-decoration: none;
    }
    
    nav {
    		-webkit-user-select: none;
    		-moz-user-select: none;
    		-ms-user-select: none;
    		-o-user-select: none;
    		user-select: none;
    }
    
    nav ul,
    nav li {
    		outline: 0;
    		margin: 0;
    		padding: 0;
    }
    
    li a:hover {
    		color: #104E8B;
    		background-color: #343536;
    }
    
    .main-menu:hover,
    nav.main-menu.expanded {
    		width: 250px;
    		overflow: visible;
    }

＆＃13;

<body>

  <nav class="main-menu">
    <ul>
      <li>
        <a href="#">
          <img id="one" src="https://i.imgur.com/RcWtM2a.png" alt="" />
          <span class="nav-text">
                            Строительные проекты
                        </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <img id="two" src="https://i.imgur.com/wKDZKMl.png" alt="" />
          <span class="nav-text">
                            Строительные товары
                        </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <img id="three" src="https://i.imgur.com/oztvKJ0.png" alt="" />
          <span class="nav-text">
                            Строительные работы
                        </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <img id="four" src="https://i.imgur.com/MT1dCFF.png" alt="" />
          <span class="nav-text">
                            Недвижемость
                        </span>
        </a>

      </li>
      <li>
        <a href="#">
          <img id="five" src="https://i.imgur.com/uICbjKw.png" alt="" />
          <span class="nav-text">
                            Мебель
                        </span>
        </a>
      </li>
      <li>
        <a href="#">
          <img id="six" src="https://i.imgur.com/nHnYpBg.png" alt="" />
          <span class="nav-text">
                            Строител. калькулятор
                        </span>
        </a>
      </li>


    </ul>


  </nav>
</body>

＆＃13;

Answer 1

您必须考虑f=foo-1.3.4.txt echo ${f%%-*}.${f##*.}进行转换，并且必须将width隐藏为以下类：

overflow

这是更新的codepen

http://codepen.io/anon/pen/PqbEqj

当子项目破坏父边界时如何修复案例？

1 个答案: