Навигационная панель при наведении - CSS

У меня есть этот код, и он не работает. Подменю не отображается, когда я наводил курсор на главное меню. Изменение цвета, похоже, работает, но второй список не отображается в главном меню при зависании. я не могу найти проблему ... Пожалуйста, помогитеНавигационная панель при наведении - 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>

Спасибо.

источник

2017-01-19 Pawel

Вы имели закрывающий тег для li в неправильном месте

<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>

источник

2017-01-19 19:50:06 LGSon

Христос ... Спасибо вам столько @LGSon – Pawel

Навигационная панель при наведении - CSS

ответ

Смежные вопросы