Creating a dropdown menu purely with HTML + CSS

drop down navigation menu html
menu and submenu in html examples
dropdown menu html
how to create menu in html
responsive drop down menu with submenu
html code for dropdown menu and submenu
dropdown-menu css
how to create a website with drop down menu

I am very new to this so apologies in advance if this problem appears quite rudimentary! I appreciate all the help I can get on this as I am a keen learner :)

I have been trying to create two dropdown menu's that would appear as inline elements on the homepage of my company website. It appears that Javascript has been disabled for editing (as I have tried to previously use pre-made dropdown menus from Codepen).

I want users to simply click on the dropdown and then the option they click on will take them to that relevant part of the website.

This is the HTML I have created so far. I am hoping to keep this dropdown to HTML and CSS.

Thanks guys in advance! :)

 <div class=" col-xs-12 cold-md-6">
    <select role="menu" id="dropdownMenuElement_10990" class="form-control input-lg " style> == $0
        <option value="/">Looking for a product?</option>
        <option value="/3dexperience">3DEXPERIENCE</option>
        <option value="/catia">CATIA</option>
        <option value="/enovia">ENOVIA</option>
        <option value="/delmia">DELMIA</option>
        <option value="/dymola">DYMOLA</option>
        <option value="/reqtify">REQTIFY</option>
        <option value="/controlbuild">CONTROLBUILD</option>
        <option value="/exalead">EXALEAD</option>
        <option value="/netvibes">NETVIBES</option>
        <option value="/master-3dgage">MASTER 3DGAGE</option>
        <option value="/verisurf">VERISURF</option>
        </select>
  
     
    </div>

The snippet below will work. Here's a codepen with a working link (click 3dexperience).

<div class=" col-xs-12 cold-md-6">
    <select role="menu" id="dropdownMenuElement_10990" class="form-control input-lg" onchange="location = this.value;">
          <option value="/">Looking for a product?</option>
          <option value="/3dexperience">3DEXPERIENCE</option>
          <option value="/catia">CATIA</option>
          <option value="/enovia">ENOVIA</option>
          <option value="/delmia">DELMIA</option>
          <option value="/dymola">DYMOLA</option>
          <option value="/reqtify">REQTIFY</option>
          <option value="/controlbuild">CONTROLBUILD</option>
          <option value="/exalead">EXALEAD</option>
          <option value="/netvibes">NETVIBES</option>
          <option value="/master-3dgage">MASTER 3DGAGE</option>
          <option value="/verisurf">VERISURF</option>
        </select>     
    </div>

How To Create a Dropdown Navigation Bar, How do I create a drop down menu bar in HTML? Steps 1. Open your HTML text editor. You can use a simple text editor, such as Notepad or TextEdit, or you can use a more 2. Enter the document header. 3. Create the drop-down menu itself. Type in the following code to determine the size and color of the drop-down menu, 4. Indicate that


Use on change select then scroll window to id of your div section that you want set the id of section as value of option

Using Jquery

$('#selectBox').change(function() {   
   var selectedValue = $(this).val(); 
   var elem=$('#'+selectedValue)
   $('html, body').scrollTop(elem.offset().top);
   
});
select{
position:fixed;
top:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=" col-xs-12 cold-md-6">
    <select id="selectBox" role="menu" id="dropdownMenuElement_10990" class="form-control input-lg "> 
        <option value="/">Looking for a product?</option>
        <option value="3dexperience">3DEXPERIENCE</option>
        <option value="catia">CATIA</option>
        <option value="enovia">ENOVIA</option>
        <option value="delmia">DELMIA</option>
        <option value="dymola">DYMOLA</option>
        <option value="reqtify">REQTIFY</option>
        <option value="controlbuild">CONTROLBUILD</option>
        <option value="exalead">EXALEAD</option>
        <option value="netvibes">NETVIBES</option>
        <option value="master-3dgage">MASTER 3DGAGE</option>
        <option value="verisurf">VERISURF</option>
        </select>
  
     
    </div>
    
<div id="lookingFor">
<h1>lookingFor</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="3dexperience">
<h1>3dexperience</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="catia">
<h1>catia</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>
<div id="enovia">
<h1>enovia</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis diam mauris, at semper nulla dapibus vitae. Nulla at dignissim ex. Sed maximus tristique feugiat. Vivamus et congue mauris. Morbi consectetur tortor ut tristique viverra. Quisque ut iaculis purus, sit amet malesuada massa. Praesent at enim vel nisl luctus tincidunt. Aliquam condimentum placerat magna, eget tempus leo congue id. Duis metus ex, vulputate a ligula vel, congue volutpat elit. Nullam sit amet tortor tempor, lobortis diam vitae, finibus nisl. Aliquam vel odio eros. Phasellus commodo enim orci, ut elementum sem laoreet at. Donec tristique a ex quis viverra. Quisque at lorem nisl.
</p>
</div>

Navigationpro Dropdown Overlay, How to Create Drop Down Navigation Menu with CSS and HTML | Pure CSS Dropdown Duration: 8:22 Posted: Feb 14, 2019 Create a Clickable Dropdown Step 1) Add HTML: Example <div class="dropdown"> <button onclick="myFunction ()" class="dropbtn"> Dropdown Step 2) Add CSS: Example /* Dropdown Button */ .dropbtn { background-color: #3498DB; color: white; padding: Step 3) Add JavaScript:


It looks like you're using bootstrap and since you want an HTML and CSS solution only so then you should use the code provided from bootstrap documentation here:

https://getbootstrap.com/docs/4.0/components/dropdowns/

Example:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#potato">Potato</a>
    <a class="dropdown-item" href="#xxx">XXX</a>
    <a class="dropdown-item" href="#zzz">ZZZ</a>
  </div>
</div>

And let's say that when you click on Potato you want to get to the potato section of your website, all you have to do is to give the potato section an id similar to the href passed in the above link, and if the section is an external page you just pass the link on the page in the href of the dropdown item.

How to Create Drop Down Navigation Menu with CSS and HTML , First up we'll need to create the HTML structure for our CSS menu. We'll use HTML5 to house the navigation menu in a  Pure CSS Dropdown Menu With Submenu Source Code. As always before sharing source code, let’s talk about it. As you can see in preview this is a simple dropdown menu with pure CSS, if you want a responsive one then check out this Responsive Navbar.


Creating a pure CSS dropdown menu – CSS Wizardry – Web , see this is pure css bases dropdown menu:- HTML <ul id="menu"> <li><a href=""​>Home</a></li> <li><a Create simple drop-down menu using HTML and CSS. How to Create Multi-Level Dropdown Menu with Pure CSS 📆 Last updated Sep 20, 2019 👷 By, Chandan Tudu Learn how to create a Multi-Level Dropdown Menu using only HTML and CSS.


How To Create a Pure CSS Dropdown Menu, A common UI pattern that we see on the web are dropdown menus. We'll create a list of links within a nav component like so: It's pretty safe to write it this way, because we're exclusively styling the CodePen is a place to experiment, debug, and show off your HTML, CSS, and JavaScript creations. Today we’re going to look at how to make an HTML and CSS dropdown menu. No JavaScript or jQuery required! Take a look at the demo to test it out and see what the end result looks like. The below HTML and CSS dropdown menu relies on z-index for some of the functionality, which can sometimes trip up beginners.


Create A Multi-Level Drop Down Menu with Pure CSS, Create a dropdown menu that appears when the user moves the mouse over an element. Step 1) Add HTML: Example. <div class="dropdown"> Create a Drop-Down Navigation Menu with HTML5 and CSS3 There are some great solutions to drop-down navigation menus, like the superfish jquery plugin for example. Many of them are using a lot of files and resources to generate the drop-downs but sometimes you don`t need all of them.