The menu is not displaying the correct list style

I have created a clickable dropdown menu and I am trying to add circles behind the text on each list item (LI) but for some reason, it's not working. I checked my CSS code and I don't see any conflicts that would be causing this issue. Can someone take a look and see if there is an error in my code?

HTML CODE: 

    <ul id = "mobddown" style="display: none;">
        <a href="#"><li>Берово</li></a>
        <a href="#"><li>Берово</li></a>
        <a href="#"><li>Берово</li></a>
        <a href="#"><li>Берово</li></a>
    </ul>

CSS CODE:

#mobddown{
    font-size: 2em;
    display: none;
    margin: 0;
    padding: 0;
    list-style-type: circle;
}

#mobddown li{
    display: block;
    margin: 0;
    padding: 0.4em;
    width: 100%;
}

#mobddown a{
    text-decoration: none;
    color: black;
    width: 100%;
}

#mobddown li:hover{
    background-color: #35aa96;
    color: white;
}
htmlcss

Answer №1

It is important that the li tag is directly nested within the ul tag. A proper way to place a link inside a list item would be:

<ul id = "mobddown" style="display: none;">
    <li><a href="#">Berovo</a></li>
    ...
</ul>

UPDATE

If you prefer the entire content of the <a> tag to be clickable, you can use CSS to add a bullet point:

.bulletPoint:before{
    content:"• "
}

In your HTML:

<div id = "mobddown" style="display: none;">
    <a href="#" class="bulletPoint">Berovo</a>
    ...
</div>

Answer №2

There are a few things to consider in your code.

  1. Firstly, ensure that li is the immediate child of ul

  2. Remove padding and margin on ul, but keep it on li elements

  3. Li elements are already block elements and will occupy 100% of the width

Check out this snippet:

#mobddown {
  font-size: 2em;
}
#mobddown li {
  margin: 0;
  padding: 0.4em;
  list-style-type: circle;
}
#mobddown a {
  text-decoration: none;
  color: black;
  display: inline-block;
  width: 100%;
}
#mobddown li a:hover {
  background-color: #35aa96;
  color: white;
}
<ul id="mobddown">
  <li> <a href="#">Berovo</a>
  </li>
  <li> <a href="#">Berovo</a>
  </li>
  <li> <a href="#">Berovo</a>
  </li>
  <li> <a href="#">Berovo</a>
  </li>
</ul>

I hope this information helps!

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

Display or conceal images based on the selected option from the dropdown menu

Is it possible to create a dropdown menu that represents numerical values and dynamically displays a certain number of images based on the selected value? If anyone could provide assistance, I would greatly appreciate it. <div> <sele ...

phpjqueryhtml

Tips for placing the Save button on the right side of a form

In my HTML document for an Angular application using BootStrap4, I am trying to right-align the SAVE button underneath the second form in the same row. I have divided the div container into two forms using col-6 classes for each, but despite trying various ...

htmlcssbootstrap-4

Switch out the DOM element for either the opening tag or the closing tag only

Currently, I utilize Blogger for my blogging needs. However, I have encountered an issue where pressing enter in the Rich Text Editor generates <br /> (line break) tags rather than <p></p> (paragraph tags). Unfortunately, there is no appa ...

javascriptjqueryhtmlbloggerreplacewith

Creating an interactive dropdown feature using AngularJS or Ionic framework

$scope.AllCities = window.localStorage.getItem['all_cities']; <div class="row"> <div class="col"> <div class="select-child" ng-options="citie.name for citie in AllCities" ng-model="data.city"> <label&g ...

javascriptangularjshtmlionic-framework

"Embedding Bootstrap, jQuery, and Twitter Bootstrap directly onto

I'm currently working on customizing some source code to fit my needs. To do this, I need to download and use Bootstrap, jQuery, and Bootstrap locally. I have already downloaded all of them to a directory named "libs". However, when I try to run the P ...

phpjquerycsstwitter-bootstrap

Separate a set of HTML elements with specific heights into individual page divisions

The current method in place is quite average: Prior knowledge of each object's height is required. We possess a set of such objects that could potentially be separated by a page break. We start with a blank slate and insert an opening <div class= ...

jqueryangularjshtml

Importing script files based on certain conditions

I am trying to dynamically import script tags based on a parameter set in the URL. Here is my current approach: function getURLValues(name) { var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location ...

javascripthtml

Tips for refreshing the <img> tag using a user image

I am currently designing a bootstrap webpage and trying to implement a feature where the user can input an image, which will then be displayed in a preview modal along with some text provided by the user. The modal is functioning correctly. Here is the co ...

javascriptjqueryhtmlcsstwitter-bootstrap

Show Hindi content in Android web browser

I am currently developing an application that requires displaying Hindi text in an HTML format. I need to display an entire HTML page with content in Hindi. Can someone assist me with this? Any help would be greatly appreciated. Here is a snippet of my cod ...

androidhtmlhindi

What is the best way to create this menu using a CSS pseudo-class selector?

I have created a menu and now I want to enhance its functionality by adding keyboard support. My goal is to make the menu accessible using keyboard keys, such as pressing Enter to show the menu, Tab to navigate through menu items, and ESC to hide the menu. ...

javascripthtmlcssajax

Encase every picture within a div and add a numerical label in front of it

I'm working on a function that will wrap each image in a div and add a span label for each image. Here is the code I have written so far: $('#carousel img').each(function(index) { $(this).wrap('<div class="image"></div>& ...

jqueryhtmlimage

What are the methods for removing the color green with CSS or JavaScript?

Is it possible to isolate only the red and blue color components in an image or text using CSS 'filter' feature? If so, can someone please provide guidance on how to do this? Thank you. ...

javascripthtmlcss

Set a CSS rule to style every other row in a table, starting from the second row and resetting after

Is there a way to refresh the even and odd count in CSS whenever a specific row is shown? Here's an example setup: header header header even even even odd odd odd Subhead Subhead Subhead even even even How can I ensu ...

htmlcss

Toggling with Jquery when an image is clicked

I'm trying to wrap my head around the functionality of jquery toggle. My goal is to toggle to the next anchor element with the class plr-anchor when an image with the class go_down is clicked. The information is being populated using maps. Javascript ...

javascriptjqueryhtmlreactjstoggle

Choosing the Right Alignment for Your Selection Box

How can I adjust the alignment of the select box to make it inline with the others? I also need to apply this alignment to the three option input boxes. CSS: #newwebsiteSection, #websiteredevelopmentSection, #otherSection{ display:none; } #newwebsite ...

htmlcssformsalignment

Troubleshooting the malfunctioning of an AngularJS basic form

Today marks the beginning of my journey with learning AngularJS. I've spent the last half an hour trying to figure out why the scope isn't being called correctly. Could it be a problem with CodePen? My previous attempt worked flawlessly. Any help ...

javascripthtmlangularjs

The LI element containing a DIV

I am facing an issue displaying a list with hidden divs. The toggleSlide() function from jQuery is used to show/hide the DIV elements whenever the LI element is clicked. The problem arises when the DIV becomes visible; it overlays the other elements inste ...

javascriptjqueryhtmlcss

Is there a way to temporarily halt scrolling text and then resume?

Is there a way to pause the marquee for a few seconds at the end of each <li>, before continuing on to the next one? Here's my code: <div id="teks_container" > <marquee direction="up" scrollamount="3" height="200px"> <ul&g ...

javascriptjqueryhtmlmarquee

The next column featuring a dropdown menu

My goal is to make this sketch operational. The red elements in the sketch need to be programmed. Currently, I am using angularJS and bootstrap with the following code: <div class="col-md-6"> <div class="form-group"> <label&g ...

javascripthtmlcssangularjsbootstrap-modal

Do not proceed if the process has encountered a failure

Using PHP code, I have created a way for people to get in touch with me and share their opinions. Here is the PHP code snippet: <?php $to = '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef9b868c848a9bc19d869b8e988a8 ...

javascriptphphtmlajax