Creating a Navigation Bar with a Dropdown Menu in HTML

Question

Creating a Navigation Bar with a Dropdown Menu in HTML

Apologies if this question has been asked before, but I've searched everywhere and can't find an answer. All my searches just bring up dropdown menus with

<nav></nav>

Consider this table (serving as a navigation bar):

<table class="nav">
<tr>
<td><a href="index.html">Home</a></td>
<td><a href="/Videos">All</a></td>
<td><a href="spec.html">Specification</a></td>
<td><a href="chem.html">Chemistry</a></td>
<td><a href="bio.html">Biology</a></td>
<td><a href="phy.html">Physics</a></td>
<td><a href="feedback.html">Feedback</a></td>
<td><a href="donate.html">Donate</a></td>
</tr>
</table>

CSS:

table.nav {
    border: 2px solid white;
    background-color: black;
}

How could I implement a hover effect that displays a dropdown menu with links on this table? I'm opting for this approach due to design preferences and ease of use.

html css nav

Answer 1

Answer №1

If you are dealing with dynamically created content from a CMS or PHP code, it is highly recommended to use a list for better organization. A simple CSS-only solution involves creating nested lists that display on hover - a technique I have successfully implemented in basic Wordpress menus before.

Here is an example of the styling you could apply:

body {
    margin: 0px;
    padding: 0px;
}

nav ul {
    margin: 0px;
    padding: 0px;
    float: left;
    list-style-type: none;
}

nav ul li {
    padding: 20px;
    float: left;
}

nav ul li ul {
    display: none;
}

nav ul li ul li {
    width: 100%;
    padding: 0px;
    display: block;
}

nav ul li:hover > ul {
    position: absolute;
    display: block;
}

The part where nav ul li:hover instructs the browser to switch the display property of nav ul li ul from none to block, causing the menu items to appear.

You can use the following HTML markup, and further customize it for a visually appealing design:

<nav>
    <!-- Start the listing of main items -->
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2
            <!-- Sub items include -->
            <ul>
                <li>Menu item 2.1</li>
                <li>Menu item 2.2</li>
            </ul>
        </li>
        <li>Menu item 3</li>
    </ul>
</nav>

I have personally tested this code and it should work effectively. If you encounter any issues, consider incorporating some Javascript as suggested by cr0ss.

Answer 2

If you are dealing with dynamically created content from a CMS or PHP code, it is highly recommended to use a list for better organization. A simple CSS-only solution involves creating nested lists that display on hover - a technique I have successfully implemented in basic Wordpress menus before.

Here is an example of the styling you could apply:

body {
    margin: 0px;
    padding: 0px;
}

nav ul {
    margin: 0px;
    padding: 0px;
    float: left;
    list-style-type: none;
}

nav ul li {
    padding: 20px;
    float: left;
}

nav ul li ul {
    display: none;
}

nav ul li ul li {
    width: 100%;
    padding: 0px;
    display: block;
}

nav ul li:hover > ul {
    position: absolute;
    display: block;
}

The part where nav ul li:hover instructs the browser to switch the display property of nav ul li ul from none to block, causing the menu items to appear.

You can use the following HTML markup, and further customize it for a visually appealing design:

<nav>
    <!-- Start the listing of main items -->
    <ul>
        <li>Menu item 1</li>
        <li>Menu item 2
            <!-- Sub items include -->
            <ul>
                <li>Menu item 2.1</li>
                <li>Menu item 2.2</li>
            </ul>
        </li>
        <li>Menu item 3</li>
    </ul>
</nav>

I have personally tested this code and it should work effectively. If you encounter any issues, consider incorporating some Javascript as suggested by cr0ss.

Answer 3

Answer №2

Avoid using javascript and tables for this task. Consider the following example instead:

.nav {
    border: 2px solid white;
    background-color: black;
}

.nav td { position: relative; }

.nav table,
.nav ul { 
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
    left: 0;
}

.nav td:hover table { display: table; /* or display: block; */ }
.nav td:hover ul { display: block; }

<table class="nav">
    <tr>
        <td>
            <a href="index.html">Home</a>
        </td>
        <td>
            <a href="/Videos">All</a>
            <ul>
                <li><a href="#">Item in list</a></li>
                <li><a href="#">Item in list</a></li>
            </ul>
        </td>
        <td><a href="spec.html">Specification</a></td>
        <td>
            <a href="chem.html">Chemistry</a>
            <table>
                <tr>
                    <td><a href="#">Item in table</a></td>
                </tr>
                <tr>
                    <td><a href="#">Item in table</a></td>
                </tr>
            </table>
        </td>
        <td><a href="bio.html">Biology</a></td>
        <td><a href="phy.html">Physics</a></td>
        <td><a href="feedback.html">Feedback</a></td>
        <td><a href="donate.html">Donate</a></td>
</tr>
</table>

Answer 4

Avoid using javascript and tables for this task. Consider the following example instead:

.nav {
    border: 2px solid white;
    background-color: black;
}

.nav td { position: relative; }

.nav table,
.nav ul { 
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
    left: 0;
}

.nav td:hover table { display: table; /* or display: block; */ }
.nav td:hover ul { display: block; }

<table class="nav">
    <tr>
        <td>
            <a href="index.html">Home</a>
        </td>
        <td>
            <a href="/Videos">All</a>
            <ul>
                <li><a href="#">Item in list</a></li>
                <li><a href="#">Item in list</a></li>
            </ul>
        </td>
        <td><a href="spec.html">Specification</a></td>
        <td>
            <a href="chem.html">Chemistry</a>
            <table>
                <tr>
                    <td><a href="#">Item in table</a></td>
                </tr>
                <tr>
                    <td><a href="#">Item in table</a></td>
                </tr>
            </table>
        </td>
        <td><a href="bio.html">Biology</a></td>
        <td><a href="phy.html">Physics</a></td>
        <td><a href="feedback.html">Feedback</a></td>
        <td><a href="donate.html">Donate</a></td>
</tr>
</table>

Creating a Navigation Bar with a Dropdown Menu in HTML

Answer №1

Answer №2

Similar questions

Animating path "d" with ReactJS and SVG upon clicking in FireFox

Changing the description doesn't affect the fixed height of the box - here's how to do it with CSS

Using jQuery to select and animate several elements simultaneously without repeating the animation

Tips for incorporating a background color into a specific section

When incorporating `Ionic/core` into my project, it unexpectedly alters my scss styling

The HTML elements may have identical heights, but visually, one appears larger than the other

How to place a div within another div without using absolute positioning

Disable location prompt feature when using AngularJS with Maps API

Creating a dynamic table accordion with PHP and MySQL

Manage the border around the image by incorporating a timer countdown - starting from a complete circle, transitioning to a partial arc, and finally disappearing completely

Is it possible to integrate ngx Pagination with Bootstrap?

Middle-Click JavaScript Action

Translucent" outline for an "opaque" object

Advancing in the Mozilla fashion

Unusual discovery within JQuery and IFrames

Choose an option with JavaScript once the request is successful

What is the best way to include CSS code in the output display?

Using jQuery to load content into a jQuery UI dialog box

Creating a visually appealing background image using WordPress and PHP

Display scroll bars over the position:absolute header