摘要：当我们的制作wordpress主题导航菜单时，需要设置下拉菜单，菜单项的内容字数也不同，若定义固定的宽度就会出现排版混乱...
当我们的制作wordpress主题导航菜单时，需要设置下拉菜单，菜单项的内容字数也不同，若定义固定的宽度就会出现排版混乱等问题如何制作一个合格的、适应性强的下拉菜单？下面的方法可实现灵活变化。
通常，wordpress菜单结构这样的一串代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class=”nav”> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>新闻中心</a> <ul> <li><a href=”#”>国内新闻</a></li> <li><a href=”#”>xx </a></li> <li><a href=”#”>xxxxxx</a></li> </ul> </li> </ul> </div> |
要实现 .nav ul li ul 的宽度随内容变化，需在css文件中做出以下定义：
|
1 2 3 |
.nav ul li ul{width:auto;} .nav ul li ul li{display:inline;} .nav ul li ul li a{display:inline-block; min-width:80px; white-space:nowrap;} |
这里的ul、li、a会有写属性继承自上层，可根据自己需要定义。
注释：white-space:nowrap 表示不换行，直至遇到
为止。min-width:80px 设置最小宽度，根据需要，可用可不用。
