When an option is selected on the navigation bar, side bars appear for additional navigation

How can I remove the bars on the side of the navigation bar when hovering over it? I don't want to alter the appearance or position of the navbar itself, just the parts that are affected by hovering over it.

HTML:

<!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>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Site</title>
</head>

<body>

<div id="container">
<div id="body">
<center>
    <ul class="navbar">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="biography.html">Biography</a></li>
    </ul>
    </center>
</div>    
</div>
</body>
</html>

CSS:

    @charset "utf-8";


#container {
    margin-left:auto;
    margin-right:auto;
    width:960px;
    background-color:#666666;
}

#body {
    background-color:#666666;
    width:960px;
    height:500px;
    border:2px solid #FFFFFF;
    margin-top:50px auto;
}

.navbar {margin:0px;
    background-color:#66FF33;
    text-align:center;
    list-style:none;
    border-bottom:none;
    padding-left:0px    
}

ul.navbar li {
    width:19%;
    display:inline-block;
}

ul.navbar a {

    display:block;
    width:100%;
    margin:0px;
    padding:10px 0px;
    text-decoration:none;
}

ul.navbar a:hover {
    background-color:#33FFD7;
}

body {
    background-color:#333333;
}

Answer №1

If you want your links to have better alignment, try eliminating the spaces between your <li> elements. These spaces are causing unnecessary gaps between the links, which affects the layout you are trying to achieve with 5 elements at 20% width each within a 100% width container.

<li><a href="index.html">Home</a></li><li><a href="about.html">About</a></li><li><a href="contact.html">Contact</a></li><li><a href="services.html">Services</a></li><li><a href="biography.html">Biography</a></li>

Although there may be a more comprehensive solution out there, this quick fix should do the trick for now.

Check it out on JSFiddle

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

Manipulating active classes on different divisions with JQuery

I've completed this code so far: <div class="yearly-archive"> <p> YEAR - <span class="archive-year year-active"> 2014 </span> / <span class="archive-year"> 2013 </span> / <span class="archi ...

Is there a way to automatically send 404 errors to index.html and update the URL to the homepage URL?

I transformed a large and intricate website into a concise one-page site, necessitating users to be guided from 404 errors to the index.html page. To accomplish this, I added the following code snippet to my .htaccess file: ErrorDocument 404 /index.html ...

What is the best way to incorporate CSS from node_modules into Vite for production?

I have a TypeScript web application where I need to include CSS files from NPM dependencies in index.html. Here is an example of how it is done: <link rel="stylesheet" type="text/css" href="./node_modules/notyf/notyf.min.css&quo ...

What is the best way to duplicate the table header?

I'm looking to have the table header repeat twice using ng-repeat, like this: a b | a b | Instead of aa | bb. Currently, my code only displays a b | <table class="table table-striped table-bordered"> <thead> ...

How can I pass an array from HTML to Node.js and subsequently store it in MongoDB?

Looking to combine the values of longitude and latitude into one array for input, then store it in the database. While there are plenty of examples on handling arrays, most of them are based on PHP. Check out the following code snippet: HTML <html> ...

Is there a way to retrieve the id attribute of an option element from the source component?

When a user makes a selection, I am trying to access the id attribute of the HTMLOptionElement. However, it always returns 0 instead of the actual id I passed (such as 1 or 2) from the select tag: <div class="col-8"> <select (cha ...

Effort to update Div element with Ajax fails to function

Looking for some assistance here. I'm attempting to update a database's entries using Ajax after submitting a form. The entries are displayed within a div. I've tried the following code to refresh only that specific div, but it doesn't ...

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

use jquery to increase margin on card upon collapse displaying

I'm currently using an accordion from a bootstrap 4 website. <div class="accordion" id="accordionExample"> <div class="card m-0"> <div class="card-header bg-white" id="headingOne"> <h5 class="mb-0"> <but ...

Unable to display animation without first launching it on Rive web

I attempted to incorporate a Rive animation into my Angular web application <canvas riv="checkmark_icon" width="500" height="500"> <riv-animation name="idle" [play]="animate" (load)=&qu ...

The tooltip malfunctions when I incorporate the PHP variable

When I use PHP variables to return an HTML span tag, I am encountering an issue. The span tag contains a title field where I bind my PHP data. However, it seems to only accept the first sentence of my PHP value, causing it to not work properly. Below is th ...

Enhancing NG Style in Angular 6 using a custom function

Today, my curiosity lies in the NG Style with Angular 6. Specifically, I am seeking guidance on how to dynamically update [ngStyle] when utilizing a function to determine the value. To better illustrate my query, let me present a simplified scenario: I ha ...

Content on the right floating underneath content on the left

Here is the HTML code snippet I am working with: <div id="main_content"> <div id="left_side> <h1> MY BIG HEADER </h1> </div> <div id="content_area"> SOME CONTENT HERE SOME CONTENT HERE S ...

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

The navigation bar in responsive view on Bootstrap 4 causes the content below it to shift

Recently I have been exploring bootstrap-4 and encountered an issue while creating a nav-bar. The problem is that in responsive view, when toggling the nav-bar it simply pushes the content below it. Is there any way to address this issue within (bootstra ...

Can I access properties from the index.html file within the Vue.js mount element?

<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="widt ...

Toggle element visibility upon clicking

<table id="selectsupp"> <tr> <td> <select id="category"> <option value="display" readonly="true">-Shop By Category-</option> <option value="all">All</option> <option val ...

What is the best way to display multiple HTML files using node.js?

click here to see the image Here is my server.js file. Using express, I have successfully rendered the list.html and css files on my server. However, I am encountering an issue when trying to navigate from list.html to other html files by entering localho ...

I'm interested in learning the best way to insert the images from this JSON file into the corresponding div elements

I have completed developing a clone of an Instagram web page. Although I can retrieve data from the JSON file and insert it into the <img> tag, I am facing difficulty in displaying each image above its respective .below-image div with consistent spac ...

Diving into Angular Typescript: Understanding the [object Object] in HTML

One of my todos requires the following input: todo.ts: import { TodoTag } from "./todo-tag-custom"; export class Todo { ... tags: TodoTag[]; } todo.html <tr *ngFor="let todo of todosFiltered()"> <td>{{todo.tags | json ...