What is the process for incorporating a submenu?

html

<nav class="main_nav justify-self-end">
        <ul class="nav_items">
            <li class="active"><a href="index"><span>asd</span></a></li>
            <li><a href="uslugi"><span>asd</span></a></li>
            <li><a href="proekti"><span>asdf</span></a></li>
            <li><a href="zanas"><span>asd</span></a></li>
            <li><a href="porachka"><span>asd</span></a></li>
            <li><a href="kontakti"><span>asd</span></a></li>
        </ul>
    </nav>

How can I create a submenu for the menu "ASDF" without ruining my website's design?

Here is some CSS code that may help:

.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
  text-align: right;
}

.nav_items {
  height: 100%;
}

.nav_items li {
  display: inline-block;
  margin-left: 35px;
  height: 100%;
}

.nav_items li a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b1033;
  letter-spacing: 3.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 10px;
}

.nav_items li.active {
  background: #ff4200;
}

.nav_items li.active a {
  color: #FFFFFF;
}

.nav_items li:hover {
  background: #ff4200;
}

.nav_items li:hover a {
  color: #FFFFFF;
}
<nav class="main_nav justify-self-end">
  <ul class="nav_items">
    <li class="active"><a href="index"><span>asd</span></a></li>
    <li><a href="uslugi"><span>asd</span></a></li>
    <li><a href="proekti"><span>asdf</span></a></li>
    <li><a href="zanas"><span>asd</span></a></li>
    <li><a href="porachka"><span>asd</span></a></li>
    <li><a href="kontakti"><span>asd</span></a></li>
  </ul>
</nav>

I am seeking assistance in adding a well-designed submenu to my menu. Any help would be greatly appreciated.

htmlcss

Answer №1

Ensure to customize the styles based on your specific needs as this CSS code provides a hover dropdown effect. To enable an onclick dropdown functionality, you will have to incorporate JavaScript or jQuery.

.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
  text-align: right;
}

.nav_items {
  height: 100%;
}

.nav_items li {
  display: inline-block;
  margin-left: 35px;
  height: 100%;
}

.nav_items li a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b1033;
  letter-spacing: 3.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 10px;
}

.nav_items li.active {
  background: #ff4200;
}

.nav_items li.active a {
  color: #FFFFFF;
}

.nav_items li:hover {
  background: #ff4200;
}

.nav_items li:hover a {
  color: #FFFFFF;
}

.has_drop {
  position: relative
}

.drop_down {
  position: absolute;
  width: 100%;
  top: 100%;
  height: auto;
  padding:0px;
  margin:0;
  left:0;
  display:none;
}

.drop_down li {
  width: 100%;
  display: block;
  padding: 6px 12px;
  margin:0
}

.has_drop:hover .drop_down {
  display:block;
 }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <nav class="main_nav justify-self-end">
    <ul class="nav_items">
      <li class="active"><a href="index"><span>asd</span></a></li>
      <li><a href="uslugi"><span>asd</span></a></li>
      <li class="has_drop">
        <a href="proekti"><span>asdf</span></a>
        <ul class="drop_down">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li><a href="zanas"><span>asd</span></a></li>
      <li><a href="porachka"><span>asd</span></a></li>
      <li><a href="kontakti"><span>asd</span></a></li>
    </ul>
  </nav>

</body>

</html>

Answer №2

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #000000;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #000000;
}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link One</a>
    <a href="#">Link Two</a>
    <a href="#">Link Three</a>
  </div>
</div>

</body>
</html>

Answer №3

body{ font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}
.main_nav {
  margin-right: -3px;
  height: 100%;
  flex-basis: 200%;
 /* text-align: right;*/
background: #ff4200;
display: table;

}

.nav_items {
  height: 100%;
}

.nav_items li {
  display: inline-block;
  margin-left: 35px;
  height: 100%;
}

.nav_items li a {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b1033;
  letter-spacing: 3.5px;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-left: 14px;
  padding-right: 10px;
text-decoration: none;

}

.nav_items li.active {
  background: #ff4200;
}

.nav_items li.active a {
  color: #FFFFFF;
}

.nav_items li:hover {
  background: #ff4200;
}

.nav_items li:hover a {
  color: #FFFFFF;
}

.has_drop {
  position: relative
}

.drop_down {
  position: absolute;
  width: 150px;
  top: 100%;
  height: auto;
  padding:10px;
  left:0;
  display:none;
background: #cccccc;
font-size: 12px;
}

.drop_down li {
  width: 100%;
  display: block;
  padding: 8px 0px;
  margin:0;
border-bottom: 1px solid #ddd;
}
/*.drop_down li:hover { background: #f3f3f3;}*/

.has_drop:hover .drop_down {
  display:block;
 }
<nav class="main_nav justify-self-end">
    <ul class="nav_items">
      <li class="active"><a href="index"><span>asd</span></a></li>
      <li><a href="uslugi"><span>asd</span></a></li>
      <li class="has_drop">
        <a href="proekti"><span>asdf</span></a>
        <ul class="drop_down">
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
          <li>List Item</li>
        </ul>
      </li>
      <li><a href="zanas"><span>asd</span></a></li>
      <li><a href="porachka"><span>asd</span></a></li>
      <li><a href="kontakti"><span>asd</span></a></li>
    </ul>
  </nav>

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

I must highlight a specific link based on the user's action

Is there a way to dynamically color links based on user interaction? For instance, let's say I want to specify the color for unvisited links: a.newlink:link { color: red; } <a href="/privacy" target="_blank" class="newlink">New l ...

css

Blending ThreeJS graphics with typical HTML/CSS pages

Is it feasible to swap out an animated image in the background of a website with JSON geometry while keeping the HTML elements in the forefront? I've attempted to utilize DOM Elements in ThreeJS without success. I experimented with incorporating my JS ...

jsonhtmlcssthree.jswebgl

What is causing the pull-right class to not function correctly in Bootstrap version 4.1.0?

After upgrading from Bootstrap version 3+ to 4.1.0, I encountered an issue with aligning elements using pull-right and pull-left, as well as float-right and float-left. The problem persists despite my efforts. Here is an image (https://i.sstatic.net/Z6ba3. ...

cssbootstrap-4

Updating URL Encoding in Java

Searching for a solution to replace character encodings in URL's has been challenging. Outdated libraries and answers found on the internet have not provided a working solution so far. import java.io.*; import java.util.*; public class Chapter6 { pu ...

javahtmlcharacter-encoding

Cypress has the ability to exclude certain elements from its testing

How do I locate a clickable element using the cypress tool? The clickable element always contains the text "Login" and is nested inside the container div. The challenge lies in not knowing whether it's an <button>, <a>, or <input type=& ...

javascripthtmltypescripttestingcypress

Switch up your code and toggle a class on or off for all elements that share a specific class

I've been attempting to create a functionality where, upon clicking a switch, a specific class gets added to every element that is assigned the class "ChangeColors". Unfortunately, I have encountered some difficulties in achieving this task. The error ...

javascriptcss

Solving Problems with D3 Bar Charts

I currently have a database structured with 5 columns: ID, customerName, dateYear, dateMonth, and dateDay. The date information is added to the database when a user submits a form. For example, if a user submits a form today, the 3 date columns would refle ...

javascriptphphtmlmysqld3.js

Is there a difference in the functionality of CSS :invalid between Chrome and Firefox?

I am facing a challenge with styling my invalid elements in HTML forms. It is simple in Chrome, but Firefox seems not to recognize my :invalid pseudoclass. To see the difference, try opening the following code snippet in both Chrome and Firefox: <html& ...

htmlcssgoogle-chromefirefox

Unusual problem encountered with Chart.js bar chart, image dispersion

On my HTML page, I have integrated a stacked bar chart using the Chart.js library to visually represent data for users. The data changes based on user selection, and the JavaScript function that enables this onclick feature is: function aggLav(){ [... ...

javascripthtmljsongraphicschart.js

The jQuery slider comes to a gradual halt

I can't figure out why my jQuery slider doesn't stop right away after a mouseover event. There seems to be a delay that I can't resolve on my own. Can someone lend a hand with this problem? Here is the code I'm working with: https://js ...

jquerycssslider

The horizontal rule element is not displaying

My <hr> element seems to be hidden. This is the HTML code: <div id="line"><hr /></div> And this is the CSS code: hr { border: 0; width: 96%; color: #FFFF00; height: 1px; } #line { float: left; width: 73 ...

htmlcss

How to dynamically change the title of a group box in Angular 8 using TypeScript

I am working with a component that includes a groupbox: <fieldset> <legend>Title</legend> </fieldset> Could I change the title of the groupbox using TypeScript code? ...

htmlangulartitle

Differences in wrapping between IE11 and Chrome/Firefox: <DIV>

Take a look at this jsfiddle link using IE 11, Chrome, and FireFox. Here is the HTML code I am working with: <div style="width:120px;background-color:#EE1111;"> <div class="daytext"><b>27</b></div> <div class="dayitem"> ...

htmlcssgoogle-chromefirefoxinternet-explorer-11

When trying to display a div element within an li element using CSS on hover, the expected functionality does not seem to

Struggling to get this code snippet to work properly, I am attempting to display a div (inside an li element) when hovering over the img or li. Can someone provide guidance? HTML <ul class="step-nav clearfix" id="leftright"> <li class="pret bu ...

htmlcss

Styling a specific element in Svelte without needing a globally unique identifier

How can I target just the outer div using a css selector? <div> <div>...</div> <div>...</div> </div> <style> OUTER.DIV.ONLY { background: url(outer.png); } </style> Alternatively, I& ...

csssvelte

Error: "$$" not defined in this context

I am currently working on generating a dynamic pie chart programmatically with the intention of transforming it into a reusable React Component. The main idea is to have an interactive pie chart where each slice expands into a full pie when clicked. I came ...

javascriptjquerycsssvg

Angular 6 is showcasing dates in a quirky manner

In my Angular app, users can enter comments. The comments are displayed automatically with the date they were added. However, there is an odd behavior that I've noticed: When a user enters a comment, the time displayed is incorrect. (Check the ...

javascriptangularhtmltypescripttimeago

Create an Angular directive that highlights a div if any of its child inputs have focus

I've developed an Angular directive for a repetitive section containing form elements. My aim is to have the entire section highlighted whenever any input field inside it is focused. template.html <div class="col-md-12 employee-section"> <l ...

javascriptjquerycssangularjshtml

Display the Image Element in Angular only when the image actually exists

In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...

javascripthtmlangularjsimage

The issue of the background image not displaying correctly within a Bootstrap container arises

I'm having trouble adding a background image to my website using Bootstrap 4 and external CSS (internal CSS isn't working for me either). I want the background image to be behind all rows in a container, not just behind one specific row. Could ...

htmlcsstwitter-bootstrapbootstrap-4