user3807679 user3807679 - 3 months ago 10
HTML Question

A drop down/minimizable PARAGTAPHS/text box in HTML

I am trying to create a drop down paragraph for my website.
It is similar to a drop down menu but a whole paragraph with centering and a font. I have seen a number of drop down menu's but they don't seem to support large text. The idea would be for a bar say:

===click here to read about====

and when you click it the paragraph will pop out underneath.
The plan is to have a few of them in order. This is to save website space.

So minimizeable paragraphs in HTML

Answer

thank you all for your help. What I managed to was use the code and tutorial from this link to help http://www.htmldog.com/techniques/dropdowns/

I was able to edit and chop and change. It was annoying because upper case transform was on so I got rid of it and you can play with making the drop downs absolute and copying and pasting the CSS but renaming it main_nav2 or something that way they don't overlap each other with the drop downs.

That way you can hover over it and the text will appear and you can make the drop down box a different colour. Its drop down now but I want it clickable

css: #main_nav ul { background: #f84445; max-width: ; float: left; -webkit-transition: .5s; transition: .5s; }

    #main_nav li {
float: left;
position: relative;
width: 450px;
list-style: none;
-webkit-transition: .5s;
transition: .5s;
inline-box-align:last
    }

    #main_nav > ul > li > a, h1 {
        text-transform: ;
    }

    #main_nav a {
        display: block;
        text-decoration: none;
        padding: 5px 15px;
        color: #000;
    }

    #main_nav ul ul {
        position: absolute;
        left: 0;
        top: 100%;
        visibility: hidden;
        opacity: 0;
    }

    #main_nav ul ul ul {
        left: 100%;
        top: 0;
    }

    #main_nav li:hover, #main_nav li:hover li {
        background: #ddd;
    }

    #main_nav li li:hover, #main_nav li li:hover li {
        background: #bbb;
    }

    #main_nav li li li:hover {
        background: #999;
    }

    #main_nav li:hover > ul {
        visibility: visible;
        opacity: 1;
    }

and html

<div ="left">
   <tr>
     <td><p>&nbsp;</p>
       <nav id="main_nav"></nav>
       <section id="main_content"></section>
       <nav id="main_nav">
         <p>&nbsp;</p>
         <p>&nbsp;</p><p>&nbsp;</p>
         <p><br>
         </p>
             <div align="center"><em>1</em>
               <ul>
                 <li> </li>
               </ul>
        </div>
             <ul>
               <li>
                 <p align="center"><a href=""><br />
                1 one/won.</a></p>
                 <p align="center"><a href=""><br />
                 </a></p>
               </li>
             </ul>
      </li>
         </ul>
         <ul>
           <li>
             <div align="center"><em>2</em>
               <ul>
            <li> </li>
               </ul>
             </div>
             <ul>
               <li>
                 <p align="center"><a href="">
                   2. Two, too or to</a></p>

               </li>
             </ul>
           </li>
         </ul>
         <ul>
           <li>
             <div align="center"><em>3</em>
               <ul>
                 <li> </li>
               </ul>
             </div>
             <ul>
               <li>
                 <p align="center"><a href=""><br />
                  3, three or free</p></a>
               </li>
             </ul>
           </li>
         </ul>