Question

这块css代码导致了问题。 http://www.asifslab.com他们是一个未使用的空间，但我找不到错误。当我拿出这个代码时，它们的侧面没有空间，但是当它存在时，右边有一个很长的间隙。

@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0; }

#cssmenu ul, #cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0; }

#cssmenu ul {
  position: relative;
  z-index: 597; }

#cssmenu ul li {
  float: left;
  min-height: 1px;
  vertical-align: middle; }

#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default; }

#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 598;
  width: 100%; }

#cssmenu ul ul li {
  float: none; }

#cssmenu ul ul ul {
  top: 0;
  left: auto;
  right: -99.5%; }

#cssmenu ul li:hover > ul {
  visibility: visible; }

#cssmenu ul ul {
  bottom: 0;
  left: 0; }

#cssmenu ul ul {
  margin-top: 0; }

#cssmenu ul ul li {
  font-weight: normal; }

#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none; }

/* Custom CSS Styles */
#cssmenu {
  background: #333;
  border-bottom: 4px solid #ff3a34;
  font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
  font-size: 12px; 
    position: relative;
  margin-left: -8px;
  margin-right: -8px;
  z-index: 1000; 
}

  #cssmenu:after, #cssmenu ul:after {
    content: '';
    display: block;
    clear: both; }
  #cssmenu ul {
    text-transform: uppercase; }
    #cssmenu ul ul {
      border-top: 4px solid #ff3a34;
      text-transform: none;
      min-width: 190px; }
      #cssmenu ul ul a {
        background: #ff3a34;
        color: #FFF;
        border: 1px solid #ff0901;
        border-top: 0 none;
        line-height: 150%;
        padding: 16px 20px; }
      #cssmenu ul ul ul {
        border-top: 0 none; }
      #cssmenu ul ul li {
        position: relative; }
        #cssmenu ul ul li:first-child > a {
          border-top: 1px solid #ff0901; }
        #cssmenu ul ul li:hover > a {
          background: #ff534d; }
        #cssmenu ul ul li:last-child > a {
          -moz-border-radius: 0 0 3px 3px;
          -webkit-border-radius: 0 0 3px 3px;
          border-radius: 0 0 3px 3px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box;
          -moz-box-shadow: 0 1px 0 #ff3a34;
          -webkit-box-shadow: 0 1px 0 #ff3a34;
          box-shadow: 0 1px 0 #ff3a34; }
        #cssmenu ul ul li:last-child:hover > a {
          -moz-border-radius: 0 0 0 3px;
          -webkit-border-radius: 0 0 0 3px;
          border-radius: 0 0 0 3px;
          -moz-background-clip: padding;
          -webkit-background-clip: padding-box;
          background-clip: padding-box; }
        #cssmenu ul ul li.has-sub > a:after {
          content: '+';
          position: absolute;
          top: 50%;
          right: 15px;
          margin-top: -8px; }
    #cssmenu ul li:hover > a, #cssmenu ul li.active > a {
      background: #ff3a34;
      color: #FFF; }
    #cssmenu ul li.has-sub > a:after {
      content: '+';
      margin-left: 5px; }
    #cssmenu ul li.last ul {
      left: auto;
      right: 0; }
      #cssmenu ul li.last ul ul {
        left: auto;
        right: 99.5%; }
  #cssmenu a {
    background: #333;
    color: #CBCBCB;
    padding: 0 20px; }
  #cssmenu > ul > li > a {
    line-height: 48px; }

Answer 1

而不是使用visibility属性，而是使用display。

需要更改以下选择器：

#cssmenu ul ul {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
}

#cssmenu ul li:hover > ul {
    visibility: visible;
}

到此：

#cssmenu ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 598;
    width: 100%;
}

#cssmenu ul li:hover > ul {
    display: block;
}

这将解决您的问题。

Working example on jsFiddle

Answer 2

只是为了澄清htmled的回答，来自w3schools.com的两个引言：

“visibility：hidden隐藏了一个元素，但它仍然会占用与之前相同的空间。该元素将被隐藏，但仍会影响布局。”

“display：none隐藏一个元素，它不会占用任何空间。元素将被隐藏，页面将显示为元素不在那里。”

链接：http://www.w3schools.com/css/css_display_visibility.asp

CSS导致右侧空白

2 个答案: