1

我复制此代码：http ://cssmenusmaker.blogspot.com/2013/01/flat-accented-dropdown-menus.html以创建下拉菜单。但是，如果存在带有子元素的菜单元素，则网站的主体会增加。我找到了导致此错误的一段代码，但不知道如何纠正它。

这件作品是：

#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>

身体向右增加，但不增加身体中的动态内容。 身体增加

当将光标移到带有子元素的菜单元素上时，主体将恢复正常。 将光标放在元素上时具有正常宽度的正文

4

1 回答 1

2

这是我做的一个补丁：

改变：

#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/

于 2013-05-10T21:56:12.443 回答