Can a div be set to left floating and relative positioning at the same time in css? _html/css_WEB-ITnose

<ul>                <li><a class="current_nav" href="#">网站首页</a>                	<ul>                    	<span class="arrow"></span>                    	<li class="twomenu"><a href="#">域名查询</a></li>                    	<li class="twomenu"><a href="#">管理域名记录</a>                        	<ul>                            	<span class="arrow"></span>                            	<li><a href="#">域名查询</a></li>                                <li><a href="#">管理域名记录</a></li>                                <li><a href="#">域名查询</a></li>                                <li><a href="#">管理域名记录</a></li>                                <li><a href="#">域名查询</a></li>                            </ul>                        </li>                        <li class="twomenu"><a href="#">域名查询</a></li>                    	<li class="twomenu"><a href="#">管理域名记录</a></li>                        <li class="twomenu"><a href="#">域名查询</a></li>                	</ul>                </li>                <li><a href="#">产品介绍</a></li>                <li><a href="#">新闻资讯</a></li>                <li><a href="#">成功案例</a></li>                <li><a href="#">解决方案</a></li>                <li><a href="#">关于我们</a></li>                <li><a href="#" class="last_nav">客户服务专区</a></li>            </ul>

I want to implement this horizontal secondary menu.
If you write like this
.navfifth ul li {
float: left;
position: relative;
}
li cannot achieve horizontal arrangement.

Reply to discussion (solution)

It is recommended that you use Twitter’s bootstrap framework. Such navigation is easy to solve. URL: http://wrongwaycn.github.com/bootstrap /docs/

<div id="topnavall">    <div id="topnav">      <ul>        <!--<li><a href="#"></a></li>-->        <li><a href="#">关于我们          <!--[if IE 7]><!--></a><!--<![endif]-->          <!--[if lte IE 6]><table><tr><td><![endif]-->          <ul>            <li><a href="#">标准</a></li>            <li><a href="#">教程</a></li>            <li><a href="#">技术文章</a></li>            <li><a href="#">常见问题</a></li>            <li><a href="#">布局教程专题布局教程专题布局教程专题布局教程专题布局教程专题</a></li>            <li><a href="#">CSS菜单</a></li>            <li><a href="#">浏览器兼容</a></li>            <li><a href="#">滚动条相关</a></li>            <li><a href="#">圆角矩形专题</a></li>            <li><a href="#">CSS特效欣赏专题</a></li>          </ul>          <!--[if lte IE 6]></td></tr></table></a><![endif]-->        </li>        <li><a href="#">公司荣誉</a></li>        <!--<li><a href="#"></a></li>-->        <li><a href="#">关于我们关于我们          <!--[if IE 7]><!--></a><!--<![endif]-->          <!--[if lte IE 6]><table><tr><td><![endif]-->          <ul>            <li><a href="#">标准</a></li>            <li><a href="#">教程</a></li>            <li><a href="#">技术文章</a></li>            <li><a href="#">常见问题</a></li>            <li><a href="#">布局教程专题</a></li>            <li><a href="#">CSS菜单</a></li>            <li><a href="#">浏览器兼容</a></li>            <li><a href="#">滚动条相关</a></li>            <li><a href="#">圆角矩形专题</a></li>            <li><a href="#">CSS特效欣赏专题</a></li>          </ul>          <!--[if lte IE 6]></td></tr></table></a><![endif]-->        </li>        <li><a href="#">人才招聘</a></li>        <li><a href="#">联系我们</a></li>      </ul>    </div>      </div>

#topnavall, #topnav, #topnav ul, #topnav ul li, #topnav ul li a { overflow:visible; }#topnavall { float:left; width:900px; padding-top:200px; }#topnav { width:900px; height:20px; background:#f7f7f7; }#topnav ul ul { visibility:hidden; height:auto; position:absolute; background:#FFF; padding:0; margin:0; filter:alpha(opacity=90); -moz-opacity:0.9;opacity:0.9; }#topnav ul ul { width:120px; left:0; top:20px; line-height:normal; }#topnav li { position:relative; z-index:500; float:left; display:block; height:20px; line-height:20px; padding:0 10px; }#topnav table { _margin-top:-5px; }#topnav ul li a { _overflow:hidden; display:inline-block; height:20px; line-height:20px; }#topnav ul li a:hover { border-bottom: solid 0px #000; overflow:visible; }#topnav li:hover ul, #topnav a:hover ul { visibility:visible; line-height:normal; }#topnav ul li ul li { width:auto; float:none; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }#topnav ul li ul li a { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #fafafa; border-bottom-color:#eee; border-top-color:#fafafa; background:#f3f3f3; }#topnav ul li ul li a:hover { overflow:visible; width:auto; height:1%; line-height:120%; display:block; padding:5px; margin:0; float:none; text-decoration:none; text-align:left; color:#666; font-weight:normal; font-size:12px; font-family:Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; border:solid 1px #F90; border-bottom-color:#eee; border-top-color:#fafafa; background:#eee; }

Take a look at an example for yourself. Browser compatibility is also done. If you want to arrange it horizontally just change this #topnav ul li ul li { width:auto; float:left; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }

There is a condition for achieving relative positioning, that is, its previous element cannot be the default positioning. That is to say, changing its parent element to a positioning attribute other than the default positioning can achieve relative positioning

li itself float: left

Create a div inside li to implement position: relative


That is, li only assumes the function of float: left