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

Question

Пробовал получить «чистый css» выпадающий список пытался в течение нескольких дней получить «простой» css drop down nav, который может отображать верхний уровень и скрывать второй уровень, но не может сделать подпозиции отображаются при зависании ?? любая помощь очень ценится образец Изолированные здесь :: CSS и HTML ниже пасты бен http://www.webdevout.net/test?01t

Answer 1

Ваши проблемы, вероятно, связаны с тем, что вы построили свой html неправильно. Подменю (.level-two) должны быть вложены в пределах .level-oneli элементов:

<div id="navtree"> 
<ul class="level-one"> 
<li><a href="/about/" title="about">about</a></li> 
<li><a href="/contact/" title="contact">contact</a></li> 
<li><a href="/feeds/latest/" title="subscribe">subscribe</a></li> 
<li><a href="/Test1/" title="Test1page">Test1</a> 
    <ul class="level-two"> 
    <li><a href="/Test1/testsub/" title="test1subpage">Test1sub</a></li> 
    </ul> 
</li> 
<li><a href="/Test2/" title="Test2 page">Test2</a> 
    <ul class="level-two"> 
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li> 
</ul></li> 

</ul> 
</div> 

Если вы затем использовать следующий CSS:

.level-one {display: inline; position: relative; } 

.level-one {display: none; position: absolute; left: 0; top: 1em; /* adjust as necessary */ } 

.level-one:hover .level-two {display: block; } 

Я думаю, что должно быть достаточно, чтобы вы начали. Не стесняйтесь задавать любые вопросы в комментариях или обновлять свой вопрос.

Кроме того, так как я предполагаю, что вы достаточно знакомы с этим, я хотел бы предложить вам следующие ссылки:

• Для всех вещей и удивительных шикарных с меню CSS: CSS Play, Сть Николс.
• Для ознакомления с некоторыми из ханов и whys: A List Apart.
• Краткое введение, от Eric Meyer.

Есть десятки, если не сотни, больше можно найти ...

Answer 2

Уровень второго уровня <ul> должны быть дети, у вас есть это:

<li><a href="/Test2/" title="Test2 page">Test2</a></li> 
<ul class="level-two"> 
<li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>  
</ul> 

Изменить это:

<li><a href="/Test2/" title="Test2 page">Test2</a> 
<ul class="level-two"> 
    <li><a href="/Test2/subpage2/" title="Testsubpage2">Testsubpage2</a></li>  
</ul> 
</li> 

Answer 3

Вот CSS я вроде доволен тем, что реализует три уровня выпадающего списка До сих пор только протестирован в FF:

/* Inserted by Tom Brander for nested nav Allows for Three levels.. pattern can be extended if you want */ 
ul.level-one{ 
    margin-left:-10px; /* lines up 1st item with search box*/ 
} 
ul.level-one li{ 
    list-style: none; 
    padding-right: 5px; 
    padding-left: 5px; 
    float: left; 
    position: relative; 
    line-height: 1.3em; 
    } 
ul.level-one li:hover { 
    background:#999ca0; 
    } 
.level-two { 
    display: none; 
    position :absolute; 
    Left:0; 
    top: 1em; 
    } 
.level-three { 
    display: none; 
    position :absolute; 
    top: 0em; 
    } 
.level-one li:hover .level-two { 
    display: block; 
    background: #999ca0; 
    width: 100px; 
    padding-left: 10px; 
    } 
.level-two li:hover .level-three { 
    display: block; 
    background: #999ca0; 
    width: 100px; 
    padding-left: 10px; 
    margin-left: 92px; /* this moves the 3rd level over to the right but not too far, needs enough overlap so that you can move the mouse wthout the third level dissapearing */ 
    } 
.level-three li:hover {display:block;}