2017-01-19 29 views
1

私はこのコードを持っていて動作しません。 メインメニューの上にカーソルを置くと、サブメニューが表示されません。 色の変化はうまくいくようですが、2番目のリストはホバー上のメインメニューの下に表示されません。 私は問題を見つけることができない... ホバー上のナビゲーションバー - CSS

<html> 
 
    <head> 
 
    <title>test</title> 
 
    <style type="text/css"> 
 
    #navigationbar { 
 
    position: relative; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 30px; 
 
    width: 90%; 
 
    } 
 
    #navigationbar ul { 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    list-style-type: none; 
 
    background-color: #eeeeee; 
 
    overflow: visible; 
 
    } 
 
    #navigationbar ul>li { 
 
    display: block; 
 
    float: left; 
 
    height: auto; 
 
    width: 130px; 
 
    } 
 
    
 
    #navigationbar li>a { 
 
    display: block; 
 
    height: 100%; 
 
    padding: 0 0 0 10px; 
 
    width: 115px; 
 
    border-right: 1px black solid; 
 
    font-size: 17px; 
 
    font-family: sans-serif; 
 
    background-color: #eeeeee; 
 
    color: #5d5636; 
 
    line-height: 30px; 
 
    text-decoration: none; 
 
    } 
 
    #navigationbar ul ul { 
 
    margin-top: 2px; 
 
    display: none; 
 
    width: 160px; 
 
    height: auto; 
 
    background-color: #dddddd; 
 
    position: static; 
 
    border: 1px #666666 solid; 
 
    } 
 
    
 
    #navigationbar ul ul li { 
 
    position: relative; 
 
    float: none; 
 
    display: block; 
 
    height: 28px; 
 
    width: 100%; 
 
    border: none; 
 
    } 
 
    #navigationbar ul ul li>a { 
 
    height: 100%; 
 
    width: 96%; 
 
    padding: 0 0 0 4%; 
 
    line-height: 28px; 
 
    background-color: transparent; 
 
    border: none; 
 
    color: #000000; 
 
    font-size 12px; 
 
    font-style: normal; 
 
    } 
 
    #navigationbar li:hover > a { 
 
    color: #220000; 
 
    background-color: #eeeabe; 
 
    } 
 
    #navigationbar li:hover > ul { 
 
    display: block; 
 
    } 
 
    
 
    </style> 
 
    </head> 
 
    <body> 
 
    <h1>Nagłówek</h1> 
 
    <nav id="navigationbar"> 
 
    <ul> 
 
    <li><a href="/home.html">Home</a></li> 
 
    <li><a href="/AAAtest.html">A</a></li> 
 
    \t <ul> 
 
    \t <li><a href=/a.html>aaaaa</a></li> 
 
    \t <li><a href=/b.html>bbbbb</a></li> 
 
    \t <li><a href=/c.html>ccccc</a></li> 
 
    \t </ul> 
 
    <li><a href="/BBBtest.html">B</a></li> 
 
    \t <ul> 
 
    \t <li><a href=/aa.html>AAAA</a></li> 
 
    \t <li><a href=/bb.html>BBBBB</a></li> 
 
    \t <li><a href=/cc.html>CCCCC</a></li> 
 
    \t </ul> 
 
    </ul> 
 
    </nav> 
 
    </body> 
 
    </html>

感謝を助けてください。

答えて

1

あなたは間違った場所

<html> 
 

 
<head> 
 
    <title>test</title> 
 
    <style type="text/css"> 
 
    #navigationbar { 
 
     position: relative; 
 
     padding: 0; 
 
     margin: 0; 
 
     height: 30px; 
 
     width: 90%; 
 
    } 
 
    #navigationbar ul { 
 
     position: absolute; 
 
     margin: 0; 
 
     padding: 0; 
 
     height: 100%; 
 
     width: 100%; 
 
     list-style-type: none; 
 
     background-color: #eeeeee; 
 
     overflow: visible; 
 
    } 
 
    #navigationbar ul>li { 
 
     display: block; 
 
     float: left; 
 
     height: auto; 
 
     width: 130px; 
 
    } 
 
    #navigationbar li>a { 
 
     display: block; 
 
     height: 100%; 
 
     padding: 0 0 0 10px; 
 
     width: 115px; 
 
     border-right: 1px black solid; 
 
     font-size: 17px; 
 
     font-family: sans-serif; 
 
     background-color: #eeeeee; 
 
     color: #5d5636; 
 
     line-height: 30px; 
 
     text-decoration: none; 
 
    } 
 
    #navigationbar ul ul { 
 
     margin-top: 2px; 
 
     display: none; 
 
     width: 160px; 
 
     height: auto; 
 
     background-color: #dddddd; 
 
     border: 1px #666666 solid; 
 
    } 
 
    #navigationbar ul ul li { 
 
     position: relative; 
 
     float: none; 
 
     display: block; 
 
     height: 28px; 
 
     width: 100%; 
 
     border: none; 
 
    } 
 
    #navigationbar ul ul li>a { 
 
     height: 100%; 
 
     width: 96%; 
 
     padding: 0 0 0 4%; 
 
     line-height: 28px; 
 
     background-color: transparent; 
 
     border: none; 
 
     color: #000000; 
 
     font-size 12px; 
 
     font-style: normal; 
 
    } 
 
    #navigationbar li:hover > a { 
 
     color: #220000; 
 
     background-color: #eeeabe; 
 
    } 
 
    #navigationbar li:hover > ul { 
 
     display: block; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <h1>Nagłówek</h1> 
 
    <nav id="navigationbar"> 
 
    <ul> 
 
     <li><a href="/home.html">Home</a> 
 
     </li> 
 
     <li><a href="/AAAtest.html">A</a> 
 
     <ul> 
 
      <li><a href=/a.html>aaaaa</a> 
 
      </li> 
 
      <li><a href=/b.html>bbbbb</a> 
 
      </li> 
 
      <li><a href=/c.html>ccccc</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="/BBBtest.html">B</a> 
 
     <ul> 
 
      <li><a href=/aa.html>AAAA</a> 
 
      </li> 
 
      <li><a href=/bb.html>BBBBB</a> 
 
      </li> 
 
      <li><a href=/cc.html>CCCCC</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

+0

キリストにliの終了タグを持っていた...はあなたにそんなに@LGSonありがとう – Pawel

関連する問題