收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 980|回复: 2

[CSS] CSS导航样式问题求助,为什么鼠标移上去导航,后面文字会移动?

[复制链接]
发表于 2016-10-7 18:19:58 | 显示全部楼层 |阅读模式


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css打造绿色横向二级导航菜单代码</title>
<style>
body {font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,textarea,blockquote,emBED{padding:0; margin:0;}
li{list-style-type:none;}
#menu {width:960px;margin:30px auto 0px;height:39px;background:url(images/daohang.jpg) no-repeat;}
#menu li {float:left;width:109px;line-height:39px;text-align:center;position:relative;border:none;}
#menu li:hover {background:#f4f4f4 no-repeat right top; border:1px solid #0c87c0 }
#menu li a {font-size:14px; color: #EEEEEE;display:block;outline:0;text-decoration:none; }
#menu li:hover a {color:#161616;}
#menu li .drop {background:#0c87c0 no-repeat right 14px;margin-right:6px;}
#menu li:hover .drop {background:#FFF right 14px; width:109px}
#menu li:hover .nodrop {height:37px;line-height:37px;background:#FFF}
#menu li:hover .dropdown_1column {left:0px;top:38px;}
.col_1{display:inline;float: left;position: relative;margin-left: 5px;margin-right: 5px;width:130px;}
.dropdown_1column{margin:0px auto;float:left;position:absolute;left:-999em;text-align:left;border:1px solid #0c87c0;border-top:none;background:#F4F4F4;width: 140px;}
#menu li:hover div a {font-size:12px;color:#444;}
#menu li:hover div a:hover{color:#0c87c0;}
#menu li ul {list-style:none;padding:10px 5px;margin:0;}
#menu li ul li {font-size:12px;        line-height:26px;position:relative;padding:0;margin:0;        float:none;        text-align:left;width:130px;}
#menu li ul li a{background:url(images/1212.png) no-repeat left 9px;padding-left:24px;}
#menu li ul li:hover {background:none;border:none;padding:0;margin:0;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#"  class="nodrop">首 页</a></li>
<li><a href="#" class="drop">关于我们</a>   
                <div class="dropdown_1column">        
                <div class="col_1">               
                    <ul class="simple">
                        <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>                        
                </div>               
                </div>        
        </li>
<li><a href="#" class="drop">新闻中心</a>   
                <div class="dropdown_1column">        
                <div class="col_1">               
                    <ul class="simple">
                        <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="#">新闻中心</a></li>
                    </ul>                        
                </div>               
                </div>        
  </li>
   <li><a href="#" class="drop">公司图片</a>   
                <div class="dropdown_1column">        
                <div class="col_1">               
                    <ul class="simple">
                        <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="#">公司图片</a></li>
                        <li><a href="#">公司图片</a></li>
                    </ul>                        
                </div>               
                </div>        
  </li>
        <li><a href="#" class="drop">产品中心</a>   
                <div class="dropdown_1column">        
                <div class="col_1">               
                    <ul class="simple">
                       <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="#">产品中心</a></li>
                    </ul>                        
                </div>               
        </div>        
        </li>
   <li><a href="#" class="nodrop">新品发布</a></li>
   <li><a href="#" class="nodrop">联系我们</a></li>
</ul>
</div>
</body>
</html>
 楼主| 发表于 2016-10-7 18:53:18 | 显示全部楼层
求大家帮忙解决下
回复 支持 反对

使用道具 举报

发表于 2016-10-11 19:26:47 | 显示全部楼层
边框的问题,
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-27 00:01 , Processed in 0.078903 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表