JavaScript drop-down menu malfunctioning

Question

JavaScript drop-down menu malfunctioning

I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success).
I would greatly appreciate it if you could review my code and let me know what might be causing any issues.

<nav>
    <ul class="anchors">
    <!-- The dropdown list should appear when hovering over this area -->
        <li class="list-comanda">
            <a href="javascript:void(0)" onmouseover="dropdown()">Comanda</a>
        </li>  
        <div class="dropdown" id="dropdown" style="display: none;">
            <ul class="dropdown-list">
                <li class="dropdown-l-magneti"><a href="magneti"> Magneti de frigider personalizati</a></li>
                <li class="dropdown-l-hartie"><a href="hartie"> Obiecte facute din hartie</a></li>
            </ul>
        </div>
        <li class="list-contact"><a href="contact">Contacteaza-ma</a></li>
    </ul>
</nav>
<script>        
    function dropdown{
        var dropdown = document.getElementById("dropdown");
        dropdown.style.display = "inline-block";
    }   
</script>

I apologize for any lack of organization in my code.

javascript css

Answer 1

Answer №1

To accomplish this task, you can utilize pure CSS. Begin by creating your menu structure and make sure to nest your drop-down list within the desired list items, which should be assigned a class of dropdown for later hiding.

<ul id='menu'>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li class='dropdown'>link 4
    <ul>
      <li>sublink</li>
      <li>sublink</li>
      <li>sublink</li>
    </ul>
  </li>
</ul>

In the above markup, one of the child li elements contains an embedded dropdown list, utilizing a class rather than an id to allow for multiple drop-down lists on the same page. IDs should be unique while classes enable repeated styling tasks.

Next, implement the corresponding CSS:

#menu {
  list-style: none;
}

#menu li {
  vertical-align: top;
  display: inline-block;
}

#menu .dropdown ul {
  background: red;
  display: none;
}

#menu .dropdown:hover > ul {
  display: block;
}

#menu .dropdown ul li {
  display: block;
}

Key points to consider include initially hiding the drop-down list with display: none, using vertical-align: top to prevent misalignment when displaying the drop-down, and applying styles upon hover using the child selector tool. Additionally, don't forget to check out this example on jsfiddle for reference.

While exploring web development, consider frameworks like Twitter's Bootstrap for quick implementation of styled components. However, it is valuable to understand the building process as well. Remember, sometimes utilizing existing code is the most efficient approach.

Answer 2

To accomplish this task, you can utilize pure CSS. Begin by creating your menu structure and make sure to nest your drop-down list within the desired list items, which should be assigned a class of dropdown for later hiding.

<ul id='menu'>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li class='dropdown'>link 4
    <ul>
      <li>sublink</li>
      <li>sublink</li>
      <li>sublink</li>
    </ul>
  </li>
</ul>

In the above markup, one of the child li elements contains an embedded dropdown list, utilizing a class rather than an id to allow for multiple drop-down lists on the same page. IDs should be unique while classes enable repeated styling tasks.

Next, implement the corresponding CSS:

#menu {
  list-style: none;
}

#menu li {
  vertical-align: top;
  display: inline-block;
}

#menu .dropdown ul {
  background: red;
  display: none;
}

#menu .dropdown:hover > ul {
  display: block;
}

#menu .dropdown ul li {
  display: block;
}

Key points to consider include initially hiding the drop-down list with display: none, using vertical-align: top to prevent misalignment when displaying the drop-down, and applying styles upon hover using the child selector tool. Additionally, don't forget to check out this example on jsfiddle for reference.

While exploring web development, consider frameworks like Twitter's Bootstrap for quick implementation of styled components. However, it is valuable to understand the building process as well. Remember, sometimes utilizing existing code is the most efficient approach.

Answer 3

Answer №2

To declare a function dropdown accurately, follow this format:

function dropdown(){//enter code here}

Answer 4

To declare a function dropdown accurately, follow this format:

function dropdown(){//enter code here}

Answer 5

Answer №3

you're invoking the dropdown function using the onmouseover event. Where can we find this function?

modify:

function dropdown{

to:

function dropdown(){

check out this JSFiddle example

Answer 6

you're invoking the dropdown function using the onmouseover event. Where can we find this function?

modify:

function dropdown{

to:

function dropdown(){

check out this JSFiddle example

Answer 7

Answer №4

In my opinion, every function should have parentheses.

<script>

        function expandMenu(){
            var menu = document.getElementById("dropdown");
            menu.style.display = "inline-block";
        }

    </script>

Answer 8

In my opinion, every function should have parentheses.

<script>

        function expandMenu(){
            var menu = document.getElementById("dropdown");
            menu.style.display = "inline-block";
        }

    </script>

Answer 9

Answer №5

Do you think it would be simpler like this:

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

Answer 10

Do you think it would be simpler like this:

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

JavaScript drop-down menu malfunctioning

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Encountered a React error stating: `TypeError: this.state.projects.map is not a

ASP.Net & Ajax Fusion Login Interface

Customize Bootstrap 4 Carousel: Set specific data-interval for each slide

"How can you enhance the performance of JavaScript and CSS in a Chrome Extension without using exclude_matches/globs or excluding domains

React failing to display changes in child components even after using setState

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

A guide on renewing authentication tokens in the Nestjs framework

Best practices for updating the token in an Angular 2/5 application - tips on how, where, and when to refresh

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

React and Lottie Animation seamlessly synchronized with scrolling movements

Using a Promise to signal the completion of certain tasks

The AngularJS directive within a directive is failing to properly initialize the scope value

Any number of elements in a single JSX code snippet

The challenge of mapping React Select

What is the method for showcasing an image before it has been uploaded?

What is the best way to implement a personalized hook in React that will return the number of times a specific key is pressed?

What could be causing the redirection issue in a next.js application?

How can JQuery be utilized to extract the information stored in the "value" parameter of a chosen option?

Tips for accessing a variable located in a different directory

What is the best way to update the innerHTML of a date input to reflect the current value entered by the user?