How do you a make vertical nav list drop-down horizontally?

How do you a make vertical nav list drop-down horizontally?
Hello, I am new to the forum and to coding html and css.
I want to learn more about html and css by working on a simple task. I want to create myself a homepage that replaces all my bookmark folders. I want to have a vertical nav bar on the left that expands to the right when i click each category into 5 or so more options per category that link to relative pages on my site. I have seen examples on how to make horizontal nav bars drop down vertically but I kind of prefer the opposite of that. Any thoughts?

Code:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">



    <title>Home Bookmark Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

    <link href="css/normalize.css" rel="stylesheet" media="all">

    <link href="css/styles.css" rel="stylesheet" media="all">

</head>

<body>

    <header role="baer">



        <h1>home bookmark page</h1>

        <nav>

            <ul>

                    <li><a class="active" href="#index.html">Home</a></li>

                    <li><a href="mail.html">Mail</a></li>

                    <li><a href="banking.html">Banking</a></li>

                    <li><a href="bills.html">Bills</a></li>

                    <li><a href="work.html">Work</a></li>

                    <li><a href="fun.html">Fun</a></li>

            </ul>

        </nav>



    </header>

 

</body>

</html>









css:



ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

    width: 200px;

    background-color: #f1f1f1;

    border: 1px solid #555;

}



li a {

    display: block;

    color: #000;

    padding: 8px 16px;

    text-decoration: none;

}



li {

    text-align: center;

    border-bottom: 1px solid #555;

}



li:last-child {

    border-bottom: none;

}



li a.active {

    background-color: rgb(61, 204, 240);

    color: white;

}



li a:hover:not(.active) {

    background-color: #555;

    color: white;

}

برچسب: نویسنده: آیلین رضوانی تاريخ: سه شنبه 19 دی 1396 ساعت: 17:24

درباره سایت

آخرین مطالب

امکانات وب

How do you a make vertical nav list drop-down horizontally?

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه