Только CSS раскрывающееся меню - PullRequest
Новая
       8

Только CSS раскрывающееся меню

3 голосов
/ 23 июля 2010

Я пытаюсь сделать CSS выпадающим меню (без JavaScript). В соответствии с http://pixelspread.com/blog/289/css-drop-down-menu Мне нужно только добавить 

#menuBar #test2 a:hover .subMenu{display:block;}

для отображения подменю. Однако в моем коде это не работает. Может ли кто-нибудь помочь мне об этой проблеме? Большое спасибо!

Мой HTML 

<ul id="menuBar">
   <li id="test1">test1</li>
   <li id="test2"><a href="#">Pro1</a>
     <div class="subMenu">
        <ul>
           <li><a href="#">sub1</a></li>  
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
         </ul>
         <ul>
            <li><a href="#">Volleyball</a></li>
            <li><a href="#">Walking</a></li>
            <li><a href="#">Water Shoes</a></li>
         </ul>
       </div> <!--end of submenu-->
     </li>
  </ul>

Мой Css 

 #menuBar #test2 a{
background:url("../images/btTest.jpg") no-repeat bottom;
display:block;
border-right:1px solid #ffffff;
width:112px;
height:37px;
}

#menuBar #test2 a:hover{
background:url("../images/btTest.jpg") no-repeat top;
}

#menuBar #test2 a:hover .subMenu{  
// I add .subMenu after a:hover and have two a:hover for #test2 a
// I know it won't work but not sure what to do now.
//thanks for the help.
display:block;
}


.subMenu{  // the hidden menu
position:absolute;
top:35px;
left:0px;
z-index: 99999;
width:550px;
background-color:black;
display:none;
}

Ответы [ 5 ]

4 голосов
/ 23 июля 2010

Ваша структура HTML не настроена на использование нескольких подменю одним оператором css. Если вы посмотрите на HTML Макинерни: 

<div id="menu">
  <ul id="item1">
    <li class="top">menu item</li> 
    <li class="item"><a href="#">menu item 1</a></li> 
    <li class="item"><a href="#">menu item 2</a></li> 
    <li class="item"><a href="#">menu item 3</a></li> 
  </ul> 
</div>

и его css: 

#menu ul:hover .item{display:block;}

это переводится как «Если вы наведите курсор на« ul », который является потомком элемента с идентификатором« menu », то найдите все элементы, которые являются потомками указанного« ul », с классом« item »и установите их отображение на «блок».

Вы можете сделать что-то подобное, но вам нужно будет добавить строку css для каждого подменю на основе идентификатора элемента LI: 

#test2:hover div.subMenu { display: block; }

«# test2» относится к любому элементу с идентификатором «test2».

«div.subMenu» относится к любому элементу (в данном случае div) с обозначением класса «subMenu». Поскольку он идет после "# test2", элемент div должен быть потомком "# test2".

Чтобы ваше фоновое изображение было при наведении, вам нужно внести некоторые изменения в CSS и HTML. Во-первых, назначьте класс для «A» (потому что мы не хотим ссылаться на все элементы «A», которые являются потомками # test2, только назначенный): 

<li id="test2"><a href="#" class="top">Pro1</a> ...

Затем измените ваш CSS, чтобы фон был установлен при наведении курсора на # test2 (не # test2 a): 

#test2:hover a.top {
  background:url("../images/btTest.jpg") no-repeat top;
}
2 голосов
/ 23 июля 2010

Это кросс-браузерное выпадающее меню только с CSS, которое работает и в IE6.Он использует CSS-хаки и условную разметку HTML, но работает!

http://www.cssplay.co.uk/menus/final_drop.html

2 голосов
/ 23 июля 2010

div.subMenu не является потомком тега 'a'.Попробуйте: 

#menuBar #test2 a:hover + .subMenu{  
    display:block;
}

«+» означает «прямое следование за братом или сестрой»

Возможно, вам также понадобится 

.submenu:hover {
    display:block;
}

Или просто объедините их: 

#menuBar > li > a:hover + .subMenu, .submenu:hover {  
    display:block;
}
1 голос
/ 23 июля 2010

На сайте Стива Гибсона есть хороший пример использования CSS-меню - http://www.grc.com.

0 голосов
/ 24 июля 2010

зайдите в мою папку http://collins.class401.com/nav, загрузите все css, gif и js (не волнуйтесь, это работает без javascript также) и посмотрите readme и ознакомьтесь с демо

это именно то, что вы ищете

...