All geek questions in one place

CSS only dropdown menu

I am trying to make CSS a drop down menu (without javascript involved). According to http://pixelspread.com/blog/289/css-drop-down-menu I need to add

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

to display the submenu. However, in my code this does not work. Can someone help me on this? Many thanks!

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

My 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;
}
+3
source share
5 answers

Your HTML structure is not set up to allow multiple submenus with a single css statement. If you look at Mcinerney 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>

and its css:

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

" " ul ", id," menu ", , " ul ", " item " set " ".

- , 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;
}
+4

div.subMenu 'a'. :

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

"+" " "

,

.submenu:hover {
    display:block;
}

:

#menuBar > li > a:hover + .subMenu, .submenu:hover {  
    display:block;
}
+2

Here's a good example of a CSS-only menu in action on Steve Gibson's website - http://www.grc.com .

+1
source

go to my folder http://collins.class401.com/nav , download all css and gifs and js (don't worry, this works without javascript as well) and insert readme and check the demo

this is exactly what you are looking for

-1
source

Source: https://habr.com/ru/post/1756089/

More articles:


All Articles