0

この 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; }
4

2 に答える 2

2

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;
}

これで問題は解決します。

jsFiddle での作業例。

于 2013-02-08T08:48:57.173 に答える
1

htmled の回答を明確にするために、w3schools.com からの 2 つの引用:

「visibility:hidden は要素を非表示にしますが、以前と同じスペースを占有します。要素は非表示になりますが、レイアウトには影響します。」

「display:none は要素を非表示にし、スペースを占有しません。要素は非表示になり、要素が存在しないかのようにページが表示されます。」

リンク: http://www.w3schools.com/css/css_display_visibility.asp

于 2013-02-09T14:47:22.667 に答える