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

Is there a way to automatically scroll vertically to a specific line in HTML?

Learn how to assign an ID to a React component in order to access it using the document.getElementById() method

Modifying Element Values with JavaScript in Selenium using C#

Integrating threejs dynamically into a Create React App environment

Can the parent's :active pseudo class be overridden?

What is the best way to switch between different styles for each paragraph using CSS?

Exploring innovative designs for asynchronous JavaScript programming

Phonegap Application: Page design gets distorted following keyboard input

Steps to display an angled bracket to indicate a line break

"Looking to retrieve data from an array instead of an object in JavaScript? Here's how you can

Tips for passing registration form data, uploading images, and implementing validation via Ajax in CodeIgniter

"Returning undefined: The outcome of using jQuery's .html() method on

Click to stay in the background

Reset the checked state in React JSX to false by using a reset button

Is there a way I can retrieve my Nodemailer email and store it in a variable?

How to create a clickable link using Vuetify's v-btn component

Querying a map within a Mongo function results in an empty variable when accessed outside of the function, but

How can one deactivate a <MenuItem> component in material-ui?

What is the best way to access the data stored within a Promise object in a React application?

Download a file on button click using JavaScript with data extracted from the DOM