css中一个div可以同时设置左浮动和相对定位?_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:17:03
原创
2044人浏览过

<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>
登录后复制



想要实现这个横向二级菜单。
如果给这样写
.navfifth ul li {
    float: left;
    position: relative;
}
li就不能实现横向排列。


回复讨论(解决方案)

推荐你使用Twitter的bootstrap框架,这样的导航很好解决的,网址: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; }
登录后复制

一个例子 你自己看下 浏览器兼容也做好了。如果你要横向排列只要 更改这里 #topnav ul li ul li { width:auto; float:left; display:block; margin:0; padding:0; height:auto; background:none; line-height:normal; }

要实现相对定位有一个条件,就是他的前一个元素不能是默认的定位,也就是说把他的父元素改成不是默认的定位属性就可以实现相对定位

li 本身 float:left

li 里面弄个 div  实现 position:relative


也就是  li  完全只承担了  float:left的功能

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号