/    Sign up×
Community /Pin to ProfileBookmark

Creating dropdown on menu

Copy linkTweet thisAlerts:
Oct 11.2019

Hello All I have this page http://mak-pros.com/index.html
and I want to make the section “Solutions” contain a dropdown which includes “Dental Billing” “Services” “Etc”
how would i make it happen.

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@soupiiauthorOct 12.2019 — I wanted something like https://www.curemd.com/ how the dropdown is in "Solutions"
Copy linkTweet thisAlerts:
@Bulolo845Oct 12.2019 — Try a code of;

<select name="Solutions">

<option value="Dental Billing">Dental Billing</option>

<option value="Services">Services</option></select>

Copy linkTweet thisAlerts:
@JMRKEROct 13.2019 — Are you referring to the 'Solutions', "Company', and 'Resources' selections across the top of the linked page above?

If yes, then you might be able to modify: https://www.w3schools.com/howto/howto_css_mega_menu.asp
Copy linkTweet thisAlerts:
@VITSUSAOct 14.2019 — @soupii#1609992 Is this problem resolved?
Copy linkTweet thisAlerts:
@soupiiauthorOct 14.2019 — It is still not solved i am still struggling with creating a dropdown menu that matches to my page
Copy linkTweet thisAlerts:
@JMRKEROct 15.2019 — @soupii#1610045

Still unclear of the problem.


What differences (in dropdown menu) do you want from your link in post #2 and the link of post #4?

What specifically are you having problems with?

Can you simplify the problem to just the code that is giving you difficulties?
Copy linkTweet thisAlerts:
@soupiiauthorOct 15.2019 — &lt;div class="header-bottom wow fadeIn"&gt;
&lt;div class="container"&gt;
&lt;nav class="main-menu"&gt;
&lt;div class="navbar-header"&gt;
&lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;&lt;i class="fa fa-bars" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/div&gt;
<br/>
<i> </i> &lt;div id="navbar" class="navbar-collapse collapse"&gt;
<i> </i> &lt;ul class="nav navbar-nav"&gt;
<i> </i> &lt;li&gt;&lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;li&gt;&lt;a data-scroll href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;div class="row"&gt;
<i> </i> &lt;li&gt;&lt;a data-scroll href="#service"&gt;Solutions&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;div class="column"&gt;
<i> </i> &lt;h3&gt;Category 1&lt;/h3&gt;
<i> </i> &lt;a href="#"&gt;Link 1&lt;/a&gt;
<i> </i> &lt;a href="#"&gt;Link 2&lt;/a&gt;
<i> </i> &lt;a href="#"&gt;Link 3&lt;/a&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;div class="column"&gt;
<i> </i> &lt;h3&gt;Category 2&lt;/h3&gt;
<i> </i> &lt;a href="#"&gt;Link 1&lt;/a&gt;
<i> </i> &lt;a href="#"&gt;Link 2&lt;/a&gt;
<i> </i> &lt;a href="#"&gt;Link 3&lt;/a&gt;
<i> </i> &lt;/div&gt;
<i> </i>
<i> </i> &lt;li&gt;&lt;a data-scroll href="#getintouch"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
<i> </i> &lt;/ul&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/nav&gt;
<i> </i> &lt;div class="serch-bar"&gt;
<i> </i> &lt;div id="custom-search-input"&gt;
<i> </i> &lt;div class="input-group col-md-12"&gt;
<i> </i> &lt;input type="text" class="form-control input-lg" placeholder="Search" /&gt;
<i> </i> &lt;span class="input-group-btn"&gt;
<i> </i> &lt;button class="btn btn-info btn-lg" type="button"&gt;
<i> </i> &lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;
<i> </i> &lt;/button&gt;
<i> </i> &lt;/span&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
This is what I have now, and it doesnt appear to have mega menu,
Copy linkTweet thisAlerts:
@JMRKEROct 16.2019 — You have not verified the HTML code as there are orphaned tags.

Also, does not render as expected because you have left out the CSS that controls the display.

The following works, but you will need to change the colors to match your design criteria.

I am unclear where you wanted the "search" button, so I put it at the bottom of the mega-menu.

Here is my best guess as to your requirements, or lack therof.
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;!-- Modified from: https://www.w3schools.com/howto/howto_css_mega_menu.asp --&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
&lt;style&gt;
* {
box-sizing: border-box;
}

body {
margin: 0;
}

.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdown {
float: left;
overflow: hidden;
}

.dropdown .dropbtn {
font-size: 16px; <br/>
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

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

.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}

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

/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}

.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}

.column a:hover {
background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="navbar"&gt;
&lt;a href="#home"&gt;Home&lt;/a&gt;
&lt;a href="#news"&gt;About Us&lt;/a&gt;
&lt;div class="dropdown"&gt;
&lt;button class="dropbtn"&gt;Solutions
&lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
&lt;/button&gt;
&lt;div class="dropdown-content"&gt;
&lt;div class="row"&gt;
&lt;div class="column"&gt;
&lt;h3&gt;Category 1&lt;/h3&gt;
&lt;a href="#"&gt;Link 1&lt;/a&gt;
&lt;a href="#"&gt;Link 2&lt;/a&gt;
&lt;a href="#"&gt;Link 3&lt;/a&gt;
&lt;/div&gt;
&lt;div class="column"&gt;
&lt;h3&gt;Category 2&lt;/h3&gt;
&lt;a href="#"&gt;Link 1&lt;/a&gt;
&lt;a href="#"&gt;Link 2&lt;/a&gt;
&lt;a href="#"&gt;Link 3&lt;/a&gt;
&lt;/div&gt;
&lt;div class="column"&gt;
&lt;h3&gt;Category 3&lt;/h3&gt;
&lt;a href="#"&gt;Link 1&lt;/a&gt;
&lt;a href="#"&gt;Link 2&lt;/a&gt;
&lt;a href="#"&gt;Link 3&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
<br/>
<i> </i> &lt;div class="serch-bar"&gt;
<i> </i> &lt;div id="custom-search-input"&gt;
<i> </i> &lt;div class="input-group col-md-12"&gt;
<i> </i> &lt;input type="text" class="form-control input-lg" placeholder="Search" /&gt;
<i> </i> &lt;span class="input-group-btn"&gt;
<i> </i> &lt;button class="btn btn-info btn-lg" type="button"&gt;
<i> </i> &lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
<i> </i> &lt;/span&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;
<i> </i> &lt;/div&gt;

<i> </i>&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div style="padding:16px"&gt;
&lt;h3&gt;Mega Menu (Full-width dropdown in navbar)&lt;/h3&gt;
&lt;p&gt;Hover over the "Dropdown" link to see the mega menu.&lt;/p&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

Modify as desired for your needs.

Good Luck! :)
Copy linkTweet thisAlerts:
@QPPMIPSNov 30.2022 — QPPMIPS offers a one-stop solution for submitting Quality, Promoting Interoperability, and Improvement Activity data to CMS to satisfy the requirements of the Merit-based Incentive Payment System. QPPMIPS has over 10 years of experience working with healthcare providers of all sizes and in all settings (MIPS). experienced physicians, educated business experts, and skilled programmers have created useful software tools to plan, monitor, and improve reporting 2022 and performance. visit the site. https://qppmips.com/
×

Success!

Help @soupii spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...