The CSS dropdown menu appears in a horizontal layout rather than vertical

**

body 
        {

        background-color: #9cb4c0;

        background-size: 100% 100%;
        }

        .div-1
        {
        float: right;

        padding: 20px 10px;
        }

        h2
        {
        text-align: right;
        }

        h3
        {

        text-align: left;

        color: white;
        }

        a:link
        {

        color: rgb(7, 19, 86);
            
        background-color: transparent;
            
        text-decoration: none;

        font-size: 20px;
        }

        a:visited 
        {
            
        color: orange;
            
        background-color: transparent;
            
        text-decoration: none;
        }
        ...

**I've attempted multiple times to resolve the issue without success. Are there any suggestions on how to correct the vertical display of the drop-down menu? Additionally, it seems that "a:visited" is not functioning correctly. How can this be fixed?

Here is my CSS code;

a:visited { color: orange; background-color: transparent; text-decoration: none; } .list-2 { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #228bbb; } ...

Here is my HTML code;

<ul class = "list-2">
<li> <a href = "/Home/" target = "_blank"> Home </a> </li>
<li style = "float : right"> <a class = "active" href = "/About Us/" target = "_blank"> About Us</a> </li>
<li> <a href = "/Membership/" target = "_blank"> Membership </a> </li>
<li> <a href = "/Staff/" target = "_blank"> Staff </a> </li>
<li> <a href = "/Search/" target = "_blank"> Search </a> </li> 
<li class = "dropdown"> <a href = "javascript:void(0)" class = "drop-button"> New Arrivals </button> </a>
    <div class = "dropdown-content">
        <a href = "/Books/"  target = "_blank"> Books </a>
        <a href = "/Magazines/"  target = "_blank"> Magazines </a>
        <a href = "/News Papers/"  target = "_blank"> News Papers </a>
    </div>
</li>

htmlcssdrop-down-menuhover

Answer №1

I have customized this codepen demonstration to suit your needs: https://codepen.io/philhoyt/pen/ujHzd

You may need to tweak the appearance of the menu, but it should operate as expected:

ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
width: 100%;
}

ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

ul li:hover
{
background:#f6f6f6
}

ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

ul ul li
{
float:none;
width:200px
}

.right-menu-item 
{
  float: right;
}

ul ul a
{
line-height:120%;
padding:10px 15px
}

ul ul ul
{
top:0;
left:100%
}

ul li:hover > ul
{
display:block
}
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Membership</a></li>
  <li><a href="#">Staff</a></li>
  <li><a href="#">Search</a></li>
  <li><a href="#">New Arrivals</a>
    <ul>
      <li><a href="#">Books</a></li>
      <li><a href="#">Magazines</a></li>
      <li><a href="#">News Papers</a></li>
    </ul>
  </li>
  <li class="right-menu-item"><a href="#">About Us</a></li>
</ul>

Answer №2

Your HTML structure is not quite right at the moment. Consider implementing the following:

<ul class = "list-2">
  <li> <a href = "/Home/" target = "_blank"> Home </a> </li>
  <li style = "float : right"> <a class = "active" href = "/About Us/" target = "_blank"> About Us</a> </li>
  <li> <a href = "/Membership/" target = "_blank"> Membership </a> </li>
  <li> <a href = "/Staff/" target = "_blank"> Staff </a> </li>
  <li> <a href = "/Search/" target = "_blank"> Search </a> </li> 
  <li class="dropdown">
    <a href = "javascript:void(0)" class = "drop-button"> New Arrivals </a>
    <ul class="list-2 dropdown-content">
      <li><a href = "/Books/"  target = "_blank"> Books </a></li>
      <li><a href = "/Magazines/"  target = "_blank"> Magazines </a></li>
      <li><a href = "/News Papers/"  target = "_blank"> News Papers </a></li>
    </ul>
  </li>
</ul>

Ensure you adhere to the coding standards mentioned in the comments for your future code submissions!

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

Incorporate Bootstrap into your Bigcommerce stencil theme for seamless design integration

As a newcomer to BigCommerce's Stencil theme, I am looking for guidance on integrating Bootstrap into the theme for local development. Is it feasible to incorporate custom CSS and JS into the Stencil theme as well? ...

csstwitter-bootstrapthemesbigcommerce

Navigating on the horizontal axis within a container with overflow properties

I am trying to insert multiple children-divs into a parent-div. The parent div has a fixed width. The children are set to float left and will overflow the container. I need the ability to scroll along the x-axis. However, when I attempt to do this, the c ...

htmlcss

Glitch in jQuery causing multiple instances of text being added to a textarea consecut

I created a response system where users can reply to comments by clicking on the reply button. Once clicked, it triggers a function that adds @user at the beginning of their comment: $('#inputField').focus(); $('#inputField').text(&apo ...

jqueryhtmltextareaappend

The width of PrimeVue InputNumber is too wide for its parent container

I currently have a collection of items in the shopping cart that are displayed using Bootstrap rows and columns. Each item includes a PrimeVue InputNumber component for adjusting the quantity of a specific product within the cart. If you'd like to ex ...

cssvue.jsvuejs3bootstrap-5primevue

Resetting the "clear: both" property for the nth-child element when multiple nth-child elements are being inherited

Currently utilizing CSS (specifically SCSS) to style the same element on various media sizes - A, B, and C. Utilizing the following for A: &:nth-of-type(2n+1) { clear: both; } For B: &:nth-of-type(3n+1) { clear: both; } Finally, for C: ...

csssasscss-selectors

How can the name attribute be utilized in HTML?

I am feeling a bit perplexed about the purpose of the name attribute in HTML. Is it correct to say that the value of the "name" attribute is used on the server side to identify an HTML element (such as <form>, <iframe>, <meta>) and poten ...

htmlattributes

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

Is there a way to store a dynamically generated time value from an li element into an input box using JavaScript? I have a basic timer functionality on my website that includes starting, stopping, pausing, taking time snaps, and resetting them. These time ...

javascripthtml

What could be wrong with my hover command not functioning properly?

I've been attempting to create a dropdown menu using some basic CSS, but I can't figure out why the dropdown isn't functioning. I've tried everything I can think of. Below, I've included the CSS and HTML code for reference: < ...

htmlcss

Automatically resize and vertically align a centrally positioned div in a designated container

I have a div container that is centered in the middle of another container. I managed to adjust it for one slide, but the issue arises when I create multiple .html files using the same css file - the height of the container does not meet my expectations. I ...

htmlcss

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

htmlcss

A workaround for background-size in Internet Explorer 7

Currently, I am working on a project at this link: Everything seems to be functioning well in Firefox and Chrome, however, I have encountered an issue with the background-size property not being supported in IE7. I heavily rely on this property throughout ...

cssinternet-explorer-7

Locate and substitute `?php` and `?` in a given string

I am facing a challenge with inserting a large string of valid HTML code into the DOM, as the string also includes PHP code. When Chrome renders the code, it automatically comments out the PHP sections. The PHP code is encapsulated in <?php ... ?>, s ...

javascriptjqueryhtml

The long press event is not being detected in phonegap-android

There is an issue I am experiencing with phonegap-android. The functionality is such that when you touch on text *(on an html page)*, a plugin will be called and a dialog box will appear where you can enter some text. However, when I do a long click on ...

javascriptandroidjqueryhtmlphonegap-plugins

Angular 4 allows the addition of an image from right to left upon clicking

I've been working on angular 4 and I've successfully implemented the functionality of adding flags. However, the issue is that the flags are currently appearing from left to right. What I'm aiming for is to have the images appear from right ...

htmlcssangular

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons Below is some c ...

htmlcssangulartypescript

How to send the chosen option value from a select tag in Python Flask

My user registration form features a select tag, and I'm trying to assign the value of the selected option to a variable using the code below: registration.html <form method="POST" action="/register"> <div class="form-group"> ...

pythonhtmlflaskflask-wtforms

Employing the HTML post method in conjunction with checkboxes

I am facing an issue while trying to use the HTML post function with PHP to insert a value of 1 or 0 into a database based on whether a user has checked a checkbox or not. Every time I submit the form, I encounter index errors regardless of the checkboxe ...

phphtmlmysqlphpmyadminxampp

Trouble with CSS styling for focused input fields

Attempting to style a form by Patriot with CSS, I encountered an issue. input#card-month:focus ~ label.card-label.label-cardExpiryYear { font-size: 20px !important; /* This works fine */ } input#card-month:focus ~ label.card-label.label-cardExpiryMont ...

csswordpressinputcss-selectors

Error encountered: Unable to load Angular Materials due to [$injector:modulerr] issue

Can someone help me figure out what's wrong here? <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="description" content=""> <meta name="viewport" content="width ...

javascriptjqueryhtmlangularjs

How can I ensure that the NextJS Image component fills its parent div completely in terms of both height and width?

Having trouble getting the Image component to behave like the img element? Can anyone provide a solution for making Image achieve the same result as shown in the example below? <div style={{ width: "100vw", height: "100vh", display ...

cssreactjsnext.jsnextjs-image