                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /商城分類導(dǎo)航效果

如圖，找了半晌都找不到錯誤，求助

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
? ? ? ?"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
? ?<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
? ?<title></title>
? ?<style type="text/css">
? ? ? ?body
{
? ? ? ? ? ?padding:0;
? ? ? ? ? ?font-size:10pt;
? ? ? ?}
? ? ? ?.topmenu{

? ? ? ? ? ?display:block;
? ? ? ? ? ?width:220px;
? ? ? ? ? ?border:2px solid #e4393c;
? ? ? ? ? ?margin:0;
? ? ? ? ? ?padding:0;
? ? ? ?}
? ? ? ?.toptitle{
? ? ? ? ? ?height:40px;
? ? ? ? ? ?line-height:40px;
? ? ? ? ? ?text-align:left;
? ? ? ? ? ?font-size:11pt;
? ? ? ? ? ?font-weight:bold;
? ? ? ? ? ?color:White;
? ? ? ? ? ?background:#e4393c;
? ? ? ? ? ?padding-left:20px;
? ? ? ?}
? ? ? ?.topmenu li{
? ? ? ? ? ?height:30px;
? ? ? ? ? ?line-height:30px;
? ? ? ? ? ?font-size:11pt;
? ? ? ? ? ?list-style-type:none;/*去掉list前面的小圓點,其他的瀏覽器已經(jīng)沒有小圓點了，ie有*/
text-align:left;
? ? ? ? ? ?padding-left:8px;
? ? ? ? ? ?z-index:3;
? ? ? ? ? ?background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
? ? ? ? ? ?background-repeat:no-repeat;
? ? ? ? ? ?background-position:right;/*可簡寫為：background:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) no-repeat right;*/
}
? ? ? ?.topmenu li a{
? ? ? ? ? ?text-decoration:none;
? ? ? ? ? ?color:#313131;
? ? ? ?}
? ? ? ?.topmenu li a:hover{
? ? ? ? ? ?text-decoration:underline;
? ? ? ? ? ?font-weight:bold;
? ? ? ? ? ?color:#e4393c;
? ? ? ?}
? ? ? ?.topmenu li:hover{
? ? ? ? ? ?border:1px solid #DDD;
? ? ? ? ? ?border-right:0;
? ? ? ? ? ?box-shadow:0 0 8px #DDD;
? ? ? ? ? ?-moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
-webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/
background-image:none;
? ? ? ?}
? ? ? ?.submenu{
? ? ? ? ? ?display:none;
? ? ? ? ? ?width:715px;
? ? ? ? ? ?left:220px;
? ? ? ? ? ?position:absolute;
? ? ? ? ? ?top:40px;
? ? ? ? ? ?border:1px solid #DDD;
? ? ? ? ? ?z-index:4;
? ? ? ? ? ?color:white;
? ? ? ? ? ?box-shadow:0 0 8px #DDD;
? ? ? ? ? ?-moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
-webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/

}
? ? ? ?.leftdiv
{
? ? ? ? ? ?background:gray;
? ? ? ? ? ?float:left;
? ? ? ? ? ?width:490px;
? ? ? ? ? ?margin:5px;
? ? ? ?}
? ? ? ?.rightdiv{
? ? ? ? ? ?background:blue;
? ? ? ? ? ?float:left;
? ? ? ? ? ?width:200px;
? ? ? ? ? ?margin:5px;
? ? ? ?}
? ? ? ?.topmenu li:hover .submenu
{
? ? ? ? ? ?display: block;
? ? ? ?}
? ?</style>
</head>
<body>
<ul class="topmenu">
? ?<div class="toptitle">
? ? ? ?全部商品分類
? ?</div>
? ?<li><a href="#">圖書、音像、數(shù)字商品</a>
? <div class=submenu">
? ? ? ?<div class="leftdiv">
? ? ? ? ? ?左側(cè)二級分類<br />
? ? ? ? ? ?左側(cè)二級分類<br />
? ? ? ? ? ?左側(cè)二級分類<br />
? ? ? ? ? ?左側(cè)二級分類<br />
? ? ? ? ? ?左側(cè)二級分類<br />
? ? ? ?</div>
? ? ? ?<div class="rightdiv">右側(cè)推薦品牌</div>
? ?</div></li>
? ?<li><a href="#">家用電器</a></li>
? ?<li><a href="#">手機、數(shù)碼</a></li>
? ?<li><a href="#">電腦、辦公</a></li>
? ?<li><a href="#">家居、家具、家裝、廚具</a></li>
? ?<li><a href="#">服飾內(nèi)衣、珠寶首飾</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>
? ?<li><a href="#">食品飲料、酒類、生鮮</a></li>
? ?<li><a href="#">營養(yǎng)保健</a></li>

</ul>
</body>
</html>

白二的詩

2016-11-29

源自：商城分類導(dǎo)航效果 2-3

關(guān)注問題我要回答

610

操作

收起

2 回答

慕粉18221508921 回答被采納 +3 積分
2016-11-29

<div class="submenu">//忘了加引號

放到sublime text 3 里，會有提示，直接就改出來了，對了，我是把html,css,js的hint都裝了，所以找錯比較容易

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

白二的詩提問者

非常感謝！

2016-11-30 回復(fù) 有任何疑惑可以回復(fù)我~

#2

白二的詩提問者

我用的webstorm 不知道為啥此處沒有代碼錯誤提示

2016-11-30 回復(fù) 有任何疑惑可以回復(fù)我~

#3

慕粉18221508921 回復(fù) 白二的詩提問者

哈哈哈，sublime的hint都是插件，不知道webstorm是不是也要裝插件，要不要換sublime text3 啊，哈哈

2016-11-30 回復(fù) 有任何疑惑可以回復(fù)我~

查看1條回復(fù)

白二的詩提問者
2016-12-01

回復(fù) 慕粉18221508921：這個要是也能檢測出來真的服了（懸浮層上的字不知道為啥是透明的，應(yīng)該是哪敲錯了），像我這種經(jīng)常犯錯的小白就應(yīng)該用一個糾錯功能比較強大的工具。幫我看看吧，謝啦

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
??????? "http://www.w3.org/TR/html4/strict.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">
??????? body
??????? {
??????????? padding:0;
??????????? font-size:10pt;
??????? }
??????? .topmenu{

??????????? display:block;
??????????? width:220px;
??????????? border:2px solid #e4393c;
??????????? margin:0;
??????????? padding:0;
??????? }
??????? .toptitle{
??????????? height:40px;
??????????? line-height:40px;
??????????? text-align:left;
??????????? font-size:11pt;
??????????? font-weight:bold;
??????????? color:White;
??????????? background:#e4393c;
??????????? padding-left:20px;
??????? }
??????? .topmenu li{
??????????? height:30px;
??????????? line-height:30px;
??????????? font-size:11pt;
??????????? list-style-type:none;/*去掉list前面的小圓點,其他的瀏覽器已經(jīng)沒有小圓點了，ie有*/
??????????? text-align:left;
??????????? padding-left:8px;
??????????? z-index:3;
??????????? background-image:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg);
??????????? background-repeat:no-repeat;
??????????? background-position:right;/*可簡寫為：background:url(http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg) no-repeat right;*/
??????? }
??????? .topmenu li a{
??????????? text-decoration:none;
??????????? color:#313131;
??????? }
??????? .topmenu li a:hover{
??????????? text-decoration:underline;
??????????? font-weight:bold;
??????????? color:#e4393c;
??????? }
??????? .topmenu li:hover{
??????????? border:1px solid #DDD;
??????????? border-right:0;
??????????? box-shadow:0 0 8px #DDD;
??????????? -moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
??????????? -webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/
??????????? background-image:none;
??????? }
??????? .submenu{
??????????? display:none;
??????????? width:715px;
??????????? left:220px;
??????????? position:absolute;
??????????? top:40px;
??????????? border:1px solid #DDD;
??????????? z-index:4;
??????????? color:white;
??????????? box-shadow:0 0 8px #DDD;
??????????? -moz-box-shadow:0 0 8px #DDD;/*兼容firefox*/
??????????? -webkit-box-shadow:0 0 8px #DDD;/*兼容雇谷歌*/

??????? }
??????? .leftdiv
??????? {
??????????? float:left;
??????????? width:490px;
??????????? margin:5px;

??????? }
??????? .rightdiv{
??????????? background:blue;
??????????? float:left;
??????????? width:200px;
??????????? margin:5px;
??????? }
??????? .topmenu li:hover .submenu
??????? {
??????????? display: block;
??????? }
??????? .topmenu li:hover span
??????? {
?????????? background:white;
??????????? display:inline-block;
??????????? z-index:20;
??????????? width:20px;
??????????? height:30px;
??????????? float:right;
??????????? position:relative;
??????? }
??? </style>
</head>
<body>
<ul>
??? <div>
??????? 全部商品分類
??? </div>
??? <li><a href="#">圖書、音像、數(shù)字商品</a><span></span>
?? <div>
??????? <div>
??????????? 左側(cè)二級分類<br />
??????????? 左側(cè)二級分類<br />
??????????? 左側(cè)二級分類<br />
??????????? 左側(cè)二級分類<br />
??????????? 左側(cè)二級分類<br />
??????? </div>
??????? <div>右側(cè)推薦品牌</div>
??? </div></li>
??? <li><a href="#">家用電器</a></li>
??? <li><a href="#">手機、數(shù)碼</a></li>
??? <li><a href="#">電腦、辦公</a></li>
??? <li><a href="#">家居、家具、家裝、廚具</a></li>
??? <li><a href="#">服飾內(nèi)衣、珠寶首飾</a></li>
??? <li><a href="#">個護化妝</a></li>
??? <li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
??? <li><a href="#">鞋靴、箱包、鐘表、奢侈品</a></li>
??? <li><a href="#">運動戶外</a></li>