Question

对于网站设计，我正在制作一个位于顶部的导航栏，允许用户快速查看网站提供的内容。在下图中，我以图形方式显示问题

Button Design Problem Sketched Out #navBar { 位置：绝对的; 上：140px; 左：460px; 宽度：980px; 身高：200px; background-color：rgb（246,246,246）; 溢出：隐藏;

      }
      li {
          list-style: none;
      }
      .navButton {
          position: absolute;
          top: 65px;
          left: 0px;
          width: 350px;
          height: 75px;
          background-color:rgb(18, 65, 91);
          color: white;
          margin-left: 0px;
          display:inline-block;
          text-align: center;
          -moz-transform: rotate(270deg);
          -moz-transform-origin: 50% 50%;
          -webkit-transform: rotate(310deg);
          -webkit-transform-origin: 50% 50%;
          font-weight: bold;
      }
      div span {
          position: relative;
          top: 15px;
          font-size: 29px;
      }
      .navButton:nth-of-type(1):before {
          content:"";
          position:absolute;
          height:170px;
          width:350px;
          background-color:rgb(18, 65, 91);
          top:-165px;
          left:-50px;
      }
      .navButton:nth-of-type(8):after {
          content:"";
          position:absolute;
          height:170px;
          width:350px;
          background-color:rgb(18, 65, 91);
          top:65px;
          left:50px;
      }
      div span {
          position: relative;
          top: 15px;
          font-size: 29px;
      }
      .buttonContent {
          position: absolute;
          right: 200px;
          top: 50px;
          background-color: #F2F2F2;
          width: 300px;
          visibility: hidden;
      }
      .buttonContent a {
          text-decoration: none;
          color: black;
          font-weight: bold;
      }
      .buttonContent a:hover {
          color: rgb(18, 65, 91);
      }
      .navButton:hover > .buttonContent {
          visibility: visible;
      }
      </style>

    <div id="navBar" style="">
      <table>
         <tr>
           <td>
            <ul>
                  <li>
                    <div class="navButton" style="left:-40px;"> <span> Getting Started  </span>

                        <div class="buttonContent"> <a href="#"> More about Partner Portal</a>
                            </br>   <a href="#"> Discover 3DSWYM</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:70px;"><span> Our Solutions  </span> 
                        <div class="buttonContent"> <a href="#"> Industry Sales Kits</a>
                            </br>   <a href="#"> Brand Sales </a>
                            </br>   <a href="#"> Other Product Lines </a>
                            </br>   <a href="#"> Discover R2014x</a>
                            </br>   <a href="#"> Discover R2014x</a>
                            </br>   <a href="#"> Packagin & Portfolio 2014x</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:180px;"><span> Sales </span>

                        <div class="buttonContent"> <a href="#">Agreements & Policies</a>
                            </br>   <a href="#">Pricing</a>
                            </br>   <a href="#">Online Services</a>
                            </br>   <a href="#">3DEXPERIENCE Platform</a>
                            </br>   <a href="#">Sales Support R2014x</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:290px;"><span> Marketing </span>

                        <div class="buttonContent"> <a href="#">Marketing R2014x</a>
                            </br>   <a href="#">Marketing & Communication</a>
                            </br>   <a href="#">Campaigns in-a-box</a>
                            </br>   <a href="#">Marketing Online Services </a>
                            </br>   <a href="#">Branding Materials</a>
                            </br>   <a href="#">Solutions Partner Labels</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:400px;"><span>   Customer Support 
                      </span> 
                        <div class="buttonContent"> <a href="#">Our Mission</a>
                            </br>   <a href="#">Roles & Responsibilities</a>
                            </br>   <a href="#">Support Resources</a>
                            </br>   <a href="#">Dassault Systemes Partners Support Tool</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:510px;"><span> Training </span> 
                        <div class="buttonContent"> <a href="#"> Training Programs</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:620px;"><span> Technical Resources </span> 
                        <div class="buttonContent"> <a href="#">Pre-Sales Support R2014x</a>
                            </br>   <a href="#">VS Sales KickOff 2014 Presentations</a>
                            </br>   <a href="#">V6 Deployment Optimizations</a>
                            </br>   <a href="#">Dsx.client Portal</a>
                            </br>   <a href="#">3DSWYM Communities</a>
                            </br>
                        </div>
                    </div>
                    <div class="navButton" style="left:730px;"><span> Contact Us </span> 
                    </div>
                </li>
                <li></li>
            </ul>
        </td>
    </tr>
    </table>
   </div>

所以我使用了@BeatAlex帮助我的修改版本，小提琴在下面

The jfiddle Link！

现在你可以看到，有一个div-class：＆＃39; buttonContent＆＃39;，它出现在每个相应的navButton下面，现在由于溢出隐藏属性而被隐藏

Answer 1

您可以overflow:hidden;上执行#navBar;

JSFiddle

或者增加宽度以使其更加对角线并移除border-radius。

JsFiddle

并且所有位都是彩色的：

JsFiddle

Answer 2

您可以将overflow: hidden添加到#navbar元素。如果您不希望它切断底部/右侧，您可以使用overflow-x或overflow-y

<强> SEE FIDDLE

适合矩形div内的按钮

2 个答案: