What is the best way to transform this into a dropdown menu using HTML, CSS, and SCSS?

I am currently in the process of developing a dropdown menu using HTML, CSS, and SCSS.

Any assistance would be greatly appreciated.

 <nav>
  <div class="nav-container">
    <div class="nav-logo">
      <a href="index.html"><img class="logo" src="/img/logo.svg" alt="logo"></a>
    </div>
    <div class="search-container">
      <div class="fa fa-search search-icon"></div>
      <div class="input-container"><input type="text" placeholder="search"></div>
      <div class="fa fa-times cross"> </div>
    </div>
    <div class="nav-boxes">
      <ul>
        <div class="nav-link-boxes">
          <li class="links"><a href="home.html">home</a></li>
        </div>
        <div class="nav-link-boxes">
          <li class="links"><a href="catalog.html">catalog</a></li>
        </div>
        <div class="nav-link-boxes dropdown-menu">
          <li>
            <div class="links"><a href="paintings.html">portfolio</a></div>
        </div>
        <ul class="dropdown">
          <div class="nav-link-boxes dropdown-links">
            <li>embroidery</li>
          </div>
          <div class="nav-link-boxes dropdown-links">
            <li>vector</li>
          </div>
        </ul>
        </li>
        <div class="nav-link-boxes">
          <li class="links"><a href="#">contact</a></li>
        </div>
      </ul>
    </div>
    <img class="login" src="./img/accounticon.svg" alt="login">
  </div>
</nav>

Sass file

@import "var";
.nav {
  &-container {
    z-index: 1;
    background: $navbar-gradient;
    margin-top: 2rem;
    width: 95%;
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    border-radius: 4rem;
    height: 6rem;
    left: 1.1rem;

    .search-container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      background: $search;
      padding: 1rem;
      border-radius: 2rem;
      /* box-shadow: 5px 5px 20px rgb(255, 249, 238); */

      input {
        display: flex;
        margin: auto auto;
        margin-left: 1rem;
        // /* width:500px; */
        border: none;
        outline: none;
        background: $search;
        align-items: center;
        justify-content: flex-start;

        ::placeholder {
          color: $placeholder;
        }
      }
    }

    .nav-boxes {
      ul .boxes {
        display: flex;
        margin-right: 2rem;
        margin-left: 2rem;
        align-items: center;
        list-style-type: none;
        a {
          font-family: "Exo 2", sans-serif;
          text-decoration: none;
          font-size: 1.4rem;
          color: $dark-primary;
          font-weight: 600;
          &:link,
          &:visited {
            border-radius: 2rem;
            transition: all 0.9s;
          }
        }
      }
    }

    .links {
      margin: 0 0.4rem;
    }

    .nav-link-boxes {
      padding: 0.5rem;
      margin-right: 0.7rem;
      background-color: $nav-buttons;
      border-radius: 3rem;
      padding-bottom: 0.8rem;

      &:hover {
        transform: translateY(-0.3rem);
        box-shadow: 0 1rem 2rem $white;
      }
      &:active {
        transform: translateY(-0.1rem);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
      }
    }

    .login {
      height: 9rem;
      overflow: hidden;
    }
  }

  &-logo {
    padding: 1.5rem;
    margin-top: 0.5rem;
    .logo {
      height: 5.2rem;
    }
  }
}

In the midst of designing a portfolio website, I have introduced a navbar with a dropdown menu placed within the portfolio tab. Each list item has been enclosed within a div so that individual styles can be applied. Wrapping a div around the entire list item results in containment of all items within the nested list, hence the need for this approach.

Utilizing Sass, challenges related to specificity have arisen, hindering the functionality of certain elements. Successfully creating a dropdown menu remains my primary objective amidst these hurdles.

htmlcsssassdrop-down-menunavbar

Answer №1

The best HTML element to use for a drop-down menu is <select>. Instead of using 

<ul class="dropdown">
, you should write:

<select>
  <option value="embroidery">embroidery</option>
  <option value="vector">vector</option>
</select>

You have the flexibility to style your select element as desired. Consider this example:

select {
  font-size: 0.8rem;
  padding: 4px 8px;
}

To see some great examples of how to approach drop-down controls, check outthis resource here.

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

Optimizing CSS selector performance

Although the performance variance is minimal, I am curious to know which CSS selector is faster? div.class{ } or .class{ } ...

css

Looking to create a format for displaying short comic strips in a grid pattern

I am struggling to create an image grid for my small comics. I want to have 2 columns and 3 rows, but all the divs end up in the same place. I tried using display: flex, but it didn't work as expected. Additionally, I want the grid to be responsive, b ...

javascripthtmlcss

Execute function from the collection

I am trying to utilize an npm library that includes an NGRX Action with an effect. However, I am encountering an issue where nothing happens when I use store.dispatch() in my own application. Can anyone provide insight on how to properly call the action in ...

htmlangularrxjsstorengrx

Struggling with incorporating HTML5 elements (such as background colors and text colors) into my website using the WordPress editor

My research process began with browsing the internet to find solutions. I stumbled upon this website that provided some insights. Seeking further guidance, I consulted a friend who recommended using specific code, like this: <head> <link rel="st ...

wordpresshtml

There is a space separating the slider image and the navigation bar

Having a small space between the slider image and the navigation bar is causing some issues. I've tried various solutions like minifying the code, adjusting margins, and setting line heights to zero but nothing seems to be working. One question I have ...

htmlcss

Utilize CSS Animation to bring overlapped images to life

Trying to replicate the animation featured on the CISO website header. I have created a JSFiddle demo showcasing my attempt, but it seems like something is not quite right. img { transition: all .3s ease; overflow: hidden ...

htmlcsscss-animations

How can I successfully use the Confluence REST API to publish a dynamically generated HTML table (created with PHP) without encountering the problematic HTTP

I am striving to build a page within a Confluence wiki that contains a table created using the provided REST API, which can be conveniently edited by wiki users using the WYSIWYG editor once the page is established. To achieve this, I have organized vario ...

phphtmlrestconfluenceconfluence-rest-api

Personalizing the mat-checkbox

I'm trying to customize the checked icon in angular material mat-checkbox. Currently, it displays a white tick icon inside a colored background box, but I want to replace the tick with a cross when it is checked. After spending all day searching, I ha ...

cssangularangular-material

Unable to display PNG file on HTML document

Hi there, I'm having a bit of trouble adding a logo to my website. Initially, I had a sample logo that worked perfectly fine. Here's the code snippet: <a class="navbar-brand d-flex align-items-center" href="/"> <a ...

htmlhttp-status-code-404pngbootstrap-5

Unauthorize entry to several documents using htaccess

I want to restrict access to multiple files using htaccess. <FilesMatch (profile|reg|register|..............|)\.php> order allow,deny deny from all </FilesMatch> There are 6 folders with around 30 files each that I need to block access t ...

phphtmlfile.htaccess

How do I enable automatic playback for a vimeo video using the embed tag?

Currently, I am facing a challenge with the following embed tag in my HTML file: <embed src='{{"https://player.vimeo.com/video/{$videouri}?autoplay=true"}}'width="300" height="361" /> I am experiencing difficulties when trying to use the ...

phphtmllaravelvimeo

Utilizing if conditions within loops in a Jade template

Hey there. I am attempting to create a `tr` element at the start and after every 9th item. I am using the modulo operator as shown in the example above. However, if I want to include `td` elements inside that same `tr`, with an `else` condition for inst ...

htmlnode.jsexpresspugeach

Guide on incorporating markdown in an ejs template

As I am planning to create a small blog using Express, EJS, and Markdown, I encountered an issue when trying to load Markdown on the page. Here is what I saw: https://i.sstatic.net/M2FEK.png Here's my code snippet: <!DOCTYPE html> <html la ...

javascripthtmlexpressejsblogs

Attempting to toggle the visibility of div elements through user interaction

I'm having an issue with click events on several elements. Each element's click event is supposed to reveal a specific div related to it, but the hidden divs are not appearing when I click on the elements. Any help in figuring out what might be g ...

javascriptjqueryhtmlcss

What is the best way to position a bigger character directly above a smaller container?

My goal is to center a single character, using CSS, in a span that is smaller than the character itself. The setup I have is: <span id="A">X</span><span id="B">Y</span><span id="C">Z</span> All three spans are styled ...

htmlcsscentering

Struggles encountered during the transition from Vuetify 1.5 to 2.1

I need some assistance with upgrading a vue/.net core project that I inherited from a former colleague who left. We are having difficulty successfully upgrading vuetify and despite researching extensively, I am unsure of the correct steps to take. Current ...

vue.jssassupgradevuetify.js

Steps to access the file path of a swf document stored in a MYSQL database and display it on a web page

There seems to be an issue with my code below. The database I am working with is named nisreen, and the table within it is called ana. My goal is to retrieve the path of a SWF file from the database and display it on a web page. <!DOCTYPE html PUBLIC ...

phpmysqlhtml

Loop through the elements retrieved by the `getElementsByName` method in

My goal is to access each node by elementName using the following JavaScript code: function myFunction() { var h1 = document.getElementsByName("demoNode"); for (var i = 0; i < h1.length; i++) { if (h1[i].name == "demoNode") { var att ...

javascriptjqueryhtmlxmlxslt

Achieving perfect alignment both horizontally and vertically using CSS3's viewport height of 100%

I'm trying to utilize CSS3's Viewport Height to create a fullscreen section with a height of 100vh. However, I am encountering difficulties in centering elements both horizontally and vertically within the section. My goal is to have an image and ...

htmlcss

Create a circle at the point where two table cells intersect in an HTML document

How can I create a circular shape at the intersections of HTML tables? I am struggling to figure out a way to incorporate shapes into HTML tables. My goal is to achieve a design similar to the image shown below. I have attempted using text and spans, as we ...

htmlcss