为了账号安全,请及时绑定邮箱和手机立即绑定

ul li 汉字无法自适应,英文字母可以自适应,你们难道没遇到过?

54908b62000119cc04880222.jpg54908b6200010ef003340405.jpg


代码很简单 如下:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0px; padding:0px;}

#nav{width:600px; height:40px; background:#999; margin:0px auto;}

ul{list-style:none;}

ul li{float:left; line-height:40px; text-align:center; position:relative; }

ul li a{text-decoration:none; color:#000; display:block; padding:0px 10px; }

ul li a:hover{color:#FFF; background:#9c3; }

ul li ul{position: absolute; left:0px; top:40px;  display:; }

ul li ul li{float:none; background:#999; margin-top:2px; width:auto;}

ul li ul li a:hover{color:#FFF; background:#9c3; width:auto;}

ul li:hover ul{display:block; }


#cont{ height:400px; width:600px; background:#099; margin:2px auto;}

</style>

</head>



<body>

<div id="nav">

<ul>

  <li><a href="#">首页</a></li>

  <li><a href="#">公司简介</a>

        <ul>

          <li><a href="#">汉字无法自适应,难道你们没遇到过?汉字无法自适应,难道你们没遇到过?</a></li>

          <li><a href="#">第一节课</a></li>

          <li><a href="#">第一节课</a></li>

          <li><a href="#">第一节课</a></li>

        </ul>

  </li>

  <li><a href="#">产品介绍</a></li>

  <li><a href="#">联系方式</a></li>

</ul>

</div>

<div id="cont"></div>


</body>

</html>


正在回答

1 回答

http://www.imooc.com/wenda/detail/240375

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
形形色色的下拉菜单
  • 参与学习       106972    人
  • 解答问题       543    个

本教程从易到难,循循渐进,运用不同技术实现动态下拉菜单

进入课程

ul li 汉字无法自适应,英文字母可以自适应,你们难道没遇到过?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信