An interactive selection tool for a website's navigation bar

Struggling to implement a dropdown menu for my navbar, none of the CSS methods I've tried seem to work. My current HTML code is as follows...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled</title>
</head>

<!-- Reset Sheet -->
<link href="reset.css" rel="stylesheet" type="text/css">
<!-- Main Sheet -->
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Navigation Menu Sheet -->
<link href="navbar.css" rel="stylesheet" type="text/css">

<body>
<table id="header">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0">

<!-- Table containing logo -->
<tr>
<td colspan="2" valign="middle" height="30" align="center">
<a href="http://www.phonesrus.com.au"><img src="logo.JPG" alt="logo" width="570" ></a>
</td></tr>

<!-- Table containing NavBar -->
<tr>
<td colspan="2" valign="middle" height="55" bgcolor="#300000" align="center">
<div class="navbar">
<ul class="horizontal">               
   <li><a class="first" href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Our Products</a></li>
   <li><a href="#">Environment</a></li>
   <li><a href="#">Latest News</a></li>
   <li><a class="last" href="#">Contact Us</a></li>
</ul>
</div> 
</td></tr>
</table>

</body>
</html>

In addition, here is my CSS code for the navbar...

.navbar ul.horizontal 
{
list-style-type:none; 
margin:40 auto; 
width:640px; 
padding:0;  
overflow:hidden;
}

.navbar ul.horizontal > li 
{
float:left;
}

.navbar ul.horizontal li a 
{
display: block; 
text-decoration:none; 
text-align:center; 
padding:22px 20px 22px 20px;
font-family:Arial; 
font-size:8pt; 
font-weight:bold; 
color:#FFFFFF; 
text-transform:uppercase; 
border-right:1px solid #607987; 
background-color:#300000;  
letter-spacing:.08em
}

.navbar ul.horizontal li a:hover 
{
background-color:#680000; 
color:#a2becf
}

.navbar ul.horizontal li a.first 
{
border-left:0
}

.navbar ul.horizontal li a.last 
{
border-right:0
}

I'm struggling to create a dropdown menu for the "The products" button that matches the style of the rest of the navbar. The updated HTML in question is...

<div class="navbar">
<ul class="horizontal">               
   <li><a class="first" href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Our Products</a></li>
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">HTC</a></li>
            <li><a href="#">Nokia</a></li>
            <li><a href="#">Samsung</a></li>
        </ul>
   <li><a href="#">Environment</a></li>
   <li><a href="#">Latest News</a></li>
   <li><a class="last" href="#">Contact Us</a></li>
</ul>
</div>

Despite multiple attempts, I haven't been able to achieve the desired result. Any help or guidance would be greatly appreciated. Thank you.

cssdrop-down-menunavigationuinavigationbarnavbar

Answer №1

It appears that there might be a need for some style adjustments to align with your preferences.

To ensure proper structure, the submenu list should be within the main menu's list item, as shown below:

<ul>
    <li>Item
        <ul>
            <li>...</li>
        </ul>
    </li>
</ul>

After incorporating this approach into your code and optimizing the CSS, here is the revised version:

<div class="navbar">
<ul class="horizontal">               
   <li><a href="#">Home</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Our Products</a>
        <ul>
            <li><a href="#">Apple</a></li>
            <li><a href="#">HTC</a></li>
            <li><a href="#">Nokia</a></li>
            <li><a href="#">Samsung</a></li>
        </ul>
   </li>
   <li><a href="#">Environment</a></li>
   <li><a href="#">Latest News</a></li>
   <li><a href="#">Contact Us</a></li>
</ul>
</div>

CSS Styles:

.horizontal {
    list-style-type:none; 
    margin:40 auto; 
    width:640px; 
    padding:0;  
    overflow:hidden;
}
.horizontal > li {
    float:left;
}
.horizontal li ul {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    width: 100%;
}
.horizontal li:hover ul {
    display: block;
}
.horizontal li a {
    display: block; 
    text-decoration:none; 
    text-align:center; 
    padding:22px 10px;
    font-family:Arial; 
    font-size:8pt; 
    font-weight:bold; 
    color:#FFFFFF; 
    text-transform:uppercase; 
    border-right:1px solid #607987; 
    background-color:#300000;  
    letter-spacing:.08em
}

.horizontal li a:hover {
    background-color:#680000; 
    color:#a2becf
}

.horizontal li:first-child a { border-left:0; }
.horizontal li:last-child a { border-right:0; }

If necessary, feel free to adjust the styles according to your requirements.

You can also view the live demonstration on JSFiddle Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure a multi-page form is validated using HTML5 and JavaScript before progressing to the next page?

Currently, there are two functionalities at play. The submit button is not being recognized while the functionality in JS $(".next").click(function(){..} is working as expected. HTML This section involves 4 fieldsets. I am attempting to validate ...

javascripthtmljquerycssbootstrap-4

Creating a navigation bar that stays fixed at the top of

Hey there, currently I am utilizing a combination of jquery and css to affix my navigation menu at the top when scrolled. However, the problem is that my navigation menu is positioned beneath a div with a height set in viewport units (vh). The jquery scr ...

javascripthtmlcss

Issues arise when HTML components are not functioning correctly upon calling JSON

I'm encountering a challenging issue that's difficult to articulate. Here is a link to a JSFiddle that demonstrates the problem: https://jsfiddle.net/z8L392ug/ enter code here The problem stems from my utilization of a news API for F1 stories. W ...

htmlcssjson

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

Showing how an iframe can adjust its height to 100% within a div element

Currently, I have a player status script implemented on our Minecraft Server. This script displays the server name, IP address, and the heads of the players currently online. The setup includes two div boxes for the status box: one outer box to fix its pos ...

phpcsshtmliframeheight

What is the method for including a Bootstrap Icon within a placeholder text?

I am attempting to insert a search icon inside an input text field, but I am unsure of how to accomplish this. My desired result is similar to: input search Can Bootstrap Icons be used within a placeholder? I have seen some examples, but the icon remaine ...

htmlcssbootstrap-4icons

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: Exploration of Possible Solutions After expl ...

javascripthtmlcssdomcanvas

Issue with checkboxes preventing submission of form

Currently working on a website project for a company that requires certain steps to be completed for deliveries. Unfortunately, I am facing issues with the submit button, and I apologize as I am still new to this. The code I have pasted is divided into tw ...

javascriptphphtmlcss

Is there a way to modify the FixedTableHeader jQuery plugin to include a fixed first column in addition to the fixed header?

I've been experimenting with a jQuery plugin I found at to create a stylish table with fixed headers, sorting options, and other interesting features. While the plugin is great, I also considered using jqGrid for its impressive capabilities. However, ...

javascriptjqueryhtmlcssjquery-plugins

Utilizing a Downloaded Font in CSS: A Step-by-Step

Just starting out here. I have a font file in .ttf format that I want to use on my blog, but I need help with obtaining its code. Am I on the right track? * { font-family: 'providence-bold'; src: url('/font/providence-bold.regular.tt ...

cssfontstumblrtruetype

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

htmlcss

Show a pop-up modal after selecting an option from the Material UI dropdown menu

I am currently working on a project that requires opening a delete option modal from a Material UI dropdown menu. The first step in achieving this goal is to understand how to select an item from the dropdown and then trigger a specific action, such as ope ...

reactjsdrop-down-menumaterial-uimenuitem

The controller is failing to effectively showcase the ng-show functionality

My webpage consists of three elements: a search bar, a search result area, and a form. The use case scenario involves showing the search bar and form div by default, while hiding the search result div. When I enter keywords into the search bar, client data ...

htmlcssangularjsionic-framework

Is CSS General sibling selector not functioning properly when used with :focus?

How can I display text that turns into an input form when hovered over, and stays visible even if it's unhovered but the user is interacting with the input form? The issue is that when the input form is focused while unhovered, both the input form an ...

cssfocus

Discovering data in individual tr elements within a table with jQuery by utilizing .text()

I'm currently working on a project where I need to separate the three table rows within a dynamically generated table. My goal is to have jQuery treat each row individually in order to extract specific values like price and SKU. You can see an example ...

jquerycsshtml-table

Can you explain the meaning of -ms-value?

I recently came across a solution for an issue specific to IE, and it worked perfectly for me. You can find the solution here: Change IE background color on unopened, focused select box However, I'm still puzzled about the meaning of -ms-value. Any i ...

cssinternet-explorer-11

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

javascripthtmlcsspopupcodepen

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

Creating a layered effect: Adding an image onto another image using HTML and CSS

Wondering if it's possible to create an overlaid effect with an image and text inside of an <img> element, similar to the example image below. Utilizing Bootstrap for this design. This is how I am attempting to achieve it: HTML <div class= ...

htmlcssimagetwitter-bootstrap

Changing pricing on pricing table with a click

Looking to implement a price changing button that functions similar to the one found at this LINK: If anyone knows of any JavaScript or other solution, please provide me with some guidance. Thank you in advance. ...

javascriptjqueryhtmlcsstwitter-bootstrap