Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What is the best way to center my navigation bar links using CSS without losing the grey sides?

Both Blogs and History have dropdown menus. Check out this screenshot:

https://i.sstatic.net/2kvTm.png
(source: gyazo.com)

CSS:

.navbar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    float: left;
    width: 100px;
    background-color: #444444;
    text-align: center;
    border-right: 1px solid white;
    position: relative;
    height: 30px;
    line-height: 30px;
}

.navbar li ul li {
    float: none;
    width: 150px;
    text-align: left;
    padding-left: 5px;
    border-top: 1px solid white;
}

.navbar a {
    text-decoration: none;
    color: white;
}

.navbar li ul {
    position: absolute;
    top: 30px;
    left: 0;
    visibility: hidden;
}

.navbar li:hover ul {
    visibility: visible;
}

.navbar li:hover {
    background-color: maroon;
}
htmlcsscenter

Answer №1

Just updated my solution to address your query. I've adjusted the Container div to clear the float and specified a width for the navbar.

http://jsfiddle.net/jFdhM/

#container {
    border-radius: 10px;
    box-shadow: 3px 3px 4px;
    padding: 8px;
    background-color: #FFFFFF;
    width: 748px;
    margin: 0 auto;
}
#top {
    width: 748px;
}
.navbar {
    width: 505px;
    margin:0 auto;
}
.navbar ul {list-style:none; padding:0; margin: 0 auto;text-align: center;}
.navbar li {float:left; width:100px; background-color:#444444; text-align:center;
         border-right:1px solid white; position:relative;
         height:30px; line-height:30px;}
.navbar li ul li {float:none; width:150px; text-align:left; padding-left:5px;
         border-top:1px solid white;}
.navbar a {text-decoration:none; color:white;}
.navbar li ul {position:absolute; top:30px; left:0; visibility:hidden;}
.navbar li:hover ul {visibility:visible;}

.navbar li:hover {background-color:maroon;}

#maincontent {
    clear: both;
    padding: 10px;
    font-family: "Microsoft Sans Serif";
    font-size: medium;
}

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

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

javascriptcssreactjssvgstyled-components

Can a post request be sent in Node/Express using just HTML and server-side JavaScript (Node.js)?

Can a post request be made in Node/Express using only HTML and Server-side Javascript? (HTML) <form action="/submit-test" method="post"> <input type="text" name="id"> <button type="submit">Submit</button> </form> (N ...

javascripthtmlnode.jsexpresspost

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat

Can you provide instructions on how to insert a hyperlink onto a background image?

Is it possible to add a hyperlink to this background image without causing it to disappear? Would creating a new class in the stylesheet be the way to go? (I encountered an issue where the image disappeared when trying to call the new class). body{ back ...

htmlcss

Deduct a digit from a variable

My goal is to decrease the value of revlength each time the loop runs. For example, if there are 2 posts by 'A Google user', then subtract 2 from revlength. This is my attempted solution: var revlength = place.reviews.length; if (place.reviews[ ...

javascriptjqueryhtml

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

htmlcssimage

What is the best way to link an HTML button to a Python (or Flask) function?

When it comes to flask programming, the common practice is to use 'url_for' like {{url_for = 'some url'}}. This method involves linking URLs with the corresponding route in the application, as well as mapping templates (HTML). However, ...

pythonhtmlflask

Employ a for loop to generate custom shapes within the canvas

EDIT: I will be sharing all of my code including the HTML and JS. Pardon me for the abundance of comments. I am attempting to generate rectangles in a canvas using a for loop (taking user input) and then access them in another function to perform certain ...

javascripthtmlobjectcanvas

What is the best way to clear the selected option in a dropdown menu when choosing a new field element?

html <div class="row-fluid together"> <div class="span3"> <p> <label for="typeofmailerradio1" class="radio"><input type="radio" id="typeofmailerradio1" name="typeofmailerradio" value="Postcards" />Postcards& ...

javascriptjqueryhtmlcssdrop-down-menu

Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto. My initial approach involved wrapping each im ...

htmlcssimagetabs

In Angular/Typescript, dynamically add a class to a `td` element when it is clicked. Toggle the class on and off

My problem arises when trying to individually control the arrow icons for each column in my COVID-19 data table. By using Angular methods, I aim to show ascending and descending arrows upon sorting but run into the challenge of changing arrows across all c ...

javascripthtmlangularreactjstypescript

Creating a three-column layout in CSS with only two divs

Struggling to format a page with 3 columns using only 2 divs for the contents. One div affects just the end of the content, while the other impacts all of it. Currently, the layout is like this: This is the first content-------------------This is the se ...

css

Post the HTML5 player on your Facebook feed

Currently, I have a player that exists in both Flash and HTML5 versions. When calling a page through an iframe, the browser and device are detected automatically to load the player accordingly, and this setup is functioning correctly. Prior to implementin ...

facebookhtmlfacebook-graph-apifacebook-opengraph

The conditional ng-class styling will be applied to each and every div on the page

For a patient, I have a modal displaying a list of card numbers. If the card is set as the default card, it should have a grey background, based on a true value for the object. <td ng-repeat="obj in paymentAndShipping"> <div ng-click= ...

cssangularjs

Develop a Modal Form using Bootstrap (HTML)

I followed a tutorial on creating a modal form with Bootstrap, you can find it here: http://www.youtube.com/watch?v=HCEbp07hfLw I replicated the steps shown in the video, but when I try to open the page in my browser, nothing appears. I have added the Bo ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Having issues with AJAX and button submit while trying to upload a file using Flask

I've been attempting to incorporate a file upload feature (specifically a .csv file) using bootstrap, and then submit it by clicking on a button. I've experimented with various methods to implement the file upload functionality, but haven't ...

javascripthtmlajaxflask

Unusual Login Problem Involving Ajax, jQuery, and PHP

My login header has two dynamic links: login/register and profile/logout. I previously used a PHP class function to check if the user was logged in and display the appropriate links, which worked well. Recently, I switched to an Ajax login to avoid page ...

phpjqueryhtmlajax

The universal CSS variables of Material UI

Creating reusable CSS variables for components can greatly simplify styling. In regular CSS, you would declare them like this: :root { --box-shadow: 0 2px 5px -1px rgba(0, 0, 0, 0.3); } This variable can then be utilized as shown below: .my-class { ...

javascriptcssreactjsmaterial-uicss-in-js

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

htmlcssbootstrap-5bootstrap5-modal