0

我有一个包含垂直选项卡的菜单，但我希望它具有固定大小，无论内部内容的长度如何。现在选项卡会根据选项卡内的内容自动调整大小，使其看起来不均匀。

html:

        <ul class="sf-menu sf-vertical" id="example">
            <li class="current">
             <a href="#a">EMPLOYEE INFROMATION</a>
             <ul>
              <li>
               <a href="#aa">menu item that is quite long</a>
                      </li>
              <li class="current">
                <a href="#ab">menu item</a>
             <ul>
             <li class="current"><a href="#">menu item</a></li>
               <li><a href="#aba">menu item</a></li>
               <li><a href="#abb">menu items</a></li>
               <li><a href="#abc">menu item</a></li>
             <li><a href="#abd">menu item</a></li>
            </ul>
            </li>
            <li>
            <a href="#">menu item</a>

CSS：

/*** ESSENTIAL STYLES ***/
      .sf-menu, .sf-menu * {
            margin:         0;
            padding:        0;
            list-style:     none;
       }
       .sf-menu {
            line-height:    1.0;
       }
       .sf-menu ul {
            position:       absolute;
            top:            -999em;
            width:          10em; /* left offset of submenus need to match (see             below) */
       }
       .sf-menu ul li {
            width:          100%;
        }
       .sf-menu li:hover {
            visibility:     inherit; /* fixes IE7 'sticky bug' */
       }
       .sf-menu li {
            float:          left;
            position:       relative;
        }
       .sf-menu a {
            display:        block;
            position:       relative;
        }
        .sf-menu li:hover ul,
        .sf-menu li.sfHover ul {
            left:           0;
            top:            2.5em; /* match top ul list item height */
            z-index:        99;
         }
         ul.sf-menu li:hover li ul,
         ul.sf-menu li.sfHover li ul {
         top:           -999em;
         }
         ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
         left:          10em; /* match ul width */
         top:           0;
          }
          ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
          top:          -999em;
          }
          ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
          left:         10em; /* match ul width */
          top:          0;
          }

/*** DEMO SKIN ***/
          .sf-menu {
          float:            left;
          margin-bottom:    1em;
           }
          .sf-menu ul {
          box-shadow: 2px 2px 6px rgba(0,0,0,.2);
          }
          .sf-menu a {
            border-left:    1px solid #fff;
            border-top:     1px solid #CFDEFF;
            padding:        .75em 1em;
            text-decoration:none;
           }
           .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
            color:          #13a;
           }
           .sf-menu li {
            background:     #BDD2FF;
           }
           .sf-menu li li {
            background:     #AABDE6;
           }
           .sf-menu li li li {
            background:     #9AAEDB;
           }
           .sf-menu li:hover, .sf-menu li.sfHover,.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
            background:     #CFDEFF;
            outline:        0;
           }

/*** arrows **/
        .sf-menu a.sf-with-ul {
            padding-right:  2.25em;
            min-width:      1px; /* trigger IE7 hasLayout so spans position accurately */
         }
       .sf-sub-indicator {
            position:       absolute;
            display:        block;
            right:          .75em;
            top:            1.05em; /* IE6 only */
            width:          10px;
            height:         10px;
            text-indent:    -999em;
            overflow:       hidden;
            background:     url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
           }
           a > .sf-sub-indicator {  /* give all except IE6 the correct values */
            top:            .8em;
            background-position: 0 -100px; /* use translucent arrow for modern browsers*/
           }
       /* apply hovers to modern browsers */
       a:focus > .sf-sub-indicator,
       a:hover > .sf-sub-indicator,
       a:active > .sf-sub-indicator,
       li:hover > a > .sf-sub-indicator,
       li.sfHover > a > .sf-sub-indicator {
       background-position: -10px -100px; /* arrow hovers for modern browsers*/
       }

     /* point right for anchors in subs */
       .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
       .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
       /* apply hovers to modern browsers */
       .sf-menu ul a:focus > .sf-sub-indicator,
       .sf-menu ul a:hover > .sf-sub-indicator,
       .sf-menu ul a:active > .sf-sub-indicator,
       .sf-menu ul li:hover > a > .sf-sub-indicator,
       .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
      }

任何帮助，将不胜感激..

4

1 回答 1

1

我在这里为您创建了一个 jFiddle：http: //jsfiddle.net/persianturtle/RfURY/

答案其实很简单。

我刚刚添加了一个类：

.current li {
height:50px;
}

这控制所有菜单列表项的高度。

请用复选标记感谢我！

于 2013-02-11T16:18:02.440 回答