Hello.

Tell me, please, is it possible to make such a drop-down menu using CSS?

  • one
    Dyakuyu vіm hto has demonstrated its first time for negotiating my problems! - Vasiok

4 answers 4

You can like this: jsfiddle.net/shoorick/fSZQC/1/ , pure CSS3 ;-) For information, you can make horizontal: jsfiddle.net/shoorick/bp7QM/

<div id="ave"> <h2><a href="#ave">Ave verum</a></h2> <p>Ave verum corpus, natum de Maria Virgine, vere passum, immolatum in cruce pro homine, cuius latus perforatum unda fluxit et sanguine: esto nobis praegustatum in mortis examine.</p> </div> <div id="gaudeamus"> <h2><a href="#gaudeamus">Gaudeamus</a></h2> <p>Gaudeamus igitur, Juvenes dum sumus! Post jucundam juventutem, Post molestam senectutem, Nos habebit humus!</p> </div> <div id="odi"> <h2><a href="#odi">Odi et amo</a></h2> <p>Quare id faciam, fortasse requiris. Nescio, sed fieri sentio et excrucior.</p> </div>

and

 body { font-family: "Liberation Sans",sans-serif; color: #000; background-color: #fff; } h2 { margin: 0; padding: 0; font-size: 111%; } div { background-color: #def; -moz-transition: background-color 1s; -ms-transition: background-color 1s; -o-transition: background-color 1s; -webkit-transition: background-color 1s; transition: background-color 1s; margin: 0; padding: 1em; border-top: 1px solid white; } div:target { background-color: #ff0; } div p { height: 0; margin: 0; color: #678; overflow: hidden; -moz-transition: height 1s, color 1s; -ms-transition: height 1s, color 1s; -o-transition: height 1s, color 1s; -webkit-transition: height 1s, color 1s; transition: height 1s, color 1s; } div:target p { height: 100px; color: maroon; }
  • Examples are good but obviously not under college IE: D - Zowie
  • Ta da) Teach students in tough conditions) - Palmervan
  • In the right conditions, they teach ... The absolute majority has to work precisely with the fact that at the Institute xD - Zowie
  • The absolute majority has to recycle what they teach at the institute) - Palmervan
  • one
    True, it will be fun ... Soon IE <7 will become so remote from other browsers that it will look like msdos on windows: DDD - Zowie

If with beautiful, then through javascript (css-animation now not all browsers understand). If no beautiful, then you can on css .

  • (ІЕ) - it was possible not to write this, it is understandable: D Most likely the reason for the fact that it does not work is either through old IE, or the curve code in the example is Zowie
  • @AlexWindHope there is an example of the curve itself) pushing javascript:ShowOrHide('category2') provided that jquery is used is already in my opinion unwise! - Palmervan 2:13 pm
  • 2
    It’s clear that on the topic - no one will solve problems for you under your IE of the Stone Age, figure it out yourself, the answer to your question is very simple and I gave it to you - no , I can’t think it’s exhausted - Zowie
  • Dyakuyu і for tse :) - Vasiok
  • what are the comments rubbed? - Artem

Not. Css does not handle click events

  • CSS can execute only in my zhabascript code, I'm talking about expression - Mikhail Nikolaev
  • "CSS can only" execute "in the jabscript code - this is something new)) - Flex
  • Read @Flex here, and you will understand what I was talking about)) even though it works in a donkey, but even so - Mikhail Nikolaev

Markup:

 <ul> <li>Menu <ul> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> </ul>

Styles:

 ul { list-style-type: none; margin: 0; padding: 0; } ul li { display: inline-block; width: 5em; height: 2em; line-height: 2em; position: relative; } ul li:hover { background-color: grey; } ul li ul { display: none; position: absolute; top: 2em; left: 0; } ul li:hover ul { display: block; } ul li ul li { display: list-item; position: relative; }