CSS - выпадающее меню

Я новичок в CSS и тестирую некоторые вещи. Я создал раскрывающееся меню, но это работает неправильно. Вот мой код:CSS - выпадающее меню

<!DOCTYPE html> 
<html> 

<head> 
    <link href = "üben_css.css" rel = "stylesheet" type="text/css"> 
    <title> xx</title> 
</head> 

<body> 


<div id="nav"> 
    <ul> 
     <li> Home  </li> 
     <li> xx 
      <ul> 
       <li> Hc </li> 
       <li> Scc </li> 
      </ul> 
     <li>Zubehör  </li> 
     <li> Service </li> 
     <li> Forum </li> 

    </ul> 
</div> 



</body> 

</html>

код CSS:

body{ 
margin:0; 
padding:0; 
} 

#nav{ 
background-color:silver; 
position:relative; 
} 

#nav ul li{ 

display:inline; 
} 

#nav ul ul{ 
display:none; 
} 

#nav ul li:hover ul{ 
display:block; 
} 

#nav ul ul li{ 
display:block; 
}

Проблема заключается в том, что панель навигации отображается рядной, но когда я наведите курсор мыши на мой элемент «ого» остальную часть моей навигационной панели появится в моем выпадающем списке. Как я могу это исправить?

http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png

источник

2014-09-21 happyxx89

Использование

#nav ul li{ 
    display:inline-block; 
}

По сравнению с просто inline. Если бы это было просто inline, то позиционирование ниже было бы причиной того, что все выпадающие меню появятся в одном и том же месте в соответствии с делением #nav.

#nav ul li:hover ul{ 
    position: absolute; 
    display:block; 
}

Это все еще выглядит не очень хорошо, но функционально. Оформить заказ на tutsplus для некоторых хороших уроков.

В то же время, я уверен, что вы могли бы решить это гораздо более эффективно с помощью jQuery.

источник

2014-09-21 00:30:01 rwxes

Благодарим вас за ссылку! – happyxx89

Удалить эти строки из вашего CSS:

#nav ul li:hover ul{ 
display:block; 
}

источник

2014-09-21 00:15:09

CSS - выпадающее меню

ответ

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