求助！想设置aside做下拉导航但是不知道为什么显示不出来，请大家帮我修改一下，谢谢！

qq_45039499 2020-05-31 01:02:14

<body>

<div class="image-box">
<img src="img/主页图.jpg"/>
<nav>
<ul>
<li class="main-nav">
<a href="javascript:;">
<span>
<strong><li><a href="index.html">首页</a></li></strong>
<strong><li><a href="#">动漫资料</a></li></strong>
<strong><li><a href="#">角色介绍</a></li></strong>
<strong><li><a href="#">帐号管理</a></li></strong>
<strong><li><a href="#">观众互动</a></li></strong>
</span>
</a>
<aside>
<ol class="left1">
<li></li>
<li></li>
</ol>
<ol class="left2">
<li>首要人物</li>
<li>次要人物</li>
</ol>
<ol class="left3"></ol>
<li>寻找客服</li>
<li>用户协议</li>
<ol class="left4">
<li></li>
<li></li>
</ol>
</aside>
</li>
</ul>
</nav>
</div>

</body>

body,ul,li,ol,p,h1,img{margin:0;padding:0;border:0;list-style: none;}
a:hover{color:#CCC;}
input,textarea{ outline:none;}
.image-box{
width:100%;
hight:1000px;
position: relative;}
.image-box img{
width:100%;
position:absolute;
min-width: 1280px;}
.image-box nav{
width:100%;
height:45px;
background: rgba(0,0,0,0.2);
z-index: 1000;
position: absolute;
margin:12px;
border-bottom: 1px solid #FFF;}
.image-box nav ul{
width:1030px;
height:10px;
margin:0 auto;
position:relative;}
.image-box nav ul li{
float:left;
color:#FFF;
margin-right: 12%;}
.main-nav:hover aside{display:block;}
.main-nav a{
display: block;
height:200px;
line-height: 200px;
font-size: 40px;
color:#FFF;
text-decoration:none;}
.image-box nav ul main-nav span{margin:0 10px;}
.image-box aside{
display: none;
width:380px;
height:560px;
background: rgba(0,0,0,0.2);
position: absolute;
top:10px;
z-index: 1500;
color:#FFF;}
.image-box aside ol{
width:155px;
float: left;}
.image-box aside ol li{
width:155px;
height:25px;
line-height: 25px;
cursor: pointer;
font-family: "宋体";}
.image-box aside ol li:hover{color:#FFF;}

...全文

151 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

潇湘忆梦 2020-05-31

打赏
举报

简单的一个，你看看


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>11</title>
    <!-- 引入样式 -->
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #nav {
            background-color: #eeeeee;
            width: 600px;
            height: 40px;
            margin: 0 auto;
        }

        ul {
            list-style: none;
        }

            ul li {
                float: left;
                line-height: 40px;
                text-align: center;
                position: relative;
            }

        a {
            text-decoration: none;
            color: black;
            display: block;
            padding: 0 10px;
        }

            a:hover {
                color: aliceblue;
                background-color: #666666;
            }

        ul li ul li {
            float: none;
            background-color: #eeeeee;
            margin-top: 2px;
        }

        ul li ul {
            position: absolute;
            left: 0px;
            top: 40px;
            display: none;
        }

            ul li ul li a:hover {
                color: aliceblue;
                background-color: darkgray;
            }

        ul li:hover ul {
            display: block;
        }
    </style>
</head>
<body>
    <div class="image-box">
        <img src="img/主页图.jpg" />
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">课程选项</a>
                    <ul>
                        <li><a href="#">C#</a></li>
                        <li><a href="#">Jq</a></li>
                        <li><a href="#">Node.js</a></li>
                    </ul>
                </li>
                <li><a href="#">学习中心</a></li>
                <li><a href="#">经典案例</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
        </nav>
    </div>
</body>
</html>

head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里 body：页面的主体，正文，其内容都会呈现在网页中 title：网页的标题 meta：主要用于设置网页内容 style：用于使用CSS样式表 h1-h6...

我一点都不知道。 74. can she be a driver? 她可能是个司机吗？ 75. yes, i think so. 是的，我认为是。六、 About Introduction 关于介绍 76. what's your name? 你叫什么名字？ 77. ...

常用职位英文译名超级短句成语集锦打开话匣子PC电脑词汇一百个绝佳句型李阳英语365句托福听力常用短语校园英语迷你惯用语洋话连篇至理名言English 900 英语九百句第一册一、 Greetings 问候语 1.... 我是

求助编辑百科名片 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web...

dt 定义项装图片 (可以装任意元素)dd 描述项装文本 (可以装任意元素，包括行内与块元素)form 表单元素做数据交互table 表格做数据展示address 倾斜地址总结: 块元素独占一行支持width 和 height。