What is causing my <ul> to display improperly? (Wordpress)

I'm currently in the process of creating my website using Wordpress. I wanted to include a custom horizontal menu using only CSS and HTML as I wasn't satisfied with existing plugins. Here is the HTML code I used:

        <div id="provamenutop">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>

As for my CSS, it looks like this:

        #provamenutop {background-color:#333; width:90%; line-height:100%;}
        #provamenutop li {position: relative; float:left; list-style: none; font-family:verdana;}
        #provamenutop li a {display:inline-block; text-decoration:none; padding: 20px; color: white; background: #333; transition:.4s;}
        #provamenutop li a:hover {background: #111;}

When I view it on my local computer, everything appears correctly: https://gyazo.com/d5b38f6cc1c7857dbe37945e2d8b5002

However, when I implement it on my website using a custom theme called Sportexx, the menu looks different: https://gyazo.com/5ccb7e944b627244a7d3ac8344471b28

I suspect that there may be some conflicting CSS within the theme causing this issue. How can I resolve this problem? (Additionally, there seems to be an unwanted clickable space between each "Home" button)

Thank you for taking the time to read this.

htmlcsswordpress

Answer №1

When you utilize the Chrome Developer Tools or Firefox Firebug to inspect the HTML, you will come across the following code snippet for your menu on the website 

<div id="provamenutop">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
</ul>
</div>

The issue at hand is not with the CSS, but rather with faulty HTML. There are two extra <a href...></a> tags present - one before the word Home and another outside the closing </li> tag, as well as one outside the closing </ul> tag.

If the HTML is modified to resemble the corrected version below, then it should function correctly:

<div id="provamenutop">
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
  <li><a href="#">Home</a></li>
</ul>
</div>

Answer №2

Seems like there's a CSS conflict going on here. Could you provide us with a link so we can troubleshoot using Firebug? It should be a simple fix. When I tested your HTML and CSS in JSFiddle, it worked perfectly.

I'm not quite sure what you're referring to by saying "On my local computer, this looks right:" However, this is how it appears on my website with the Sportexx theme applied:

Are you using the Sportexx theme on your local machine as well? If the issue only occurs with the theme but not without it, then the problem lies in the CSS. Simply open Firebug in your browser, inspect the menu's CSS, make adjustments as needed, and update your stylesheet accordingly.

Upon reviewing your comment, it seems the root cause is actually within the HTML itself. Try removing the unnecessary links to resolve the issue.

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

Executing functions after the completion of a CSS animation

I am currently utilizing Vue3. I have implemented a feature where the box grows in size when the mouse hovers over it. .curl:hover { width: 200px; height: 200px; } I am looking for a way to notify the user once the animation is complete and the size has ...

javascriptcssvue.js

"Maximizing Theme Customization: Modifying WordPress Parent Theme Options in a Child Theme

I am looking to customize the parent theme option within my child theme. How can I achieve this using code in my child theme? The issue I am facing is that I am currently using a pre-made Wordpress theme and I want to add new options to the theme settings ...

phpwordpresschild-theming

Use jQuery to gather all the values from an HTML select element

I am using PHP to generate a HTML select option based on folders in a directory. Now, I am looking for a way to retrieve the value of the selected option in my jQuery script. I am familiar with $('#select :selected').text() and $(#select).val(), ...

jqueryhtmlhtml-select

Issues occur when attempting to save comments from the frontend in a Django environment

Hey there, I'm having some trouble with comments on my website. When using Class Based Views (CBV), the form is not saving the comments. Below is the code snippet from my models.py: class Product(models.Model): title = models.CharField(ma ...

javascriptpythonhtmldjangoweb

The data-offset attribute in Bootstrap Scrollspy seems to have no effect on the offset

My attempts to adjust the data-offset for scrollspy seem to have no effect. Below, you can find the relevant snippets of HTML, CSS, and JS: HTML <nav class="navbar navbar-fixed-top navbar-default"> <div class="container-fluid"> <div ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Seeking particular section of online content in an asynchronous manner

Is there a method for asynchronously requesting a specific portion of a web resource (like the initial 100 bytes) using JavaScript? I believed this could be accomplished through XmlHttpRequest by adjusting its Range header. However, if the server utilizes ...

javascriptajaxhtmlhttpxmlhttprequest

Including a JavaScript file in an HTML document initiates a server request, which can lead to potential errors

I am currently developing a web application using Express and Node.js on the backend, with EJS as the templating engine on the frontend. Here is a snippet of my app.js file: app.get('/book/:id', (req, res)=>{ var book_id = req.params.id; cons ...

javascripthtmlnode.jsexpressejs

Using jQuery to store the last selected href/button in a cookie for easy retrieval

Recently, I've been working on a document that features a top navigation with 4 different links. Each time a link is clicked, a div right below it changes its size accordingly. My goal now is to implement the use of cookies to remember the last select ...

javascriptjqueryhtmlcsscookies

Is there a way to transform Python's JSON object into an HTML table?

Creating a webpage using Flask and encountering some issues with Python syntax: @app.route('/uploads/<filename>') def uploaded_file(filename): reader = shapefile.Reader("./uploads/"+filename) fields = reader.fields[1:] field_names = ...

javascriptpythonhtmlflask

The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over. Here is the HTML file: <div class="col mb-4"> <a class="text ...

htmlcssgoogle-chromebootstrap-4

The button is functioning properly on desktops using bootstrap, but is unresponsive on mobile devices

I have successfully created a bootstrap button with an embedded link. Here is how it appears: Upon hovering over the button: This is the code snippet for the button: <div class="s-8"><button type="button" onClick="javascript:location.href = &ap ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Is it considered the most appropriate method to implement a dynamic web page refresh by utilizing PHP, HTML, and AJAX in order to read a

My PHP page currently displays data from a database in tables, but the information is frequently changing. This means that the entire page has to be reloaded every few seconds. I am looking for a way to query the database and update only the section of HT ...

phphtmlajax

A menu displaying a selection of the text

When using IE9, my drop down list only displays part of the text. For example, if I select "Hello World", it only shows "Hello". I tried disabling the CSS and discovered that the issue is caused by the following code: .ui-widget { font-family: Verdana; f ...

cssinternet-explorer-9

Select a date by clicking, then enter the data into the input field

My setup includes two PHP files: index.php and add.php. Here's my situation: when a user clicks on a day link in index.php, I want them to be redirected to add.php and have the clicked day automatically populated in the date input field. Sample code ...

javascriptphphtml

JavaScript code for displaying div elements

How can I use script code to show different divs when a button is clicked? This is my current progress: ''' <head> <style> #div-1, #div-2, #div-3{ display: none; width: 100%; padding: ...

javascripthtmlcss

Turn off the password manager feature in the HTML password field

Users need to be able to change their password, so I have included 2 fields on a form for this purpose: Enter your new password Re-enter your new password (values for both fields must match) To ensure user privacy, I am using input type="password" field ...

htmlautocompletepasswords

Generating an HTML hyperlink to trigger a button click event on another page

After implementing the code snippet below, I successfully managed to create a stylish Link with parameters that directs users to a specific page: <style> .fancy-link{ color: #FFFFFF; text-decoration: none; transition: ...

htmlcss

Ways to layer two divs on each other and ensure button functionality is maintained

In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image. Here&apo ...

javascriptreactjscss

Check the File Format (not just the Extension) prior to Uploading

When uploading a file within an HTML form, you can validate the extension using JQuery's Validation plugin: <form enctype="multipart/form-data" id="form-id"> <input type="file" name="file-id" id="file-id" /> </form> To validate ...

javascriptphpjqueryhtmlupload

Customize the Position of Icons in Material UI

I am looking for guidance on how to position my components within an image using Material UI. Specifically, I want to move my heart component to the top right corner of the image and place the ratings at the bottom. import image from "../../Assets/pic ...

cssreactjsmaterial-ui