1

http://jsfiddle.net/a2gRf/

我在这里有这个jsfiddle，你可以看到如果你输入一个更长的菜单名称，它会被夹在这个小容器中，我想要实现的是如果我在菜单中输入一个更长的单词，自动使容器变大，我不不知道这是否可能，或者我是否必须将它们全部设为 300 像素宽？

下面的代码

    <ul id="nav">
    <li><a href="#">Parent 01</a></li>
    <li><a href="#" class="selected">Parent 02</a>
        <ul>
            <li><a href="#">Item 01</a></li>
            <li><a href="#" class="selected">Item 02</a></li>
            <li><a href="#">Item 03</a></li>
        </ul>
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 000000000000000003</a>
    <ul>
        <li><a href="#">Item 04</a></li>
        <li><a href="#">Item 05</a></li>
        <li><a href="#">Item 06</a></li>
        <li><a href="#">Item 07</a></li>
    </ul>            
        <div class="clear"></div>
    </li>
    <li><a href="#">Parent 04</a></li>
</ul>
<div class="clear"></div>

CSS

 body {font-family:arial; font-size:11px;}
.clear {clear:both}    
/* remove the list style */
#nav {
    margin:0;
    padding:0;
    list-style:none;
}    

    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu */
    #nav li {
        float:left;
        display:block;
        width:100px;
        background:#ccc;
        position:relative;
        z-index:500;
        margin:0 1px;
    }

    /* this is the parent menu */
    #nav li a {
        display:block;
        padding:8px 5px 0 5px;
        font-weight:700;
        height:23px;
        text-decoration:none;
        color:#fff;
        text-align:center;
        color:#333;
    }
    #nav li a:hover {
        color:#fff;
    }

    /* you can make a different style for default selected value */
    #nav a.selected {
        color:#f00;
    }

        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute;
            left:0;
            display:none;
            margin:0 0 0 -1px;
            padding:0;
            list-style:none;
        }

        #nav ul li {
            width:100px;
            float:left;
            border-top:1px solid #fff;
        }

        /* display block will make the link fill the whole area of LI */
        #nav ul a {
            display:block;
            height:15px;
            padding: 8px 5px;
            color:#666;
        }

        #nav ul a:hover {
            text-decoration:underline;    
        }
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}

jQuery

    $(document).ready(function () {    

    $('#nav li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(100);
        },
        function () {
            //hide its submenu
            $('ul', this).stop().slideUp(100);            
        }
    );

});
4

3 回答 3

1

只需更改 100px 宽度规则

width:100px;

至

min-width:100px;

然后 css 会自动为您调整大小，并确保所有父 li 项目至少为 100px 宽。

工作 JS 小提琴

但请注意，如果您的菜单项过多，这不会阻止您的整个 ul 溢出。

于 2013-08-15T03:21:37.227 回答
1

只是min-width:100px;在你的#nav li { ...课堂上使用。它应该工作。

于 2013-08-15T03:24:51.543 回答
0

删除 width 属性，如下所示：

#nav li {
  float:left;
  display:block;
  /*width:100px;*/
  background:#ccc;
  position:relative;
  z-index:500;
  margin:0 1px;
}
于 2013-08-15T03:27:22.540 回答