协助边境及边境事务；鼠标悬停css

我试图让旁白看起来像这样：

当鼠标悬停在其上时，应显示如下图：

守则：

<aside>
    <div>Hardware
        <span> 
            Printer, DVD, CR-ROM, mouse, keyboard, scanner, router, modem, sound card 
        </span>
    </div>
    <div>
        Software
        <span> 
            Adobe Reader, Microsoft Word, Eclipse IDE, Skype, McAfee Antivirus, BitComet, RealPlayer 
        </span>
    </div>       
</aside>

硬件
打印机、DVD、CR-ROM、鼠标、键盘、扫描仪、路由器、调制解调器、声卡
软件
Adobe Reader、Microsoft Word、Eclipse IDE、Skype、McAfee Antivirus、BitComet、RealPlayer

但是我写的东西给了我一个不同的结果，这是我的代码：

aside {
    float:left;
    margin: 30px 50px 30px 20px;
    background-color:#f0f8ff;
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    border:dotted pink;
    text-align:center;
}

div{
    width:80px;
    padding-top:10px;
    padding-bottom:10px;
}

div:hover{
   color:#fff;
   background-color:darkblue;
   width:300px;
   text-align:left;
   padding-left:6px;
   padding-top:20px;
}

aside div span{
    display:none;     
}   

aside div:hover span{
    display:block;
    padding-left:80px;
    padding-bottom:8px;
    border:none;
}

</style>

放在一边{
浮动：左；
利润率：30px 50px 30px 20px；
背景色：#f0f8ff；
显示：块；
填充顶部：10px；
垫底：10px；
边框：点粉红色；
文本对齐：居中；
}
div{
宽度：80px；
填充顶部：10px；
垫底：10px；
}
div:悬停{
颜色：#fff；
背景色：深蓝色；
宽度：300px；
文本对齐：左对齐；
左侧填充：6px；
填充顶部：20px；
}
侧边横隔距{
显示：无；
}   
侧边div：悬停跨度{
显示：块；
左侧填充：80px；
垫底：8px；
边界：无；
}

---

有人能帮我修改代码吗？

试着指定侧边的宽度（您也可以为div添加一个最小高度，使其与您的第一张图像相似）：

---

示例：

只需添加位置：绝对；对你的div：像这样悬停

   div:hover{

 color:#fff;
 position:absolute;
 background-color:darkblue;
 width:300px;
 text-align:left;
 padding-left:6px;
 padding-top:20px;

 }

---

它与我所附的图不一样！请注意，您的第二个链接已失效，并且没有实际链接到任何图片。

   div:hover{

 color:#fff;
 position:absolute;
 background-color:darkblue;
 width:300px;
 text-align:left;
 padding-left:6px;
 padding-top:20px;

 }