檬味博客 » 问答 » css+div导航下拉二级菜单竖排效果如何改为横排？

css+div导航下拉二级菜单竖排效果如何改为横排？

让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。下面是简单的代码实现,仅供参考：* {margin:0px; padding:0px;}li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30px; border:1px solid #000; position:re...
css+div导航下拉二级菜单竖排效果如何改为横排？
#dao li dl{
float:left;
margin:0px;
width:90px;
display:none;
} 把这个里面的width:90px的宽度改的足够宽，
再添加
#dao li dl dd{
display:inline
}
这个的目的是把dd这个块级元素变成行内元素；

当然也可以如1楼所说的给dd指定宽度，但只指定宽度还不行，必须设置dd为浮动！
#dao li dl dd{
float:left； width:60px
}2010-05-05
让二级菜单变成一行，只需要在竖排的效果上，让二级菜单都浮动起来，这样就在一行了。
下面是简单的代码实现,仅供参考：
<style>* {margin:0px; padding:0px;}li {list-style:none; width:100px; height:30px; font-size:14px; text-align:left; line-height:30px; border:1px solid #000; position:relative;}.box>li {float:left; position:relative;}.son {position:absolute; top:30px; left:-1px; width:306px;}.son>li {float:left;} /*浮动后，二级菜单就在一行了*/.grason {position:absolute; top:-1px; left:100px;}.son,.grason {display:none;}.active {display:block; background:#FF0;}</style><script>window.onload=function(){var aLi = document.getElementsByTagName('li');for(var i=0;i<aLi.length;i++){ /*给一级菜单加鼠标移入，移出事件，让二级菜单显示，隐藏*/aLi[i].onmouseover = function(){this.className = 'active';var oSon = this.getElementsByTagName('ul')[0];if(oSon){oSon.style.display='block';}};aLi[i].onmouseout = function(){this.className = '';var oSon = this.getElementsByTagName('ul')[0];if(oSon){oSon.style.display='none';}};}};</script></head><body><ul class="box"><li>首页</li><li>公司简介 <!--创建的二级菜单--><ul class="son"> <li>大事件</li><li>领导致辞</li><li>企业文化</li></ul></li><li>联系我们</li><li>产品显示</li></ul></body>2015-09-06
首先说 这段html代码是有问题的。
然后再说，啥叫改成横排？

2010-05-06
增加一个float:left;属性即可。2015-06-16
(需要横排的li标签) li{display:inline;}2019-04-08
应该是宽度问题，你给dd一个宽度值。2010-05-05
mengvlog 阅读 8 次 更新于 2025-07-18 19:56:00 我来答关注问题0
6 个回答檬味博客专题活动
  • anonymous css+div导航下拉二级菜单竖排效果如何改为横排?

    } /*浮动后，二级菜单就在一行了*/.grason {position:absolute; top:-1px; left:100px;}.son,.grason {display:none;}.active {display:block; background:#FF0;}window.onload=function(){var aLi = document.getElementsByTagName('li');for(var i=0;i

  • 深空见闻 HTML网页怎样制作二级下拉菜单,二级滑动菜单

    在HTML中，二级下拉菜单通常通过在标签内部嵌套另一个标签来实现。这样，当鼠标悬停在主菜单项上时，可以显示其子菜单。CSS样式：去除二级菜单之间的margin和padding值，以确保菜单项紧密排列。使用子代选择器（例如div > ul > li）来精确控制样式，避免影响全局。去掉所有标签的默认圆点符...

  • 瑞物评测室 CSS技巧分享:如何用css制作横排二级下拉菜单

    框架好了，那么就该定义页面的title，关键词keyword，和描述description meta charset="UTF-8" content="text/html" http-equiv="content-type" title纯css二级导航下拉菜单/title meta name="keyword" content="搜狗略懂" meta name="descrip...

  • 武汉誉祥科技 css下拉菜单怎么设置

    方法/步骤 1，新建一个html文件，命名为test.html ，用于介绍如何用css改变下拉框select样式。2，在test.html页面，使用div创建一个模块，设置其class属性为select1，用于下面对该类名进行样式布局。3，在div模块内，使用select标签创建一个下拉选择框，下拉列表是三个颜色的选择。4，使用css对div进行样式...

  • 猪八戒网 下拉列表css(下拉列表内容怎么设置)

    3、制作下拉菜单有2种方法：使用jquery方法实现；实现方法：首先需要引入jquery的版本，引用toggle()的方法，点击当前的一级导航。用this方法来进行当前包含的二级菜单隐藏与显示。4、通过代码select设置一个下拉列表菜单，option设计下拉菜单下面的值来达成效果。5、纯CSS的下拉菜单，我理解的意思就是li标签...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部