Changing the orientation of a dropdown menu from horizontal to vertical

Hello, I am seeking assistance to transform the top dropdown menu layout into a vertical one similar to the menu on the left side. Any help would be greatly appreciated as I am running out of ideas!

Thank you in advance!

@charset "utf-8";

/* CSS Document */

/*Index*/

#index {
  background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg);
  background-repeat: no-repeat;
  background-position: center 10;
  background-attachment: fixed;
}
#venstre {
  float: left;
}
#midt {
  float: left;
}
#header {
  position: fixed;
  top: 0;
  left: 0;
  height: auto;
}
#header a {
  list-style-type: none;
  text-decoration: none;
  color: #FFFFFF;
  font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive;
  font-size: 60px;
  float: left;
  margin-top: 32px;
  margin-left: 40px;
  margin-right: 650px;
  position: relative;
}
#header form {
  float: right;
  margin-top: 26px;
  margin-right: 49px;
}
#righto {
  float: right;
}
#lefto {
  float: left;
}
...

<body id="index">
  <div id="header">
    <div id="lefto"><a href="index.html">Rock Fans</a>
    </div>
    <div id="righto">
      <form>
        <label>
          <img src="../img/search.png">
        </label>
        <input type="search" name="search" placeholder="Search"></input>
      </form>
    </div>
  </div>
 ...

<a name="4"></a>
        </div>
      </div>
      <div id="right">
        <img src="../img/elvis/<?php echo $row['Img'];?>">
        <?php echo $row[ 'Name'];?>
        <?php echo $row[ 'Txt'];?>
        <?php echo $row[ 'video'];?>
      </div>
      <div class="footer">Designed and executed by <a href="https://www.facebook.com/LikeAMusicBox">Christina L. Pedersen</a>
      </div>
</body>

To view my fiddle example click here: http://jsfiddle.net/65pLy4sm/

Answer №1

If you're looking for something similar to this example: http://jsfiddle.net/65pLy4sm/3/

Simply update your CSS code to the following:

.second-level-menu {
    position: absolute;
    top: 0px;
    left: 100px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}
.second-level-menu > li {
    position: relative;
    height: 30px;
    background-color:#393939;
}

Answer №2

To make the necessary adjustments to your CSS, follow these steps:

#left{
   width:100px;
}

.second-level-menu {
    position: absolute;
    top: 0px;
    left: 100px;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu > li:hover {
    background: #CCCCCC;

}

For a visual representation and testing purposes, you can access the Jsfiddle using the link below: http://jsfiddle.net/65pLy4sm/5/

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

Photo on vertical display

I have been working on displaying dynamic photos from a backend file and looping through them. I have successfully displayed the images vertically using CSS. vertical-align: middle; However, when I tried to add a photo name for each image, the positionin ...

Alignment issue with Bootstrap 4 form fields within inline form group

My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...

At what point do browsers automatically insert CSS styles as attributes without them being explicitly defined?

Greetings Code Gurus, I find myself grappling with an unexpected CSS anomaly while developing a website. Here is the puzzling code snippet: <div id="..." style="padding-bottom: 78px; padding-top: 78px;" >...</div> These styles are manifesti ...

Learn how to efficiently import scripts and styles from WordPress plugins with the help of the wp_enqueue_script function

After creating my own custom Wordpress theme, everything seemed to be running smoothly. However, I soon encountered an issue where certain plugins were not functioning properly with the theme. It seems that the theme is unable to import the necessary style ...

The XPath for the span element

Is there a way to obtain the Xpath of the specific element below? <div class="datum"> <span>180 KM</span> </div> The desired value is "180 KM". I am struggling to extract it because the span element lacks a name at ...

Is it possible to write CSS 3 rows without using the :not() selector for improved efficiency?

Consider using CSS code like the following in some cases: input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border:1px solid #fff; background-color:#f3f4f5; } <div><input type="text" name="alpha" /&g ...

Utilizing tags within the pre tag to incorporate additional styles

Using pre tags to display code works well, but I need to style certain parts of the code in green. However, when I wrap the desired code in a <div> tag with styling, it affects formatting by adding newlines and swallowing spacing. How can I achieve t ...

Steps for accessing CSS variables within a scoped style block in Vue with Buefy_integration

After diving into the Buefy documentation, I successfully personalized my color scheme and even crafted unique hues by applying the is-[colorName] as a class to HTML elements. <style lang="scss"> // Importing Bulma's core @import "~bulm ...

Using CSS to create a triangular background within a <div> element

I am looking to create a CSS triangle shape for a background, but I am unsure of how to achieve this or if it is even possible. Ultimately, I want the menu to resemble the image linked below: While I have come across methods to create the desired shape, ...

What is the process for incorporating PHP into a three-dimensional virtual world?

I recently completed a client's website using a combination of PHP and basic HTML/CSS. The site's main feature is the ability for users to upload images and view them in a digital art gallery. Essentially, I positioned the images against a backgr ...

Using the PHP mail() function to send an email with an attachment

I have developed two scripts for this specific HTML code along with a corresponding PHP script. Below is the HTML markup: <html> <body> <form action="http://senindiaonline.in/admar/non-series-numbers-db.php" method="post" target="_bl ...

Fetching large images with "fill" layout in NextJS

I am currently using Cloudinary to serve correctly sized images, however, it appears that NextJS image is always fetching with a width of 3840, instead of the fixed value. <Image src={loaderUrl(logoImage)} alt="" role="presen ...

Avoid receiving input for a button that is being covered by another button

I am currently developing an Idle Game and I am looking to include 'buy buttons' for purchasing buildings, along with a sell button embedded within the buy button. Just as a heads up, these buttons are represented by DIVs acting as buttons. Here ...

Using jQuery to toggle the visibility of div elements while displaying an indicator

A query arises regarding the utilization of JQuery to facilitate toggling the visibility of text divs. The question pertains to how one can incorporate an indicator - such as an up and down arrow graphic - to denote whether the divs are open or closed. Sug ...

What is the best way to handle an array (or manually loop through ng-repeat)?

AngularJS Version: 1.3.15 Confession: While I have limited knowledge of AngularJS, I am required to utilize it due to its integration in the framework I am working with. I aim to make changes to some HTML/AngularJS code that currently appears as follows: ...

How can I dynamically adjust the stroke length of an SVG circle using code?

In my design project, I utilized Inkscape to create a circle. With the fill turned off, only the stroke was visible. The starting point was set at 45 degrees and the ending point at 315 degrees. After rotating it 90 degrees, here is the final outcome. < ...

Formatting tabular rows to appear as headers

I am currently developing a mobile website that is specifically designed for older phones with minimal CSS and HTML support. Due to these limitations, I have decided to utilize tables in my design. My goal on a certain page is to create a table row with a ...

Tips for optimizing Angular source code to render HTML for better SEO performance

Our web platform utilizes Angular JS for the front-end and node js for the backend, creating dynamic pages. When inspecting the code by viewing the source, it appears like this: For our business to succeed, our website needs to be SEO-friendly in order to ...

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...