Question

我有html和css执行飞出菜单。是否可以在飞出框周围放置边框。

＆＃13;

#WebPartWPQ4 {
  width: 1040px!important;
  //height: 200px!important;
  overflow: hidden!important;
}
/*edit */

#WebPartWPQ6_ChromeTitle {
  //width:50px!important;
  position: absolute;
  top: -40px;
  z-index: 0;
}
#MSOZoneCell_WebPartWPQ6 {
  position: absolute;
  top: 500px
}
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  position: relative;
  z-index: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul,
#cssmenu ul ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 397;
}
#cssmenu ul li {
  min-height: 1px;
  line-height: 1em;
  vertical-align: middle;
}
#cssmenu ul li:hover {
  position: relative;
  //z-index: 99;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  /* z-index: 398; */
  width: 100%;
}
#cssmenu ul ul ul {
  top: 0px;
  left: 99%;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
  width: 170px;
}
#cssmenu ul ul {
  bottom: 0px;
  left: 0;
}
/* Custom CSS Styles */

#cssmenu ul {
  width: 100px;
}
#cssmenu ul ul {
  width: 167px;
}
#cssmenu ul li {
  padding: 7px 10px;
  color: #000000;
  //background-color: #F0F9FC;
  background-color: #FFF;
  //border: 1px solid red;
  //border-bottom: 1px solid gray;

}
#cssmenu ul li:hover {
  background: #cce5ff;
  color: #000;
  box-shadow: 1px 1px 10px 2px #888;
  border-style: solid;
}
#cssmenu ul a:link,
#cssmenu ul a:visited {
  color: #000;
  text-decoration: none;
}
#cssmenu ul a:hover {
  color: #000;
}
#cssmenu ul a:active {
  color: #ffa500;
}

＆＃13;

<div id='cssmenu'>
  <ul>
    <table cellpadding="1" cellspacing="1" style="width: 100%;">
      <tbody>
        <tr>
          <td>
            <li>
              <img alt="Find" src="http://inside.colgate.in/_layouts/15/images/siteicons/Find.png" style="width: 150px; height: 150px;" />
              <ul>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionAll.aspx'><span>Policies/Forms</span></a>
                </li>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionCompanyWide.aspx'><span> - Company-wide</span></a>
                </li>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionCASpecial.aspx'><span> - CA Special</span></a>
                </li>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionSouthWestDeepWater.aspx'><span> - SouthWest Inboard</span></a>
                </li>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionSouthWestShelf.aspx'><span> - SouthWest Shelf</span></a>
                </li>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionLABasin.aspx'><span> - Basin</span></a>
                </li>
                <li><a href='http://inside.colgate.in/sites/sales/Policies/Forms/RegionSanJoaquinValley.aspx'><span> - Deep Valley</span></a>
                </li>
                <li><a href='http://www.google.com/world'><span>Safety Data Sheet (SDS)</span></a>
                </li>
                <li><a href='http://www.google.com/world'><span>Safety Alerts</span></a>
                </li>
              </ul>
            </li>
          </td>
          <td>
            <li>
              <img alt="Report/Suggest" src="http://inside.colgate.in/_layouts/15/images/siteicons/ReportSuggest.png" style="width: 150px; height: 150px;" />
              <ul>
                <li><a href='http://www.google.com'><span>An Incident</span></a>
                </li>
                <li><a href='http://www.google.com'><span>An Emergency</span></a>
                </li>
                <li><a href='http://www.google.com'><span>An Observation</span></a>
                </li>
                <li><a href='http://www.google.com'><span>A Suggestion</span></a>
                </li>
              </ul>
            </li>
          </td>

          <td>
            <li>
              <img alt="My Stuff" src="http://inside.colgate.in/_layouts/15/images/siteicons/MyStuff.png" style="width: 150px; height: 150px;" />
              <ul>
                <li><a href='http://www.google.com'><span>My Training</span></a>
                </li>
                <li><a href='http://www.google.com'><span>My PPE</span></a>
                </li>
                <li><a href='http://www.google.com'><span>My Safety Committee</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - CA Special</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - SouthWest Inboard</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - LA Basin</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Valley</span></a>
                </li>
                <li><a href='http://www.google.com'><span>My Floor Wardens</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Cloverfield</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Oklahoma</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - New York</span></a>
                </li>
                <li><a href='http://www.google.com'><span>Adjust My Workstation</span></a>
                </li>

              </ul>
            </li>
          </td>
          <td>
            <li>
              <img alt="Emergency" src="http://inside.colgate.in/_layouts/15/images/siteicons/Emergency.png" style="width: 150px; height: 150px;" />
              <ul>
                <li><a href='http://www.google.com'><span>Emergency Numbers and Guides</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Cloverfield</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - CA Special</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - SouthWest Inboard</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - SouthWest Shelf</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Oklahoma</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Orleans</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Basin</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - New York</span></a>
                </li>
                <li><a href='http://www.google.com'><span> - Valley</span></a>
                </li>
                <li><a href='http://www.google.com'><span>Incident Management/ICS</span></a>
                </li>
                <li><a href='http://www.google.com'><span>Business Continuity</span></a>
                </li>
                <td>
                  <li>
                    <img alt="Contractors" src="http://inside.colgate.in/_layouts/15/images/siteicons/Contractors.png" style="width: 150px; height: 150px;" />
                    <ul>
                      <li><a href='http://www.google.com/world'><span>Contractor Portal</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span>ISNetworld</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span>Pocket Guidebook</span></a>
                      </li>

                    </ul>
                  </li>
                </td>
                <td>
                  <li>
                    <img alt="Get Info" src="http://inside.colgate.in/_layouts/15/images/siteicons/GetInfo.png" style="width: 150px; height: 150px;" />
                    <ul>
                      <li><a href='http://www.google.com'><span>Orientation Materials</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span> - Company-wide</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span> - CA Special</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span> - SouthWest Inboard</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span> - SouthWest Shelf</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span> - Basin</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span> - Valley</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span>External Links</span></a>
                      </li>
                      <li><a href='http://www.google.com/world'><span>User Guides</span></a>
                      </li>
                    </ul>
                  </li>
                </td>
              </ul>
            </li>
          </td>
        </tr>
      </tbody>
    </table>

  </ul>
</div>

＆＃13;

我尝试了这个，但它在ul li

没有帮助

border-style: solid;

Answer 1

尝试从JSFiddle中的第bottom: 0行删除88并添加border。

/* at line 88 in JSFiddle change this */
#cssmenu ul ul {
    bottom: 0;
    left: 0;
}
/* to this */
#cssmenu ul ul {
    border: 1px solid #ccc;
    left: 0;
}

通过设置bottom: 0，您有效地告诉您的下拉菜单ul的高度为0，因此边框看起来只有“{1}}。 s应用于下拉列表的顶部。

在菜单框周围添加边框

1 个答案: