• 所有问题

    • css编写的简单的二级菜单怎么横向排列？

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head>

    <body>

    <style>
    .c li{float:left; width:200px;}
    .c {list-style-type:none;}
    .c li ul{display:none}
    .c li:hover ul{display:block}
    .c li:hover ul li ul{display:none}
    .c li ul li:hover ul{display:block}
    </style>
    <ul class="c">
    <li>
    <a href="">产品展示</a>
    <ul style="list-style:none">
    <li>能源利用系统</li>
    <li>资源回收系统</li>
    <li>热环境系统</li>
    <li>光环境系统</li>
    </ul>
    </li>
    </ul>
    </body>
    </html>

    举报该问题
    推荐答案   推荐于2016-07-31
    这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> menu </TITLE>
    </HEAD>
    <style>
    body{
    padding-top:200px;
    text-align:center;
    font-size:13px;
    }
    #content{
    margin:0 auto;
    text-align:left;
    width:720px;
    background:orange;
    background-color:black;
    }
    ul{
    margin-top:1px;
    list-style:none;
    }
    #father li{
    float:left;
    position:relative;
    margin-right:10px;
    width:120px;
    text-align:center;
    border:1px solid black;
    border-bottom:none;
    }
    #father li a:link,#father li a:visited{
    line-height:30px;
    color:darkred;
    font-weight:bold;
    }
    #father li ul *{
    float:none;
    margin-right:0px;
    padding:0;
    color:none;
    width:90px;
    background-color:orange;
    border:none;
    }
    .child{
    position:absolute ;
    top:29px;
    right:0px;
    display:none;
    }

    #father li ul li a:link,#father li ul li a:visited{
    margin:1px;
    color:blue;
    text-decoration:none;
    font-weight:normal;
    line-height:20px;
    }
    #father li ul li a:hover{
    background-color:white;
    }

    </style>

    <script>
    function showMenu(emt,id1,id2){
    document.getElementById(id1).style.textDecoration = "none";
    document.getElementById(id1).style.color = "white";
    document.getElementById(id2).style.display = "block";
    emt.style.backgroundColor = "orange";
    emt.style.borderColor = "white";
    }
    function hiddenMenu(emt,id1,id2){
    document.getElementById(id1).style.textDecoration = "underline";
    document.getElementById(id1).style.color = "darkred";
    document.getElementById(id2).style.display = "none";
    emt.style.backgroundColor = "black";
    emt.style.borderColor = "black";
    }
    </script>

    <BODY>
    </table>
    <div id="content">
    <ul id="father">
    <li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')">
    <a id="a1" href="#">主页</a>
    <ul id="ul1" class="child">
    <li><a href="#">文字测试</a></li>
    <li><a href="#">使用中文字符</a></li>
    <li><a href="#">你看可以吗</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
    </ul>
    </li>
    <li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')">
    <a id="a2" href="#">程序设计</a>
    <ul id="ul2" class="child">
    <li><a href="#">JAVA</a></li>
    <li><a href="#">C/C++</a></li>
    <li><a href="#">C#.NET</a></li>
    <li><a href="#">游戏开发</a></li>
    <li><a href="#">汇编</a></li>
    </ul>
    </li>
    <li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')">
    <a id="a3" href="#">网页技术</a>
    <ul id="ul3" class="child">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
    <li><a href="#">XML</a></li>
    <li><a href="#">ASP</a></li>
    <li><a href="#">JSP</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Perl</a></li>
    </ul>
    </li>
    <li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')">
    <a id="a4" href="#">动态网页</a>
    <ul id="ul4" class="child">
    <li><a href="#">ASP</a></li>
    <li><a href="#">JSP</a></li>
    <li><a href="#">PHP</a></li>
    <li><a href="#">Perl</a></li>
    </ul>
    </li>
    <li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')">
    <a id="a5" href="#">关于我</a>
    <ul id="ul5" class="child">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    </ul>
    </li>
    </ul>
    <div>
    </BODY>
    </HTML>
    温馨提示：答案为网友推荐，仅供参考
    其他回答
    第1个回答  2011-08-17
    第二个ul加上position:absolute; 第二个ul里的li加上float:left
    第2个回答  推荐于2016-06-05
    首页打开dreamweaver或其它编辑器，创建一个名为nav的导航菜单
    <div class="nav">
    <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>
    </ul>
    </div>

    现在为nav添加样式,首先去掉默认的margin和padding，再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。接下来再添加适当的样式（根据实际需要添加）进行美化，如一下样式：

    <style type="text/css">
    * { margin:0; padding:0;}
    ul, li { list-style:none;}
    a { text-decoration:none;}
    .nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
    .nav ul li { float:left;}
    .nav
    ul li a
    { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px
    solid #ccc; background:#eee; color:#666;}
    .nav ul li a:hover{ color:#f00; }
    </style>

    像这样，一个菜单横向菜单就建好了，下面给栏目一，栏目二，栏目三，添加二级下拉菜单
    <div class="nav">
    <ul>
    <li><a href="#">栏目一</a>
    <ul>
    <li><a href="#">二级栏目</a></li>
    <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="#">二级栏目</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="#">二级栏目</a></li>
    <li><a href="#">二级栏目</a></li>
    <li><a href="#">二级栏目</a></li>
    <li><a href="#">二级栏目</a></li>
    </ul>
    </li>
    <li><a href="#">栏目四</a></li>
    <li><a href="#">栏目五</a></li>
    </ul>
    </div>

    添加完二级栏目后，现在开始添加css样式，首先给<li>标签下的<ul>标签添加相对定位，再去除之下<li>标签的做浮动样式，再适当修改<a>标签，如一下样式：
    .nav ul li ul { position:absolute;}
    .nav ul li ul li { float:none;}
    .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}

    接下来隐藏掉二级下来菜单，并给它添加鼠标滑动效果，使得当鼠标滑动到主栏目时，二级下来菜单显示，样式如下：
    .nav ul li ul { position:absolute; display:none;}
    .nav ul li ul li { float:none;}
    .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
    .nav ul li:hover ul{ display:block; }

    至此，横向二级下拉菜单就制作完成了，这里附加上全部代码
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>横排二级下拉菜单</title>
    <style type="text/css">
    * { margin:0; padding:0;}
    ul, li { list-style:none;}
    a { text-decoration:none;}
    .nav { border:2px solid #ccc; border-right:none; overflow:hidden; float:left; margin:100px 0 0 300px;}
    .nav ul li { float:left;}
    .nav
    ul li a
    { width:120px; height:40px; text-align:center; line-height:40px; display:block; border-right:2px
    solid #ccc; background:#eee; color:#666;}
    .nav ul li a:hover{ color:#f00; }
    .nav ul li ul { position:absolute; display:none;}
    .nav ul li ul li { float:none;}
    .nav ul li ul li a { border-right:none; border-top:1px dotted #ccc; background:#f5f5f5;}
    .nav ul li:hover ul{ display:block; }
    </style>
    </head>
    <body>
    <div class="nav">
    <ul>
    <li><a href="#">栏目一</a>
    <ul>
    <li><a href="#">二级栏目</a></li>
    <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="#">二级栏目</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="#">二级栏目</a></li>
    <li><a href="#">二级栏目</a></li>
    <li><a href="#">二级栏目</a></li>
    <li><a href="#">二级栏目</a></li>
    </ul>
    </li>
    <li><a href="#">栏目四</a></li>
    <li><a href="#">栏目五</a></li>
    </ul>
    </div>
    </body>
    </html>
    相似回答
    css如何让div横向排列答：可以使用弹性布局，display: flex 就可以让div横排，默认布局轴方向就是横向，justify-content: space-between可以是div平均分布在水平轴上。
    大家正在搜
    横向菜单和竖向菜单的区别css列表横向排列html二级菜单横向css横向排列ul横向排列css横向菜单的特征横向菜单横向滑动菜单element横向菜单
    相关问题
    CSS+DIV可以写出第二级子菜单也是横向的横向导航菜单?
    CSS，HTML怎么让竖向一级菜单生成横向二级菜单?
    css+div导航下拉二级菜单竖排效果如何改为横排？
    怎么样制作二级横向导航菜单（二级菜单横向展开），最好只用cs...
    如何用css制作横排二级下拉菜单
    DIV+CSS里的横向菜单怎么弄啊？
    html 二级导航 怎么让菜单横排
    帮忙为以下代码设置css，实现下拉菜单，一级和二级菜单都是横...