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

Rearrange elements within a div by clicking a button

I want to shuffle div elements with a click of a button using a dissolve animation in HTML5. An example of what I am looking for is similar to this website When you scroll on the page, there are links such as All, Intro, Solution. Clicking on any link sh ...

Issues with the panel's scroll bar functionality in an HTML document

I am currently working with Bootstrap HTML 5 where I have a panel containing a table. Although I have set scroll for the panel, the table is not adjusting properly within the panel and the scrollbar appears inactive. My goal is to ensure that each header c ...

Choose the option to eliminate the dropdown arrow in all web browsers

Although my code functions well in various browsers, I am experiencing an issue with IE. I have styled the select element, but I am unable to remove the default arrow in IE. <form> <label for="selectitem">Food Favorites</label> <selec ...

Adding AngularJS modules to an HTML file

Recently, I've been diving into the world of AngularJS, but I'm facing a roadblock - my HTML doesn't recognize the angular module I created. It's odd because the bindings work perfectly without involving the module... This is my HTML: ...

Updating CSS for dropdown menu in Fluent/Fabric design

I am working with a dropdown component from Fluent UI and I am trying to customize the CSS of the dropdown options. Although I can add classes using className to the dropdown itself, I am facing difficulty in styling the dropdown options directly due to th ...

Elements that are fixed are not visible on the browser's screen

Currently, I am facing an issue with two divs that have a position: fixed; property. Everything functions properly until I zoom in on the page. Typically, when you zoom in on a page, two sliders appear to allow you to view content beyond your screen. Howev ...

Choosing from a list in Angular

I'm trying to make a dropdown menu that shows options in the format "code-description", but only displays the "code" portion when an option is selected. For example, showing "A-Apple" in the dropdown, but displaying only "A" when chosen. I am able to ...

What could be preventing the jQuery from showing the JSON response?

I am having an issue with a jQuery script that is supposed to pull a quote from an API in JSON format and display it on the page. However, for some reason, I am unable to retrieve data from the API. Can you help me figure out what is wrong here? Thank yo ...

The browser fails to implement styling prior to a demanding workload

Is it possible to refresh a section of my webpage that contains numerous DOM elements? My ideal approach would be to hide the section using visibility: hidden;, then redraw it, and finally set visibility back to visible;. However, I've encountered an ...

Position the image on the right side of several lines of text

My webpage contains two div elements: one for displaying multi-line text and the other for showing an image which is positioned to the right of the text. The width of the image is not fixed and can be adjusted using a user-defined parameter. <div> ...

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

Clicking the popup form causes it to blur out

Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...

Graphic selectors: a new take on radio buttons

I've been attempting to make this work, but it's not functioning correctly. Below is the CSS code: .input_hidden { position: absolute; left: -9999px; } .selected { background-color: #000000; } #carte label { display: inline-bl ...

Adjust ChartJS yAxes "tick marks"

I'm having trouble adjusting the scales on my yAxes and all the information I find seems to be outdated. My goal is to set my yAxes range from 0 to 100 with steps of 25. Check out this link yAxes: [ { ...

Troubleshooting the issue with padding in CSS not working when using window.print()

I need help creating a footer for my printed pages, but the footer is overlapping the content. I've tried adding padding-bottom to the @page CSS rule with the height of the footer, but it's not making a difference. Any suggestions on how to prop ...

The @html.TextBoxFor model value does not appear pre-filled or set for the date type

I am using the @html.TextBoxFor method with a specified type of date. However, when rendering the view, the model value (retrieved from the database) is not being set. Here is an example of my code: <tr> <td>@Html.Label("ReferenceId")< ...

Switching images dynamically using Flask and JavaScript

I'm currently working on Flask and encountering a perplexing issue. I'm attempting to update an image using JavaScript, but I am getting these errors from Flask: ... 12:05:34] "GET / HTTP/1.1" 200 - ... 12:05:38] "GET /img/pictur ...

Styling for jQuery mobile panels disappears when used on multiple pages

Currently, I am working on developing a mobile application for PhoneGap using jQuery Mobile. The app consists of multiple pages within the same HTML document. I have configured it so that all pages share the same panel, but I am facing an issue with the st ...

How to position one element relative to another using CSS

I need to strategically place four div elements in relation to another element. I have a rectangular div, and my goal is to insert four div elements at each of its corners. While I am aware of the CSS attribute "position: relative", it only allows me to ...

Issues with implementing Bootstrap tabs in Vue application

Currently, I am in the process of developing an application using vue, vue-router, and bootstrap. My goal is to integrate tags in bootstrap as shown below: <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-l ...