2017-12-26 7 views
0

こんにちは私は自分のウェブサイトのネストされたドロップダウンメニューを作成しようとしていますが、私は各サブジェクトのオプションにコードを書くときに起こるこのエラーに遭遇しました。私はそれを修正する方法を知らない。私はこれを解決する方法についてはわからないし、どんな助けも大変感謝しています。 ネストされたドロップダウンメニューのエラー

html,body{ 
 
\t margin:0; 
 
\t padding:0; 
 
\t height:100%; 
 
\t width:100%; 
 
\t overflow: hidden; 
 

 
} 
 
body{ 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t font-family: 'Lato', Arial, sans-serif; 
 
} 
 

 
    #banner-container{ 
 
\t width: 80%; 
 
\t height: 100%; 
 
\t margin: auto; 
 
\t overflow: hidden; 
 
\t 
 
} 
 

 
ul{ 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
ul li{ 
 
\t text-align: center; 
 
} 
 

 
ul li ul li{ 
 
\t display:none; 
 
} 
 

 
ul li:hover ul li{ 
 
\t display: block; 
 
} 
 
header{ 
 
\t background-color: #595959; 
 
\t color: #fff; 
 
\t padding-top: 30px; 
 
\t min-height: 70px; 
 
\t border-bottom: 3px solid #FFD700; 
 
} 
 
header a{ 
 
\t color: #fff; 
 
\t text-decoration: none; 
 
\t text-transform: uppercase; 
 
\t font-size: 16px; 
 
} 
 

 
header li{ 
 
\t float: left; 
 
\t display: inline; 
 
\t padding: 0 20px; 
 
} 
 

 
header .banner{ 
 
\t float: left; 
 
} 
 

 
header .banner h1{ 
 
\t margin: 0; 
 
} 
 

 
header nav{ 
 
\t float: right; 
 
\t margin-top: 10px; 
 
} 
 

 
header a:hover{ 
 
\t color: #ccc; 
 
\t font-weight: bold; 
 
}
<!DOCTYPE html> 
 

 
    </head> 
 
<body> 
 
\t <header> 
 
\t \t <div id="banner-container"> 
 
\t \t \t <div class="banner"> 
 
\t \t \t \t <h1>A-Level</h1> 
 
\t \t \t </div> 
 
\t \t \t <nav> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="home.php">Home</a></li> 
 
\t \t \t \t \t <li><a href="#">A-level</a> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li><a href="#">Maths</a> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">PLC</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">Revision</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">Exam Papers</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li><a href="#">Physics</a> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">PLC</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">Revision</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">Exam Papers</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t <li><a href="#">Computer Science</a> 
 
\t \t \t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">PLC</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">Revision</a></li> 
 
\t \t \t \t \t \t \t \t \t <li><a href="#">Exam Papers</a></li> 
 
\t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t \t </li> \t 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="index.php">TimeTable</a></li> 
 
\t \t \t \t \t <li><a href="logout.php">Logout</a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </div> 
 
\t </header> 
 
</body>

答えて

0

あなたの問題これはまた、あなたのサブナビゲーション・アイテムに適用され、float: left属性は、ヘッダの全幅にわたって手配するためにそれらを強制的に

header li{ 
    float: left; 
    display: inline; 
    padding: 0 20px; 
} 

ルールから来ています。 float:none;をルールul li ul liに追加するとこの問題は解決しますが、最大幅を追加することも考えられますので、レイアウトは一貫しています。

関連する問題