Does anyone know how to seperate information you type into html into drop downs im making a website

Question

Its a basic css drop down i all i really want to know is how i can seprate my information into the tabs of the css dropdown https://code.sololearn.com/WudxSDskZhVa/#html

Answer 1

Hey jbrooks , in the HTML file you have written
<div class="navbar">
<a href="#Home">Home</a>
<a href="#Vocab">Vocab</a>
<a href="#Assignments">Assignments </a>
<div class="dropdown">
<button class="dropbtn">dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">tips</a>
<a href="#">tricks</a>
<a href="#">Guides</a>
</div>
</div>
But you have not assigned Id name of Home to anything so nothing is happening.

See you need to create a seperate html file and name it index.html then in the href attribute , instead of #Home put href= "index.html" .

Now if you click the Home tab, the browser will be directed to index.html

You need a different html file for each page and link it in the way I have mentioned above.

I suggest you don't use code playground and instead download a code editor. Preferably use a PC. I use notepad

Answer 2

Hey there!
Here is an example, see if it helps. I have taken random values for the color and all, you can change them. Hope it helps.

The HTML -

<nav>
<ul>
<div class="dropdown">
<li><a class="head" href="index.html">Home</a></li>
</div>

<div class="dropdown">
<li><a class="head">
Drop-down</a></li>
</div>
<div class="dropdown-content"><a href="pt.html">Class 12</a>
<a href="pe.html">Drop-down Content</a></div>
</div>
<ul>
<nav>

The CSS is in the next comment.

Answer 3

Continuation :

The CSS -

    .head {

        background-color: #FFF;

        font-size: 20px;

        cursor: pointer;

        color: #111;

    }

    .dropdown {

        padding-top: 20px;

        position: relative;

        display: inline-block;

    }

    .dropdown-content {

        display: none;

        position: absolute;

        background-color: #FFF;

        min-width: 160px;

        margin-top: 20px;

    }

    .dropdown-content a {

        color: #111;

        padding: 12px 16px;

        text-decoration: none;

        display: block;

    }

    .dropdown-content a:hover {

        background-color: #f1f1f1;

        color: green;

    }

    .dropdown:hover .dropdown-content {

        display: block;

    }

    .dropdown:hover .head {

        background-color: #111;

    }

    .dropdown:hover .head a {

        color: #FFF;

    }

Answer 4

Thank you i have the css in place so the drop down pops up all i really want to do is seprate the html as in when i click home it shows a home page when i click assignment it shows assignments and so on and so fourth

Answer 5

alrighty thank you I will do that I still have a computer I'm building and I will start on that thank you again