Display the CSS dropdown menu as a block`

I've been attempting to design a dropdown menu. My goal is for the anchor tag to display when hovered over. I understand that using display:block won't work when the 'a' is not part of the block, but I'm unsure how to proceed. Any assistance would be greatly appreciated! Thank you! However, display: block isn't producing the desired result. Below is the HTML and CSS code:

<!DOCTYPE html>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en">      <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>

<meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
        <title>Motrium - Home</title>
          <script src="js/vendor/custom.modernizr.js"></script>
      <link rel="stylesheet" href="css/james222.css" type="text/css">
 </head>
<body style="background-color: #C1C1C1;">
 <div class="wrapper">
<div class="form-brand">
    <a class="brand" href="#">Motrium</a>
</div>

     <ul class="brand-nav">
    <li><a href="#">Home</a><br /></li>
    <li><a href="#">About</a><br /></li>
    <li><a href="#">Contact</a></li>
        <li class="dropdown-holder"><a href="#">Downloads</a>
            <ul class="dropdown-menu">
             <li><a href="#">TEST</a></li>
            </ul>
        </li>

 </ul><br />
 <div class="form-login">
    <input type="text" name="user_name" placeholder="Username" class="input-text-normal" style="width: 114px;">
    <input type="password" name="user_pass" placeholder="Password" class="input-text-normal" style="width: 114px;">
    <input type="submit" value="Login" class="input-button" style="width: 125px;">
    <p class="form-text">Dont have an account yet? <a href="#">Register.</a></p>
 </div><br />
 <div class="form-views">
    <!-- hitwebcounter Code START -->
     <img src="http://hitwebcounter.com/counter/counter.php?page=4929727&style=0025&  nbdigits=6&type=page&initCount=0" title="50 styles" alt="Website Views" border="0" >
     </div>
 </div>



  <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="js/foundation.min.js"></script>
  <!--

  <script src="js/foundation/foundation.js"></script>

  <script src="js/foundation/foundation.alerts.js"></script>

  <script src="js/foundation/foundation.clearing.js"></script>

  <script src="js/foundation/foundation.cookie.js"></script>

  <script src="js/foundation/foundation.dropdown.js"></script>

  <script src="js/foundation/foundation.forms.js"></script>

  <script src="js/foundation/foundation.joyride.js"></script>

  <script src="js/foundation/foundation.magellan.js"></script>

  <script src="js/foundation/foundation.orbit.js"></script>

  <script src="js/foundation/foundation.placeholder.js"></script>

  <script src="js/foundation/foundation.reveal.js"></script>

  <script src="js/foundation/foundation.section.js"></script>

  <script src="js/foundation/foundation.tooltips.js"></script>

   <script src="js/foundation/foundation.topbar.js"></script>


    <script>
    $(document).foundation();
   </script>
</body>
</html>

*
{

}

.wrapper
{
padding-top: 10px;
padding-bottom: 20px;
    margin: 10px;
}

.brand
{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
}

.brand-nav
{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 30px;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
width: 200px;   
height: 200px;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}

.brand-nav a:link{
text-decoration: none;
color: white;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
}

.brand-nav a:visited{
color: white;
}

.brand-nav a:hover{
text-decoration: none;
color: black;
height: 55px;
background-color: #C1C1C1;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
}

.brand-nav li{
  list-style: none;
}

.input-text-normal
{
height: 25px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #C1C1C1;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
margin-bottom: 5px;
}

.input-button
{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 20px;
font-weight: bold;
color: white;
background-color: #C1C1C1;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 8px;
padding-left: 5px;
padding-right: 5px;
margin-top: 10px;
margin-bottom: 5px;
}

.form-views{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
height: 30px;
width: 200px;
text-align: center;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
}

.form-login
{
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
text-align: center;
width: 200px;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
}

.form-text{
color: white;
font-size: 14px;
}

.form-text a:link{
text-decoration: none;
color: white;
}

.form-text a:visited{
color: blue;
}

.form-text a:hover{
color: black;
}

.form-brand{
width: 200px;   
height: 45px;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
text-align: center;
}

.dropdown-menu a:link{
color: white;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 18px;
color: white;
text-shadow: 3px 3px 4px gray;
text-decoration: none;
}

.dropdown-menu a:hover{
display: block;
}

.dropdown-menu{
width: 110px;
border-style: solid;
border-width: thin;
border-color: black;
border-radius: 10px;
background-color: gray;
text-align: center;
padding: 5px;
padding-left: 20px;
padding-right: 20px;
display: none;
}


.dropdown-menu:hover{
display: block;
}
htmlcss

Answer №1

Consider incorporating the following snippet into your CSS to enhance the functionality:

.dropdown-holder:hover .dropdown-menu{
    display:block;
}

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

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

htmlcssbackgroundopacity

Is there a way to center the text vertically within an anchor tag?

How do I align text vertically within an anchor tag? Here's a visual representation of the issue: The text "Publisher Search," "Add a New Publisher," and "Edit a Publisher" should be aligned vertically in the "bar." This is the coding structure: & ...

htmlcss

Implement jQuery to close multiple div elements

My dilemma involves a series of divs with different manufacturer IDs listed as follows: manufacturer[1], manufacturer[2], manufacturer[3], ... etc ... In attempting to create a JavaScript for loop to hide each div, I discovered that it was not achievab ...

javascriptjqueryhtmlcss

The 600 pixel wide page is not completely filling the 640 pixel width screen on a mobile device

Currently, I am conducting a test on a webpage using an iPhone 5s with a screen resolution of 1136 x 640 pixels. The meta tag is set as follows: <meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width, shrink-to-fit=no"&g ...

htmlioscssmedia-queriesresponsive

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

javascriptcssreactjs

What is the best way to adjust the specific scope of every element generated by ng-repeat within a directive?

Attempting to simplify tables in Angular, I am working on a directive. My goal is for the user to only need to provide the list object and the formatting of each list element in the HTML, using the my-table tag as shown below... <h3>My Table</h3& ...

javascriptjqueryhtmlangularjs

Associating data with controller upon click event

My application displays a tab full of objects for the user to choose from by clicking on any line. Once they make their selection, I need to send specific data related to that object to the server. This is what the interface looks like: https://i.sstatic ...

javascripthtmlangularjs

Develop a straightforward static webpage and set it up by installing and launching it using NPM

I am attempting to craft a straightforward HTML page that incorporates CSS/JS and utilizes npm. The objective is to construct a basic page that can be accessed by simply using "npm install" and "npm start". As an example, I will design a page with HTML, ...

htmlnode.jsnpmvue.js

Customize the MUI Slider Component with unique colored thumbs

Check out MUI's slider component at this link. I'm using it to let users select a value range with two thumbs. You can find the documentation for MUI's multi-thumb slider here. If you want to customize the style of the slider thumb, visit ...

javascriptcssreactjsmaterial-uislider

Chrome scrolling causing Webkit mask to shift position

I have successfully created a rounded Google map after much effort. Here is the link to the JSFiddle: http://jsfiddle.net/DZTvR/13/ However, I encountered an issue in Chrome where the mask remains static while scrolling, unlike other browsers like FF, Op ...

htmlcssgoogle-chromewebkit

I am looking to add some flair to my ID "checkimg" using JavaScript

JavaScript if ((valid1 && valid2 && valid3 & valid4 && valid5 && valid6 && valid7 && valid8)==1) { // include an image in the specified ID. document.formElem.next1.disabled=false; } else { docume ...

javascriptjqueryhtmlcss

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

javascripthtmlcsssass

Resetting the CSS for an input field: a step-by-step guide

My situation involves having a global CSS style set for text type inputs, such as: input[type=text] { padding:10px; width:100px; //and many more } Now, I am incorporating a plugin called colorpicker into a specific div. This plugin generates some input e ...

javascriptjqueryhtmlcsscss-reset

I found that the Angular checkbox was only allowing me to select one value at a time instead of

Hey there, I am currently working on an angular tickbox where I want to be able to tick multiple values. However, I am facing an issue where only the latest checkbox value is displayed instead of both English and German together. How can I populate data fr ...

htmlangulartypescript

What is the process for clicking a button in Selenium Python that lacks a "select" tag and only becomes clickable after fulfilling certain conditions?

Currently, I am working on automating the process of downloading files. To locate these files, I need to interact with two dropdown menus: one named 'Select Period' where I choose a date, and the other named 'Select File Type' where I s ...

pythonhtmlselenium-webdriverautomationwebdriver

Develop a website using HTML and CSS for the front-end design, complemented by Java for the

I find myself at a standstill with a project I want to tackle, but unfortunately, my knowledge of modern web development, particularly full stack, is minimal. As a result, I am completely clueless on how to proceed. Here is what I am familiar with and what ...

javahtmlcssweb-deploymentminecraft

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

Guide on attaching an event to every dynamically created element in JavaScript

I'm currently generating 'li' elements dynamically using a loop and running into issues when it comes to assigning events to each generated element. My goal is to assign an onclick event to every li element that is created. Check out the co ...

javascripthtmlcss

Unresolved Issue: Jquery Modal Fails to Activate on Subsequent Click for Ajax-

When I make an Ajax call, I load HTML into a div. This HTML content contains a jQuery modal that opens when clicked. However, on the first click, the modal opens correctly. On subsequent clicks, I receive the following error in the console: Uncaught Type ...

javascriptjqueryhtmlcssajax

Dynamic presentation created with Serif software

As a newcomer to web coding and one of the older generation, I recently created a basic .swf slideshow using Serif's graphic software. However, I realized that it does not display on an Apple iPad. You can experience this issue quickly here. My questi ...

javascripthtmlflash