css 水平导航菜单自适应文字长度
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>水平导航菜单自适应文字长度</title>
<style type="text/css">
* {padding: 0;margin: 0;}
a {text-decoration: none}
#nav {width: 800px;height: 80px;background-color: #b2ff9f;margin: 50px auto;}
#nav > li { /*width: 100px;*/height: 60px;line-height: 60px;background-color: #393eff;list-style: none;float: left;margin: 10px;padding-left: 20px;padding-right: 20px; /*text-align: center;*/position: relative;display: inline-block;}
#nav > li a {font-size: 20px;color: red;font-weight: 500;}
#nav li ul li { /*width: 100px;*/height: 40px;background-color: #8fd2ff;list-style: none; /*text-align: center;*/line-height: 40px;padding-left: 15px;padding-right: 15px;position: relative;word-break: keep-all;}
#nav li ul li a {font-size: 18px;color: red;}
#nav li ul {display: none;position: absolute;left: 0;z-index: 9999;}
#nav li:hover ul {display: block;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">首页</a>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">首页123</a></li>
<li><a href="#">首页123456</a></li>
</ul>
</li>
<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>
</ul>
</li>
<li><a href="#">联系我们</a>
<ul>
<li><a href="#">地图</a></li>
<li><a href="#">邮箱地址:1234567890@qq.com</a></li>
</ul>
</li>
</ul>
</body>
</html>
