Stylish dots emerging under navigation bar

Okay, so I've run into a simple issue, but I can't seem to figure out the solution.

Ever since I wrote this code, I've noticed these small dots appearing below the menu.

Take a look at the image for a clearer picture.

https://i.sstatic.net/2nJVm.png

Code

#MenuID li {
  color: white;
  display: inline-block;
  list-style: none;
  background-color: rgba(255, 146, 0, 0.5);
  font-size: 20px;
  position: relative;
  left: 220;
  top: -48;
  font-weight: bold;
  width: 10%;
  text-align: center;
  border: 1px solid black;
}
#MenuID li:hover {
  background-color: rgba(255, 255, 0, 0.5);
}
#MenuID li a {
  text-decoration: none;
  color: white;
}
<ul id="MenuID">
  <li> <a href="index.html"> Home </li>
  <li> <a href="index.html"> Forum</li>
  <li> <a href="index.html"> Website</li>
</ul>

htmlcss

Answer №1

Ensure you include the </a> before the </li> and utilize min-width in the li element. Also, don't forget to add units to the left and top properties.

#MenuID li {
  color: white;
  display: inline-block;
  list-style: none;
  background-color: rgba(255, 146, 0, 0.5);
  font-size: 20px;
  position: relative;
  left: 220px;
 /* top: -48px; commented so you can see demo*/
  font-weight: bold;
  min-width: 10%;
  text-align: center;
  border: 1px solid black;
}
#MenuID li:hover {
  background-color: rgba(255, 255, 0, 0.5);
}
#MenuID li a {
  text-decoration: none;
  color: white;
}
<ul id="MenuID">
  <li> <a href="index.html"> Home</a> 
  </li>
  <li> <a href="index.html"> Forum</a>
  </li>
  <li> <a href="index.html"> Website</a>
  </li>
</ul>

Answer №2

Your HTML code is missing closing tags for the <a> elements:

<ul id="MenuID">
  <li> <a href="index.html"> Home </a></li>
  <li> <a href="index.html"> Forum</a></li>
  <li> <a href="index.html"> Website</a></li>
</ul>

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

Choosing an element with Selenium based on another element's attributes

My current project involves using Selenium and Java to interact with a table. I am trying to create a selector that can locate a specific column in the table and perform a right-click action on it. The challenge I am facing is that while it's easy to ...

javahtmlcssseleniumxpath

Using Puppeteer and Scrapy, this innovative Web Crawler with Scraper combines the power of both

As a newcomer to web technologies, I am faced with the task of crawling and scraping numerous websites that utilize a combination of React, JavaScript, and HTML. These sites collectively contain approximately 0.1 to 0.5 million pages. My plan is to use Se ...

javascripthtmlreactjsseleniumscrapy

Creating Consistent Button Padding in Material UI

I am working with a series of Material UI buttons that are defined as follows: <Button className={classes.button}>Edit</Button> <Button className={classes.button}>Duplicate</Button> <hr /> <Button c ...

cssreactjsmaterial-ui

`Flexbox: Achieving Alignment of Items``

I am looking to align items in a specific way. My goal is to have 4 items in one row, and then the remaining 3 items in the next row, all centered. Despite setting the width at 25%, I am encountering some issues with alignment. Please check out the code ...

htmlcssflexbox

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

Toggle visibility with JQuery's onClick event

I am looking for a way to toggle the visibility of text that has display: none; in CSS when a button is clicked, as well as clear the input field on the onClick event. Currently, the text remains visible even after it has been displayed. Any assistance wou ...

jquerycss

Struggling to grasp the concept of using z-index in CSS

As a programmer versed in Python, C, Java, and Delphi, I am not a web developer or designer by trade. However, when required to fill those roles, I do my best; please be patient with me. :-) I have created a map (with a background image as a div), where I ...

jqueryhtmlcssz-index

I prefer showcasing the contents at the top of the page instead of the bottom

Is there a way to show the message for the $myGame variable after submitting a post? <!DOCTYPE HTML> <html> <head> </head> <body> <?php $myGame = ""; if ($_SERVER["REQUEST_METHOD"] ...

phphtmlpost

Creating a unique icon using Jquery Mobile for a button in a PhoneGap application

Has anyone experienced issues with using a custom icon for a jQuery mobile button? I am having trouble as it is only showing a grey circle instead of the actual icon. The default icons work fine, though. Here is the code snippet from the index.html page: ...

javascriptcssjquery-mobilecordovajquery-mobile-button

Tips for incorporating personalized form and input directives in AngularJS while addressing issues with transcluded scope

Over the last few days, I attempted to implement something along these lines: %myform(name='somename' ng-controller='whatever') %myinput(ng-model='user.firstName' ... The controller has a user structure with firstName, l ...

javascripthtmlangularjsformshaml

Background image that covers the entire page

I am using background-size:cover to ensure that the entire background positioning area is covered by the background image. However, I've noticed that setting it to "cover" sometimes cuts off parts of my background image. Is there another way to achiev ...

htmlcssbackground

When you select the checkbox button, a textfield and submit button will appear. Once you click the submit button, the checkbox button will be disabled

<td> <input type="checkbox" ng-model="alert.acknowledged" ng-disabled="alert.acknowledged" ng-click="onacknowledgedClick(alert)"></td> <td> <span ng-if="!alert.acknowledgeInProgress">{{alert.acknowledgedComments}}</span&g ...

javascriptjavahtmlangularjs

In Internet Explorer 7, the combination of having a hasLayout property along with setting the position to relative,

Issue: Encountering a challenge in IE7 with a div containing a gradient and a flyout menu on hover. Although it may seem simple, applying position:relative to the container for accurate menu positioning conflicts with the filter/hasLayout combination. Ch ...

cssinternet-explorer-7

When a user hovers over the image, a button is revealed

I have a test page on my website: If you'd like to check it out, feel free to visit: I am trying to create a feature where when you hover over an image, a black button with text and links will appear. When you move your mouse away from the image, ...

csshovermouseovercenter

The layout of my website appears distorted on mobile devices

When I view my website, http://www.healthot.com, on an iPhone or other mobile device, the page doesn't display correctly. It scales the window, requiring me to zoom out to see the entire page. To better understand the issue, please refer to this photo ...

javascriptjqueryhtmlcssmobile

HTML block failing to implement Bootstrap styling

I am struggling to integrate Bootstrap into Drupal. I have used the 'row' class for the contact ID and added col-sm-12 for title and desc, but it is not working as expected. The width of the container seems off. Also, the accordion.js script work ...

jqueryhtmlcss

Using Javascript to dynamically flash-highlight text on a webpage when it first loads

I am looking to create a special highlight effect that activates when the page loads on specific text. Let's focus on the element with id="highlight me". The highlight should glow twice around the selected container before fading out. For a clear unde ...

javascripthtmlanimation

Issue with symbol not rendering correctly in Email Body when setting width to '100%' in Postman

I'm currently working on sending emails using APIS in NodeJS. The issue I am facing is related to the CSS code with '%' symbols triggering errors when attempting to send the email via Postman, resulting in a 500 error. However, removing the ...

htmlcssnode.jspostmanemail-client

Adjustments made to the size of the h1 font

I am perplexed by the fact that these two h1 tags have different font sizes, even though they have identical properties and declarations. From what little knowledge I have, it seems like it may be related to inheritance; considering one h1 tag is nested an ...

csstypography

"Dynamic" visual in a Vue.js development scheme

Utilizing Vue.js for the development of a hybrid mobile application has been my current focus, with the Quasar framework serving as a key component. Recently, I incorporated an image into the application using the <img /> tag and utilized the followi ...

javascriptcssvue.js