Css在web菜单元素中的“左”属性会导致人体增加

问题描述：

我复制此代码：http://cssmenusmaker.blogspot.com/2013/01/flat-accented-dropdown-menus.html以创建下拉菜单。但是，如果存在带有子元素的菜单元素，网站正文会增加。我找到导致此错误的代码片段，但不知道如何更正它。Css在web菜单元素中的“左”属性会导致人体增加

这一块是：

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

甲MWE：

<html> 
<head> 
<style type="text/css"> 
#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 #1b9bff; 
    font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif; 
    font-size: 12px; } 
    #cssmenu > ul { 
    *display: inline-block; } 
    #cssmenu:after, #cssmenu ul:after { 
    content: ''; 
    display: block; 
    clear: both; } 
    #cssmenu ul { 
    text-transform: uppercase; } 
    #cssmenu ul ul { 
     border-top: 4px solid #1b9bff; 
     text-transform: none; 
     min-width: 190px; } 
     #cssmenu ul ul a { 
     background: #1b9bff; 
     color: #FFF; 
     border: 1px solid #0082e7; 
     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 #0082e7; } 
     #cssmenu ul ul li:hover > a { 
      background: #35a6ff; } 
     #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 #1b9bff; 
      -webkit-box-shadow: 0 1px 0 #1b9bff; 
      box-shadow: 0 1px 0 #1b9bff; } 
     #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: #1b9bff; 
     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; } 
</style> 
<link href="cssmenu.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>Home</span></a></li> 
    <li class='has-sub'><a href='#'><span>Products</span></a> 
     <ul> 
     <li class='has-sub'><a href='#'><span>Product 1</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub'><a href='#'><span>Product 2</span></a> 
      <ul> 
       <li><a href='#'><span>Sub Item</span></a></li> 
       <li class='last'><a href='#'><span>Sub Item</span></a></li> 
      </ul> 
     </li> 
     </ul> 
    </li> 
    <li><a href='#'><span>About</span></a></li> 
    <li class='last'><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 
</body> 
</html>

主体向右增加，但不增加在体内的DINAMIC内容。 Body increases

将光标移动到子元素的菜单元素上时，主体将恢复正常。 Body with normal width when put the cursor over the element

一个相对定位的元素保持其正常的流动大小，包括换行符和最初为它保留的空格*（http://www.w3.org/TR/CSS2/visuren.html#相对定位），这就是为什么你看到水平滚动条。另请注意，顶部/右侧/底部/左侧属性的百分比值指的是元素'[*包含块*]的大小（http://www.w3.org/TR/CSS2/visuren.html#containing - 块） - 不是元素本身 – Adrift 2013-05-10 21:35:04

@Adrift所以，这不是一个错误？但是，看起来很丑陋。我该如何解决它？ – osjerick 2013-05-10 21:38:58

它不是一个真正的*错误*尽可能在这种情况下使用定位是不好的做法 - 您的问题太本地化 - 考虑在较短的问题中发布相关代码，以便更多人可以提供帮助。 – Adrift 2013-05-10 21:41:24

答

这里是一个补丁，我所做的：

更改：

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

要：

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

和它下面补充说：

#cssmenu ul ul:hover ul { 
    top: 0; 
    left: auto; 
    right: -99.5%; 
    display: inline-block; }

小提琴：http://jsfiddle.net/9yxrg/1/

它完美的作品，谢谢！ – osjerick 2013-05-10 23:00:39

Css在web菜单元素中的“左”属性会导致人体增加

相关推荐