Search code examples
htmlcssmenudropdown

Creating a dropdown menu purely with HTML + CSS

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>

Solution

  • 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>