InMotion Hosting Support Center

In this tutorial:

Snapshot of Simple CSS Drop Down MenuThere are many free CSS menus online that you can use to build into your Website. Some of them require JavaScript and some do not. This article will show you how to add a menu to your website with CSS only. This allows you to create a drop menu without JavaScript experience.

CSS code for Drop Menu

The code below will need to be inserted into the <head> section of your Website. You can also insert the code into an external CSS style sheet.

<style type="text/css">
  ul {list-style: none;padding: 0px;margin: 0px;}
  ul li {display: block;position: relative;float: left;border:1px solid #000}
  li ul {display: none;}
  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
           white-space: nowrap;color: #fff;}
  ul li a:hover {background: #f00;}
  li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
</style>

HTML code for the Drop Menu

The below code is the HTML code for the menu itself. The Menu is in HTML list tags and are floated to give the inline look. You can paste the code anywhere you like (Usually at the top of your page) in the <body> section of your webpage.

<ul id="drop-nav">
  <li><a href="#">Support</a></li>
  <li><a href="#">Web Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#">Content Management</a>
    <ul>
      <li><a href="#">Joomla</a></li>
      <li><a href="#">Drupal</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">Concrete 5</a></li>
    </ul>
  </li>
  <li><a href="#">Contact</a>
    <ul>
      <li><a href="#">General Inquiries</a></li>
      <li><a href="#">Ask me a Question</a></li>
    </ul>
  </li>
</ul>

That's all there is to it. You can now customize the menu and make it your own! In our next guide, learn how to Align and float images with CSS.

Continued Education in Course 203: Using and Understanding CSS
You are viewing Section 1: Simple CSS Drop Down Menu
Section 2: Introduction to CSS

Support Center Login

Social Media Login

   
Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
2013-07-17 5:14 am
Drop down menus are good for providing hidden sub menu items when clicked. These are good in Google Chrome and Mozilla but in IE 6+ will not work where Jquery to be included. Thanks for providing source codes as most the sites hide /link their css codes.
2013-11-25 1:00 pm
Hi, how do you put the menu in the center of the webpage?
Im very new on Dreamweaver, so I need a bit help! :)
Staff
9,968 Points
2013-11-25 1:40 pm
Hello SynneLudvigsen,

If you wanted to put the menu in the center of your page, you could do so by editing the CSS from this:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px; }


To this:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px; width: 390px; margin-left: auto; margin-right: auto; }


First you are defining a width that's wide enough to hold all the text in your menu, then you set both the margin-left and margin-right values to auto which will automatically figure out how large the margins need to be from the left and right in order for the content to remain centered.

If you wanted to have the menu just pushed from the left-hand side a particular amount you could just do:

<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px; width: 390px; margin-left: 150px; }


Then the menu would be hugging the exact same spot on the screen, but pushed in 150px from the left-hand side.

Please let us know if you had any other questions at all!

- Jacob
n/a Points
2015-10-01 1:18 am

This is a very useful CSS. Thank You.

n/a Points
2015-11-04 10:22 am

Hi Jacob, just want to personally tell you thanks. I truly thank you for sharing this navigation code with us. It work so wonderfuly. When I first saw it I thought it was just another site that said they offered something free, just to get you to viset them, but I found I was wrong. Please keep doing what you are doing to help us who are not quite as smart as you.

Agian Thank You

Sincerely

Julian Richardson

n/a Points
2015-12-03 7:39 am

How to make  drop down menus visible  when i have menus on the top frame. as menu gets hidden behind the main frame

2013-11-25 3:58 pm
Omg, thank you so much! It worked!

But now a new problem appeared. The dropdown menu became bigger in size than the "official" menu, and I want them to be similar i size. If you understand my bad english. :- )
Staff
9,968 Points
2013-11-25 6:12 pm
Hello SynneLudvigsen,

Ahh you're right! This is caused by the CSS for the li:hover ul element, it should look like this right now:

ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}


Try defining the width to a size that matches your menu elements:

li:hover ul {display: block; position: absolute; width: 150px;}


Let us know if you're still having any problems!

- Jacob
n/a Points
2014-07-22 3:18 pm

Hi,

i am new to css so i need some help...

Staff
34,213 Points
2014-07-22 3:32 pm
Hello MD NISHAD HUSSAIN,

If you can please explain in detail where you need help, then we would happy to work with you to find an answer. Please explain the problem and any steps needed to duplicate an issue if you are indeed encountering one.

Kindest regards,
Arnel C.

n/a Points
2016-06-03 8:11 pm

i applied the HTML code and the CSS code to my blog, the menus applied quite alright but the sub menus do not appear when the cursor is placed on the menus itself. what do i do please? 

 

Staff
10,077 Points
2016-06-03 10:08 pm
Hello,

Are you sure that the li:hover code was added to the CSS as that is what changes the color of the menu when the mouse is over it.

Best Regards,
TJ Edens
2013-11-25 6:16 pm
Thank you so much, Jacob!
Your a real lifesaver!
This will help me so much with my exam!
Again, thank you!!!!! :-D
Staff
9,968 Points
2013-11-25 6:42 pm
Hello SynneLudvigsen,

Awesome, no problem at all, glad I could help :)

If you're ever interested you can also always ask a question to our public Q&A section if you needed help with anything else.

- Jacob
n/a Points
2014-05-04 2:57 am

This is fantastic for the navigation thanks. I have one problem though and I am trying to make a list further down and it won't work for me, I thinks it's something to do with the <ul> that links it and I"m new and can't work out how to fix it. The list looks normal until I use <ul>.

Staff
11,186 Points
2014-05-05 12:35 pm
The reason that your unordered lists may look different is due to the CSS within the menu that controls the look of your unordered lists. I'm not sure what you are describing as to what it looks like. Could you provide an example?
n/a Points
2015-11-02 10:56 am

Hey guys i have two issues,my drop down menu works but has a glitch where the width of the link gets tripled when i hover over it but not to where i can click any where in that space but only in the origanal margins.my second problem is that i cant get an acount on yuor site i spent half an hour trying to get my username and login to work but the activation code is missing from the email you sent.please help me im going insane over this.

n/a Points
2015-08-25 1:18 am

create css and imliment the class in html page or given the center tag after thAT  the menu are shown in center

n/a Points
2014-03-09 8:12 am

this is a media query code . how can i use your dropdown code into this responsive design??? 

 

@media screen and (max-width: 480px) {

 

#skipTo {

display: block;

}

 

header nav, #main, aside {

float: left;

clear: left;

margin: 0 0 10px; 

width: 100%;

}

header nav li {

margin: 0;

background: #efefef;

display: block;

margin-bottom: 3px;

}

header nav a {

display: block;

padding: 10px;

text-align: center;

}

}

n/a Points
2014-03-24 7:15 pm

I love that you can do these kinds of things with such simple, straight forward code. Thanks for sharing!

Is there a way to make second-tier list items fly out only when hovering over their "containg" text? With this it all comes out at once.

Staff
34,213 Points
2014-03-24 8:21 pm
Hello Ernst,

I'm not sure what code you are using, but check out this link: CSS3 drop down menu. The child elements have a HOVER option set in the CSS that should apply the behavior you seek.

Regards,
Arnel C.
n/a Points
2014-03-25 4:26 am

Hi, how do you put a horizontal drop down menu in asp.net menu bar? Im very new on asp.net, so I need a bit of help! :)

Staff
11,186 Points
2014-03-25 7:45 am
We are unfamiliar with ASP as we do not operate any Microsoft servers. You may, however, do this with CSS using this article.
n/a Points
2014-04-18 12:06 am

Thanks, I"m new to this!

n/a Points
2014-05-10 5:05 pm

I can get all of this working except the 'pop out' element!  The relevant menu items change colour according to whether or not you hover over them, and the one item (at present, until I get it working) that should have a 'pop out' gets a highlight-coloured line underneath it, and that's it.

I don't know whether it's related, but what should go where the hash is in the code above

 

 <li><a href="#">Content Management</a>(and equivalent lines)?Thanks

 

Staff
34,213 Points
2014-05-12 1:29 pm
Hello PhilD,

If you are not filling in the link or anchor ID in place of the hash, then the menu won't work properly. If you're using a page link, then the HREF will look like this:

<a href="http://example.com/abc.html">Example page ABC</a>

If you're using an ANCHOR to jump somewhere within a page, you would set the following right above the section you're trying to jump to:

<a id="anchorname"></a>

Then you would make the HREF look like this:

<a href="#anchorname">Anchor name</a>

I hope that helps to explain it for you! Please let us know if you have any further questions or comments.

Regards,
Arnel C.
n/a Points
2014-05-12 4:53 pm

Thanks.

I understand the href=... bit; what would that be for hovering over the link to make the rest of the menu 'pop out'?

Sorry if I'm asking an (apparently) dumb question!  The coding given looks like it should do exactly what I want, if I could work out the customisable parts!

Thank you for your help,

Phil (easily confused!)

Staff
9,968 Points
2014-05-12 5:18 pm
Hello Phil,

It can be a bit hard to follow along when first using CSS and HTML so don't worry. I'd work with copying the example exactly as it is in this article, then working backwards to see how things function after ensuring the example works as intended.

Essentially the CSS code that you place before the closing <head> tag in your HTML page sets the un-ordered list <ul> items which are the <li> list-items, to be hidden with this line of code by default:

li ul {display: none;}



Then if the browser detects a mouse hovering over the <ul> it instead displays it as a block item so it's viewable:

li:hover ul {display: block; position: absolute;}



The background colors changing is simply coming from the <a> anchor tags being hovered over with this line of CSS:

li:hover a {background: #f00;}



Or if it's a drop-down, its background color is changed by this CSS code:

li:hover li a:hover {background: #000;}



So it sounds like you might possibly either be missing some of the CSS code in your HTML page, or that you're not using a second set of <li> list-item elements inside of another <ul> un-ordered list.

Hope that makes sense, please let us know if you're still having any issues getting it figured out.

- Jacob
n/a Points
2014-06-26 12:01 pm

wow... this  simpler yet  amazing example of dropdown menu, thank you :)

n/a Points
2014-07-12 1:13 pm

This post is realy good. the post realy help me the create menu bar.

n/a Points
2014-07-19 5:40 am
i don,t have any idea for drop down manu..this web site very helpful. thank for this site andmin.
n/a Points
2014-07-24 1:30 am
you should make demo of your live preview of your article , and should comment all your code ;)
n/a Points
2014-07-30 6:40 am
improve stylesheet
n/a Points
2014-08-05 6:07 am

That is really good, but how would I get a drop down without changing much of the CSS or HTML?

This is my CSS

.header {

height: 80px;

background: white;

position: fixed;

width: 100%;

z-index: 10;

}

.nav a {

  color: #5a5a5a;

  font-size: 11px;

  font-weight: bold;

  padding: 14px 10px;

  text-transform: uppercase;

  font-family: 'Times New Roman';

}

 

.nav li {

  display: inline;

 } 

  .backdrop {

  background-image:url('back.jpg');

  height: 450px;

}

 

This is my HTML

  <div class="header">

    <div class="nav">

      <div class="container"> 

        <ul class="pull-left">

<li><a href="#"><img src="/support/hre1.png"/></a></li>

        <li><a href="#">Home</a></li>

<li><a href="/support/about.asp">About</a></li>

<li><a href="/support/work.asp">Our Work</a></li>

        </ul>

        <ul class="pull-right"><br>

<li><a href="/support/cont.asp">Contact</a></li>

<li><a href="/support/news.asp">News</a></li>

<li><a href="/support/videos.asp">Videos</a></li>

        </ul>

      </div>

    </div>

</div>

Staff
39,221 Points
2014-08-05 8:14 am
Hello Christian,

I do not understand what you want to do. This article is about creating a dropdown menu with css and html. This means if you want to duplicate it you will need to change your current html and css to match. If you have a different goal or question, feel free to start a new question thread in our Ask a question section!

Kindest Regards,
Scott M
n/a Points
2014-08-08 9:28 am

How do I change the background color behind the top row (Support, Web Design, Content Mangement, ...).

Staff
39,221 Points
2014-08-08 9:37 am
Hello Samar,

You would need to simply assign a background color for the li tag under the drop-nav id. You may want to give those particular li tags a class or id so it stays unique to the ones you want to highlight.

<li><a href="#" id="abc">Support</a></li>

#abc {abckground-color: red;}


Kindest Regards,
Scott M


Kindest Regards,
Scott M
n/a Points
2014-08-09 2:33 pm

Please look at http://bethelpennington.org/dropdownmenu/

How do I make the background of the top menu look like the menu below.

You can view the page to see the coding.  Please add the one or two lines necessary to change the background color of the top menu.  I am able to handle the underlines and the text color.

Thank you,  Samar

Staff
24,701 Points
2014-08-11 11:58 am
Hello Samar,

Thank you for your question. I looked at your site, and the background for the top menu was set in the home.css file, on line: 125.

I added the background color with the following code to the a:link section like this:

a:link {
background: #2E3A3F;


If you have any further questions, feel free to post them below.
Thank you,

-John-Paul
n/a Points
2014-08-10 6:47 am

hi guys here is the css code 

<style type="text/css">

  ul {list-style: none;padding: 0px;margin: 0px;}

  

  ul li {display: block;position: relative;float: left;border:1px solid #000}

  li ul {display: none;}

  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;

           white-space: nowrap;color: #fff;}

  ul li a:hover {background: #f00;}

  li:hover ul {display: block; position: absolute;}

  li:hover li {float: none;}

  li:hover a {background: #f00;}

  li:hover li a:hover {background: #000;}

  #drop-nav li ul li {border-top: 0px;}

</style>

 

but i cant click on the menu links when i hover over one of the menus. what am i doing wrong?

Staff
24,701 Points
2014-08-11 12:54 pm
Hello richard,

Thank you for your question. I don't see anything here that would stop you from clicking a link.

We are happy to help, but will need some additional information, such as the domain name of the site.

If you have any further questions, feel free to post them below.
Thank you,

-John-Paul
n/a Points
2014-08-20 9:08 am

Hi there!

 

Thanks for sharing such a smart and simple dropdownlist. It's very good and I've had no problem customising it for my own needs... EXCEPT that the css you have provided is affecting all the other lists on my page.

How should I change the css rules so that they only affect sub elements of #drop-nav ? I tried prefixing each rule with #drop-nav but that just broken everything. I've been reading through the css styling guidelines but I can't seem to relate it to your real world example!

- Angus

Staff
24,701 Points
2014-08-20 10:54 am
Hello Angus,

Thank you for your question. We are happy to help, but will need some additional information.

Are you using a CMS such as WordPress, Joomla, Drupal, Concrete5? If so, which one, and what themes/addons are you using?

Can you provide a link to the site having problems? This will allow us to look at your specific site setup and menus.

If you have any further questions, feel free to post them below.
Thank you,

-John-Paul
n/a Points
2014-08-30 5:38 pm
n/a Points
2014-09-02 2:10 am
please show a demo of the style from which we can improve our style
Staff
39,221 Points
2014-09-02 12:26 pm
Hello Parthiban,

We would love to assist, but we need you to be a bit more specific as to your request.

Kindest Regards,
Scott M
n/a Points
2014-09-17 10:16 am

Scott,

Thanks for the script, it works great!!

How can put this code inside a table of one row as I want to create a navigation bar acoss the screen with potential future additional items, do not want to have a navigation bar shorther than my banner (I am having a banner inside a table - 95% width)

Also, how can change the background height of the main navigational items.

Thanks,

Ram

Staff
11,186 Points
2014-09-17 11:47 am
The background height will adjust based on the content provided within it. Although I highly recommend against the use of tables unless it is actual data being presented, the menu can be placed within a table by simply placing the HTML for the unordered list within the table area.
n/a Points
2014-09-20 9:55 pm

Hello, I'm new to this field so I need some help.

 

Can dropdown menu be made with the help of css2 !?

If yes then please help me, cuz I was asked to make a mini project with the help of css & html.

Staff
39,221 Points
2014-09-22 8:48 am
Hello Varun,

Yes, you can make dropdown menus with any CSS version. Unfortunately, beyond what is above, we do not perform custom code requests.

Kindest Regards,
Scott M
n/a Points
2014-09-30 3:35 am

hi sir,

           i need one designed horizontal Top menu CSS for one wedding decorations site please help me ,Thanx in advance

Staff
24,701 Points
2014-09-30 9:38 am
Bala,

Thank you for contacting us. While we are more than happy to guide you, if you need something custom designed it is better to contact our Web Design Services.

They can discuss what you are looking for, and help custom design your website.

If you have any further questions, feel free to post them below.

Thank you,
John-Paul
n/a Points
2014-10-12 12:10 pm
Its fine the way it is, but maybe add something about the variables.
n/a Points
2014-10-13 11:39 pm

Hi, I need to position the dropdown from teh left edge of an image, the image is within a table cell.  Does the margin:left parameter use the edge of the browser or theedge of an image?

Staff
11,186 Points
2014-10-14 8:50 am
margin-left sets the margin within the specific element you are selecting. Could you provide a screenshot of what exactly you are trying to do?
n/a Points
2014-10-14 1:36 pm

I dont see how to attach a screen shot here, but basically i have a single table row colored dark gray.  In the middle of that table row i have an image.  At certain points on the image i would like to display a drop down menu.  If you imagine the image is a map of the US, when hovering over Ohio, i would like to see a dropdown menu of Ohio resources.  Hope that helps.

Staff
11,186 Points
2014-10-14 1:42 pm
To do what you're referring to, you would need to separate different locations within the image, usually by slicing it into different sections, then each of the pieces would be different menu items.
n/a Points
2014-10-14 1:53 pm

ok.  What is the CSS I would use to locate the menu to a particular section, and then position it exactly where i want it to be, relative to the image section?

Staff
11,186 Points
2014-10-14 1:54 pm
To clarify, are you trying to place this inside the image, or next to it?
n/a Points
2014-10-14 2:06 pm

The menu should be below and to the right.  Ideally, I would be able to position it exactly where it looks best on the page.  With the code I have tried in the past, the menu moved around when the browser was resized.

Staff
11,186 Points
2014-10-14 2:13 pm
To align it to the bottom right, you would add this to your CSS:

position: absolute;
bottom: 0;
right: 0;

n/a Points
2014-10-15 3:32 pm

Hi, I wonder if you can help me.  I took another approach, and now have a dropdown menu that appears when clicking on a hotspot in an image map. However the code I 'borrowed' from the internet causes the menu to dropdown when clicking, but does not dissapear when clicking again.  I would like to add a behavior so that the menu dissapears upon clicking the hotspot again.  Here is the code - can you help, or in the alternative, provide the code that would cause the menu to appear and dissapear on hover?

<html>

<head>

  <title>Home</title>

<style type="text/css">

<!--

#content {

position: relative}

 

#content a {

display: block}

 

#menu1, #menu2, #menu3, #menu4 {

display: none}

 

#menu1 {

position: absolute;

text-align: left;

top: 280px;

left: 615px;

background: #379D9E;

font-size: 12px;

line-height: 24px;

color: white}

 

#menu2 {

position: absolute;

top: 100px;

left: 300px}

 

#menu3 {

position: absolute;

top: 250px;

left: 20px}

 

#menu4 {

position: absolute;

top: 250px;

left: 150px}

-->

</style>

<script type="text/javascript">

<!--

function showMenu(menuId)  {

//hide all the menues

document.getElementById('menu1').style.display="none";

document.getElementById('menu2').style.display="none";

document.getElementById('menu3').style.display="none";

document.getElementById('menu4').style.display="none";

//display the menu for this area of the image

document.getElementById(menuId).style.display="block";

}

//-->

</script>

</head>

<body>

<table

style="background-color: rgb(102, 102, 102); width: 100%; height: 32px; text-align: left; margin-left: auto; margin-right: auto;"

border="0" cellpadding="0" cellspacing="0">

  <tbody>

    <tr>

      <td

style="text-align: center; background-color: rgb(102, 102, 102);">

<div id="content">

<img style="border: 0px solid ; "ID="home";  src="/support/http://teamspace.merck.com/sites/ahoperations/Images1/home1.jpg" alt=" " usemap="#map1413342841971">

<div id="menu1">

         News Menu:

        <a href="/support/link1.htm">People on the Move</a>

        <a href="/support/link2.htm">Link2</a>

</div>

</div>

</td>

    </tr>

  </tbody>

</table>

<p align="center">&nbsp;

<map id="map1413342841971" name="map1413342841971">

 

Staff
34,213 Points
2014-10-15 4:10 pm
Hello Beth,

Thanks for the question. We generally do not provide programming services within our Support Center. However, we do try to provide solutions or at least get you pointed in the right direction if we see a good answer. This article's intent was to provide a simple CSS option to create drop-down menus. However, in your case, you need to handle an event so that the menu hides after you click. When I looked around, I did find some javascript that you may want to add that can handle this event. Check out this post that shows how to hide a menu after a click.

Hope that helps! Please let us know if you have any further questions!

Arnel C.
n/a Points
2014-10-18 11:30 am
Being new to this, a little more explanation as to what the CSS is doing would have been great. Nonetheless
very helpful.
n/a Points
2014-10-29 11:19 am
Can i use visibility:hidden instead of li ul {display: none;}and visibility:visible for li ul {display:block}http://www.ctaceducation.com
Staff
34,213 Points
2014-10-29 11:48 am
Hello C-TAC,

Thanks for the question. The "li" commands are list elements within that make up the menu, so changing it to visibility would disrupt that list. So, in regards to how this was coded, you cannot change the code to use "visibility" in its place as it would negate part of the behavior defined in the CSS as part of the menu structure.

Regards,
Arnel C.
2014-11-02 1:00 am
Using the above "Simple CSS Drop Down Menu" example; I have a long list of dropdown items that extend below the bottom of the page.

How can I make it scroll automatically when I reach the bottom item? Thanks Gary
n/a Points
2014-11-14 8:15 am
make an easy code
n/a Points
2015-01-03 1:30 am

Ok, so I'm running into a problem. I have a navigation bar at the top of my page (e.g. header). These are set under a <div class="nav">. Only ONE of my nav links has a drop down menu. So I took your code and stuck the <div id="drop-nav"> above the one navigation link. The drop down menu now works fine. The problem is: in the css the ul and li selectors seem to be effecting the rest of my navigation links. Now I can't get my nav links to line up on the navigation bar where I want them to be. If anyone has any solutions plz let me know.

Staff
39,221 Points
2015-01-05 11:28 am
Hello Bradley,

Have you tried separating them into different CSS classes?

Kindest Regards,
Scott M
n/a Points
2015-01-10 11:30 am

please can someone tell me that how can we change the menu's width?

Staff
39,221 Points
2015-01-12 2:34 pm
Hello Safwan,

Using CSS you should be able to give the ul a class and then assign a width to it to change the width.

Kindest Regards,
Scott M
n/a Points
2015-01-20 6:39 am

can anyone put dropdown on this

WELCOME TO IN_TECH

well ! i'm just a begineer.

Staff
11,186 Points
2015-01-20 9:33 am
Be sure to place the CSS mentioned above in the article within the <head> tags on the page. Without them, it will just appear as a list.
n/a Points
2015-02-12 7:56 am

Hi,

I am using a very similar code to create a drop down navigation on a joomla site. It worked to begin with before i finished creating the last 2 pages links on the navigation bar however now the drop down only appears on the associated pages

e.g menu 1 page will show sub menu 1,2,3 from menu 1 tab, however from home page the sub menu items will not appear.

I am using a template i created in joomla so nothing should be interferring. Any help to why this is happening?

 

Thanks.

Staff
24,701 Points
2015-02-13 2:01 pm
Hello Emma,

Thank you for your question. It is difficult to say without know how your theme/site was coded/developed.

Since the above guide is not for Joomla, it may be difficult to follow. I found a helpful article via online search, where they specifically walk you through Creating Drop-down Menus in Joomla. This takes advantage of Joomla's built-in ability to create drop down menus.

If you have any further questions, feel free to post them below.

Thank you,
John-Paul
n/a Points
2015-02-26 9:17 am

Hello, 

I need some help. I have done all the code and adapted it. But I need help making a submenu as it won't work with what I've tried...

 

thanks

Staff
39,221 Points
2015-02-26 10:15 am
Hello Jordan,

Did you start with the code from the article? It should work as it is and you can begin modifying from there. As it is only CSS you will likely just need to go over your syntax carefully.

Kindest Regards,
Scott M
n/a Points
2015-03-12 10:24 am

How make the drop down menu/list/sub font bigger? font style? and the sub part how to make it to left align?

 

thx. this finals project is hard =(

#website

 

 

Staff
39,221 Points
2015-03-16 10:25 am
Hello Miko,

You can adjust the font size by using the font-size property.

Kindest Regards,
Scott M
n/a Points
2015-04-09 12:33 am

Very helpful. It works!

n/a Points
2015-04-28 3:56 pm

How do make it work on mobile? When it's in a hamburger menu.

Staff
39,221 Points
2015-04-28 5:06 pm
Hello John,

It should work the same, but you would likely need to adjust the csst to be responsive or specific to mobile.

Kindest Regards,
Scott M
n/a Points
2015-05-01 12:47 am

Hi, I have a header for my website and I'd like to have this menu item below the header. This code though makes it stick to the top of the page. Which attribute relates to this and how do I fix it?

Staff
24,701 Points
2015-05-01 11:24 am
Hello Jonathan,

Thank you for contacting us. You can adjust the <div< tags to adjust the location of them on the page.

You will have to work with your site code, and test until it is where you need it to be.

Thank you,
John-Paul
n/a Points
2015-05-03 7:32 pm

Hello Team.

I need a help.

I want two drop down boxes for example first drop down box shows list of countries second one contain states based on the first drop down country selection the list os states should be shown in second drop box.

Does this possible, if can then help me how to do it.

 

I need it for my college project submission.

 

Staff
39,221 Points
2015-05-04 8:01 am
Hello,

What you are looking for would not be populated via CSS but rather PHP and use data from a database to populate the second dropdown.

Unfortunately we cannot provide custom coded solutions.

Kindest Regards,
Scott M
n/a Points
2015-05-11 1:02 pm

These codes were great and very easy to use! A bit of alteration-observation of changes in Dreamweaver and I gained a good idea of how the different pieces of code work. It was pretty easy for me to then make further alterations and adjustments to get the setup just the way I wanted it.  I am returning to coding in a very minor way, and felt uncertain about integrating new(to me) code with my previous html and java knowledge, but this worked smoothly.Nice work!

2015-05-15 11:55 am
thank you for this quick and easy code!

I am having an issue with getting padding on my drop downs. Can you help?


<style type="text/css">
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {display: block;position: relative;float: right;border:0px solid #000}
li ul {display: none;}
ul li a {
display: block;
background: #000;
padding: 0px;
text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: small;
white-space: nowrap;
color: #fff;
}
ul li a:hover {background: #0854a0;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #ff0000;}
li:hover li a:hover {background: #0854a0;}
#drop-nav li ul li {
border-top: 2px;
padding-bottom:0px;
padding-top:0px;
padding-right:0px;
padding-left:0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 35px;
}

</style>


<ul id="drop-nav">
<li><a href="#"> <img src="../images/template/past-events.gif" border="0"/></a>
<ul>
<li><a href="../2015/york/index.html">York 2015</a></li>
<li><a href="../2014/index.html">York 2014</a></li>
</ul>
</li>
</ul>


website is: http://www.veteransexpo.com/index-drops.html


Staff
34,213 Points
2015-05-18 12:03 pm
Hello Janys315,

Apologies, but we unfortunately do not provide coding support. You may want post your questions in forum such as this one in order to get help with your code. Apologies again that we can't provide direct assistance. If you have any further questions or comments, please let us know.

Regards,
Arnel C.
n/a Points
2015-05-22 6:32 am

hi! thanks for dropdown menu! 

but there is something  i want .

dropup menu

Staff
24,701 Points
2015-05-22 3:39 pm
Hello kwacz,

Thank you for contacting us. I found some possible solutions for a Drop-up menu via online search, although you will have to customize the code to suit your site.

Thank you,
John-Paul
n/a Points
2015-05-22 6:52 am

PLEASE HELP i am new in this

i have made a dropdown menu in my blog but i dont know how to add links for the dropdown menu to open another page 

can anyone tell me how to open another page when we click on dropdown menu 

 

Staff
24,701 Points
2015-05-22 3:46 pm
Hello Sandeep,

Thank you for contacting us. You can add links by replacing the "#" in the "href" HTML tags, with the location.

For example:
<a href="http://example.com/support">Support</a>

This will make the link navigate to example.com/support. If you want the link to open in a new window/tab, you can add a target="_blank" tag.

For example:
<a href="http://example.com/support" target="_blank" >Support</a>
Thank you,
John-Paul
n/a Points
2015-05-26 4:23 am

sir, i have problem. i want to design menu in various mode and different style.

Staff
10,077 Points
2015-05-26 8:28 am
Hello Abhishek,

Can you please provide more information so we may try to point you in the right direction? What type of modes/styles would you like to create your menu in?

Best Regards,
TJ Edens
n/a Points
2015-06-03 3:26 am
above code not working in IE8
Staff
34,213 Points
2015-06-04 10:27 am
Hello Venkatesh,

If you're problems with IE8, then you will need to review the IE8 CSS Compatibility. This will help you identify what work or doesn't work in CSS. I hope this helps to answer your question, please let us know if you require any further assistance.

Regards,
Arnel C.
n/a Points
2015-06-05 6:51 am

Hello,

please can you help me, how can I write the CSS if I want to add another line (Something like "ul li li"..)?

Thanks

Staff
39,221 Points
2015-06-05 9:59 am
Hello Martin,

You would simply add it to the current list using the same format as above for the CSS. You would then add your specific rules to that line.

Kindest Regards,
Scott M
n/a Points
2015-06-06 5:32 am

Thanks for the tutorial but i have one problem.

The navigation bar does not strech to the entire length of the page.

please tell me how to make it strech to the entire length of page.

Staff
39,221 Points
2015-06-08 2:15 pm
Hello Rohit,

You just need to add a width attribute to the menu for 100%. This should make it span the entire width of the page.

Kindest Regards,
Scott M
n/a Points
2015-06-06 9:31 am

You Post is very nice for those who is beginer in the webdesigning.

 

n/a Points
2015-06-07 8:39 am

Please guys I have a problem and I wonder if anyone can help me ... I have zero knowledge of theme, plugins, css and wordpress. So please explain in details .. 

 

I have problem with the New Arrivals sliding bar of this <a href="http://www.yourdentalsupply.com">site</a>  ... As you can see it is going to three line instead of one and it is not moving ....

 

 

The second problem is with the menu <a href="http://www.yourdentalsupply.com">site</a> .. the shop menu is long and ugly just want o change it to wider menu which is divided into four columns 

Staff
39,221 Points
2015-06-08 2:05 pm
Hello Saleh,

Unfortunately with no knowledge, this may still slightly be above your head. Expanding the width of the menu itself is simple enough, you need to add a width setting for the particular CSS class, for example: "width: 250px;". The hard part will be identifying the specific class that governs the menu item as well as making sure the setting does not spill over to any other items in the site.

Feel free to visit the Theme in WordPress and use the Edit feature for the css file. Be sure to make a copy first so you do not make any mistakes you cannot recover from.

I am unsure what you are meaning about the New Arrivals. I see three rows of images which looks fairly normal for websites. Were you expecting it to do something different?

Kindest Regards,
Scott M
n/a Points
2015-06-08 3:02 pm

Thank you for your reply. I'm still strugling with the menu ... The new arrivals .. I was expecting it to be one row of images with an arrows at each end ...

 

Kind regards

Staff
39,221 Points
2015-06-08 5:03 pm
Hello Saleh,

Did you install a plugin that was supposed to display the images like that? If not, you may be able to find one in WordPress. If so, please let us know the name of the plugin so we can test it on our own servers.

Kindest Regards,
Scott M
n/a Points
2015-07-02 9:58 am

I just wanted to say thanks. It worked great for me 1st time and was easy to customise. Oh and kudos to you for your patience with some of the queries above lol.

n/a Points
2015-07-24 6:10 am

So im trying to create a dropdown menu for the work section of my website on my navigation bar. I want it so even with my dropdown menu if I click on the work option it'll take me to my work section and open the dropdown menu to give me the option of selecting two example projects within this work section?

Any help given will be greatly appreciated.

Thanks,

Dominic

Staff
39,221 Points
2015-07-24 10:07 am
Hello Dominic,

Unfortunately we are not able to provide custom solutions. If you have a specific question, we will do our best to try and answer it.

Kindest Regards,
Scott M
n/a Points
2015-07-24 11:18 pm

Thank you this was extreamly helpful

n/a Points
2015-07-28 11:31 am

Can you advise on how to assign this classes so it won't affect my other list items on the page?

Staff
10,077 Points
2015-07-29 12:45 am
Hello Dan,

You could just make up classes as you go, such as:

<a href="#" class="dropdownMenuDefault">

Classes can be anything and we suggest making them as specific as possible.

Best Regards,
TJ Edens
n/a Points
2015-08-05 8:17 am

I've made up class for the dropdown menu, but it still affects all other list (ul, li elements). Maybe I don't understand where to put the classes in css, so can you give an example on how to seperate this dropdown from other normal list?

Thanks before!

Staff
34,213 Points
2015-08-05 8:16 pm
Hello Javaughn,

Try reviewing this creating a dropdown menu. I hope this helps to answer your question, please let us know if you require any further assistance.

Regards,
Arnel C.
n/a Points
2015-08-25 3:02 pm

I use godaddy website builder and have added CSS3 code to the "Site-wide Code" section.  When I publish my page nothing shows up.  Confused...

Staff
10,077 Points
2015-08-25 8:46 pm
Hello Dave,

You may want to contact Godaddy's support team as there may be an issue with their builder for what you are trying to do.

Best Regards,
TJ Edens
n/a Points
2015-08-26 7:02 am

I used your drop down list and it is working fine with me. but when I use it in a table in each tr I put in a td the small menu as an option of this tr. I only have 1 <ul>. the problem is that when hovering the <ul> the below <ul> is still showing 

please check my jsfiddle to know what I am talking about

http://jsfiddle.net/lama512/nq7Lgqym/

this will let clicking the below tr list almost impossible

can you please help me

 

Staff
34,213 Points
2015-08-26 1:32 pm
Hello Lama,

Sorry, but the code provided above was not made for the purpose being used in a table like you're doing. As it is, providing the necessary code is outside of the scope of our support. You will need to look into modifying the CSS in order to change the position or properties of the dropdowns so they are not interefered with next element below them. Apologies that we can't provide a direct answer.

If you have any further questions or comments, please let us know.

Regards,
Arnel C.
n/a Points
2015-08-27 3:47 am

thanks for code sir!!!

n/a Points
2015-09-22 3:15 pm

hello sir. i have a problem.when i place my pointer on webdesign,it show html and others. but they did't show when i move to them, html......

please help ....

sorry for my bad english

Staff
10,077 Points
2015-09-22 10:31 pm
Hello Kooo,

Thank you for providing the error in the code, I have already updated the article. After the </a> in the code right after Web Design please add </li>. That should fix your issue.

Best Regards,
TJ Edens
n/a Points
2015-09-28 6:40 pm

The code above is working well but the dropdown are not being visible when used in multiple frame context.It is being hidden under  the other frame. It would be helpful if you solve my problem

Staff
39,221 Points
2015-09-29 6:25 am
You may want to see if setting a z-index property helps.
n/a Points
2016-04-06 2:57 pm
Thank you so much for this tip. Placing z-index: 2; at the end of the supplied CSS line (as bellow): li:hover ul {display: block; position: absolute; z-index: 2;} ...allowed two menu bars to be placed one atop the other while allowing the top bar's menu to flow down 'above' the lower bar instead of 'beneath' it.
n/a Points
2015-10-01 1:07 am

Thanks for your fabulous drop down menu code. It worked for me except for one glitch. I can't figure out what is going wrong and I've spent days trying to find the answer. The problem is that I have to click on the parent ("Events") to see the drop down menu items. If I'm clicked on any other tab like "Home" or "About", the drop down menu does not show up.

Here's my CSS:

nav ul {

 font-size: .90em; list-style: none; text-align: center; margin: 0 auto; padding: 0 0 2% 0; border-bottom: 1px solid DarkGoldenRod;}

nav ul ul { display: none; position: absolute; border-bottom: none; }

nav ul li { display: inline-block; position: relative; text-align: center; }

nav ul li:hover ul { display: block; }

nav ul li:nth-of-type(1) { width: 60px; }

nav ul li:nth-of-type(2) { width: 55px; }

nav ul li:nth-of-type(3) { width: 70px; }

nav ul li:nth-of-type(3):hover { background: beige; }

nav ul li:nth-of-type(3) a.active-link { color: black; }

nav ul li:nth-of-type(4) { width: 97px; }

nav ul li:nth-of-type(5) { width: 70px; }

nav ul li a {

 color: darkgoldenrod; font-weight: bold; text-decoration: none;}

nav ul li a:hover { color: goldenrod; }

nav ul li a.active-link { color: black; font-weight: bold; }

nav ul li li {

 background: beige; font-size: .85em; margin: 0; text-align: centre; padding: 8px 0 5px 0;}

nav ul li li:nth-of-type(1) { width: 70px; }

nav ul li li:nth-of-type(2) { width: 70px; padding: 5px 0 10px 0; }

nav ul li li a:hover { color: black; }nav ul li li a.active-link { color: black; }

 

And here's the html:

 <nav>

    <ul> 

       <li><a href="/support/index.html">Home</a></li>       <li><a href="/support/about.html">About</a></li>       <li><a href="/support/events.html" class="active-link">Events</a>

         <ul>

           <li><a href="/support/meetings.html">Meetings</a></li>           <li><a href="/support/events.html">Events</a></li>

         </ul>

       </li>

       <li><a href="/support/membership.html">Membership</a></li>       <li><a href="/support/contact.html">Contact</a></li>

    </ul>

 </nav>

If you can help, I would appreciate it very much. Thank you!

 

Staff
24,701 Points
2015-10-01 1:52 pm
Hello Connie,

Thank you for contacting us. We are happy to help, but will need some additional information. Can you provide a link to the site for us to test?

Are you using a CMS, such as WordPress, Joomla, Drupal, etc.?

Thank you,
John-Paul
n/a Points
2015-10-01 11:05 pm

Hi John Paul,

Thank you for replying to my email. I'm so happy you're able to take a look at it. Unfortunately, I took the website down from the interent because I didn't want people to see it when the navigation wasn't working. It's not a CMS website; I just used Notepad. I can send you the entire website if you would like to see it, or just a few pages if that's all you need. Thank you!

Connie

John-Paul says:

Hello Connie, Thank you for contacting us. We are happy to help, but will need some additional information. Can you provide a link to the site for us to test? Are you using a CMS, such as WordPress, Joomla, Drupal, etc.? Thank you, John-Paul

Staff
24,701 Points
2015-10-02 3:59 pm
hello Connie,

Thank you for contacting us. Several of us spent some time looking into your css, and do not see any issues with your code.

I recommend providing a link once it is setup, so we can help you troubleshoot further.

Thank you,
John-Paul
n/a Points
2015-10-05 2:05 am
this is easy but i want to datails or css tag li:hover ul {display: block; position: absolute;}
  li:hover li {float: none;}
  li:hover a {background: #f00;}
  li:hover li a:hover {background: #000;}
  #drop-nav li ul li {border-top: 0px;}
n/a Points
2015-10-06 1:29 pm

Thank you all very much for your help. Using your feedback I was able to find out where my mistake was and I'm embarrassed to say it was in my html. All sorted out now. You have helped greatly -- thank you!

n/a Points
2015-10-07 5:19 am

Hi guys!

 

The drop-down menu is great.

However, I would like to insert it in a already premade template.

So as is it is written, I would overwrite my formats.

I was thinking of making something like writing ul.drop just everywhere, but it does not work.

 

I am new to web design, so maybe is a stupid question.

Best wishes,

Fabio

Staff
34,213 Points
2015-10-07 4:37 pm
Hello Fabio,

No worries about the question. Basically, you will need to group menu code and identify it as a group so that it can be uniquely identified in the CSS. That way you can put it in, any changes applied to other things won't affect the code. Check out CSS - identification and grouping of elements.

I hope this helps to answer your question, please let us know if you require any further assistance.

Regards,
Arnel C.
n/a Points
2015-10-08 2:10 am

Thanks,

I will give it a try.

Best regards,

Fabio

n/a Points
2015-10-08 4:25 am

Hello!

I am wondering if I can impose on anyone once again. I have a question about my nav menu in mobile view. This part is working: the top and bottom menus expand fully at 480px, and I can click a button to make them appear or disappear. I'm not sure how all of it works but by the grace of God most of it is working. My question is, is it possible using CSS to make the menus be hidden or collapsed (just the button showing) when the page opens. I've tried for three days to find something on the internet/ books that will work with what I have, but nothing has worked. My website is not online so I have to paste the code below. I hope it's enough to go on. Thank you in advance for your help if you can make anything of it!

Connie

 

HTML OF THE HOME PAGE

<!DOCTYPE html><html><head>

    <title>NHMHA Harness Club - Home</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width" />        <link href="/support/base.css" rel="stylesheet" type="text/css">

</head>

<body>

 <div id="bar"></div>

 <div id="wrapper">

 <header>      <div id="title">Northern Horse & Mule Harness Association</div>

     <div id="logo"><a href="/support/index.html"><img src="/support/img/logo.png" alt="NHMHA Logo" style="max-width:100%; height:auto;"></a></div>

 </header>

 <nav>

     <label for="item-1"><img src="/support/img/amish.png" alt="Amish Buggy Silhouette" style="position: relative; top: .25em;">&nbsp;Menu</label>     <input type="checkbox" name="one" id="item-1">

     <div class="toggle">

  <ul>        <li><a href="/support/index.html" class="active-link">Home</a></li>      <li><a href="/support/about.html">About</a></li>      <li><a href="/support/events.html">Events</a>   <ul>       <li><a href="/support/meetings.html">Meetings</a></li>       <li><a href="/support/upcomingevents.html">Upcoming Events</a></li>   </ul>      </li>      <li><a href="/support/membership.html">Membership</a></li>      <li><a href="/support/contact.html">Contact</a></li>

  </ul>

     </div>

 </nav>

 

 . . . the content of the page . . .

 

<footer id="footer">

  <div id="footerbar"></div>

  <figure id="bottomimage">

      <a href="/support/index.html"><img src="/support/img/logo-small.png" alt="Harness Club Logo" style="max-width:100%; height:auto;"></a>

  </figure>

      <label for="item-2"><img src="/support/img/amish.png" alt="Amish Buggy Silhouette" style="position: relative; top: .25em;">&nbsp;Menu</label>      <input type="checkbox" name="two" id="item-2">

  <div id="bottomnav">

      <div class="toggle2">       <ul>          <li><a href="/support/index.html" class="active-link">Home</a></li>       <li><a href="/support/about.html">About</a></li>       <li><a href="/support/events.html">Events</a>       <ul>    <li><a href="/support/meetings.html">Meetings</a></li>    <li><a href="/support/upcomingevents.html">Upcoming Events</a></li>       </ul>       </li>       <li><a href="/support/membership.html">Membership</a></li>       <li><a href="/support/contact.html">Contact</a></li>          </ul>

      </div>

  </div>

  <div class="clear"></div>

  <div id="footercontact">       Fort St. John, B.C.  </div>

  <div id="copyright" style="clear: both">Copyright &#169; 2015 Northern Horse & Mule Harness Association</div>

 </footer>

</div></body></html>

 

CSS OF THE MAIN NAVIGATION-WORKS FINE EXCEPT MOBILE-SIZE MENU IS VISIBLE WHEN THE PAGE IS OPENED

 

/* Navigation--------------------------------------------- */

nav ul {

 font-size: .90em; list-style: none; text-align: center; margin: 0 auto; padding: 0 0 2% 0; border-bottom: 1px solid DarkGoldenRod;}

nav ul ul {

 display: none; position: absolute; border-bottom: none; z-index: 9999;}

nav ul li { display: inline-block; text-align: center; }

nav ul li:hover ul { display: block; }

nav ul li:nth-of-type(1) { width: 60px; }

nav ul li:nth-of-type(2) { width: 55px; }

nav ul li:nth-of-type(3) { width: 70px; }

nav ul li:nth-of-type(3):hover { background: white; }

nav ul li:nth-of-type(4) { width: 97px; }

nav ul li:nth-of-type(5) { width: 70px; }

nav ul li a {

 color: darkgoldenrod; font-weight: bold; text-decoration: none;}

nav ul li a.active-link {

 color: black; font-weight: bold; border-bottom: thin solid black;}

nav ul li li {

 background: white; text-align: left; display: block; float: none;}

nav ul li li:nth-of-type(1) { width: 120px; padding: 10px 0 7px 20px; }nav ul li li:nth-of-type(2) { width: 120px; padding: 0 0 10px 20px; }

nav ul li li a:hover { color: black; }nav ul li li a.active-link { color: black; }

 

@media screen and (max-width: 480px) {

 label {  color: black;  font-size: .90em;  font-weight: bold;  display: block;   padding: 0 0 15px 0;  cursor: pointer; }

 label:hover { color: #A9A9A9; }

 input {

  position: absolute;  left:-999em; }

 .toggle {

  width: 100%;  max-height: 999em;  opacity: 1;  height: auto;  overflow: hidden;  transition: opacity .5s linear; }

 input[type=checkbox]:checked + div {

  opacity: 0;  max-height: 0;  transition: opacity .5s linear, max-height .5s linear; }

 nav ul {

  width: 100%;  padding: 0;  display: block !important;  border-bottom: none;  float: left;  }

 nav ul ul { position: relative; }

 nav ul li {

  font-size: .90em;  text-align: center;  line-height: 30px;  width: 100% !important;  border-top: thin solid palegoldenrod;  float: left;  }

 nav ul li a {

  color: goldenrod;  background: #3b3837;  display: block; }

 nav ul li a:hover {

  color: white;  background: goldenrod; }

 nav ul li a.active-link {

  color: goldenrod;  background-color: black;  font-weight: bold;  border-bottom: none; }

 nav ul li li {    font-size: 1.1em;  text-align: center;  width: 100% !important;  margin: 0 !important;  padding: 0 !important;  display: block !important; }

 nav ul li li a {

  color: goldenrod;  background: #615e5d;  font-weight: bold; }

 nav ul li li a:hover { color: white; }}

@media screen and (min-width: 481px) {

 label { display: none; } input { display: none; }}

 

Staff
24,701 Points
2015-10-08 2:50 pm
Hello Connie,

Thank you for contacting us. We are happy to help you troubleshoot your css, but will need to see this working online so we can test it. This is because the specific environment can affect the functionality of code.

Please notify us when it is online, so we can test further.

Thank you,
John-Paul
n/a Points
2015-10-20 4:53 pm

thank u very much for such type of learning activity

n/a Points
2015-10-30 1:34 am

Hi there!Thank you for this awesome lesson! My only problem is that for some reason, the text on the drop down menu is to the right, and I'm trying to make it go to the left. Please advise.

Thank you!

Staff
24,701 Points
2015-10-30 6:02 pm
Hello Debra,

Thank you for contacting us. As a test, you can try adding a text-align: left to one of these:
li:hover li {float: none;}
li:hover a {background: #f00;}

We are happy to help you troubleshoot further, but will need some additional information. Can you provide a link to the site for us to test?

Are you using the above code exactly?

Thank you,
John-Paul
n/a Points
2015-11-07 10:21 am

thanks for this tip and this menu entirely, I was just wondering if ever i use this on my page, how then can I separate my other tags that uses ul, li and div

 

because they get the styles over and over, which Im not using with my menu.

I just cant get it right how to use class to name them. and its better to link this externally right?

Staff
39,221 Points
2015-11-09 7:30 pm
Hello Rocky,

You can definitely use class selectors to help separate your menu css from your global. We currently do not have a tutorial on using css classes, but there are many tutorials on the web that explain it nicely. You may want to check w3 schools, one of the more popular sites.

Kindest Regards,
Scott M
n/a Points
2015-11-10 2:08 am

Hello there Scott, thanks for the prompt reply, yes I did searched for something to use, and luckily i encountered <nav> tags, and surely it helped me run this on my html page..

thanks again!

n/a Points
2015-11-10 6:56 pm

I tried using your dropdown menu code and it worked fine for creating a navigation bar with dropdown menus. But the <UL> formatting is then applied to all of the <UL> and <LI> elements in the body of the page, which I don't want.

I've posted my attempt at http://www.crmvet.org/test/test.htm so you can see what I'm talking about.

How do I apply the formatting ONLY to the navigation bar?

Thanks.

Bruce

Staff
10,077 Points
2015-11-10 7:34 pm
Hello Bruce,

You can put a class or id in the UL tag then apply the css you want to only that tag.

Best Regards,
TJ Edens
n/a Points
2015-11-10 10:37 pm

Yes, I'm having troulbe getting the syntax right for using ID or Class on the UL element. There are several UL elements in the your code. Could you show me which ones to identify with a class, and how to do that?

Thanks.

Bruce

 

Staff
10,077 Points
2015-11-11 12:57 am
Hello Bruce,

In CSS you would use a . to identify the class, such as if your ul had a class of menu-links then in your CSS code you would have .menu-links { css stuff};

Best Regards,
TJ Edens
n/a Points
2016-05-02 1:49 pm

I've read and read each comment/response entry many many times trying to understand what to do to stop the CSS code from affected my other lists-with-links on my page. But it is utterly unclear.

For instance, when you say you copy into the CSS code the .menu-links { css stuff};, where does that go? After each UL? and the parentheticals encompass the entire CSS code? And how does the HTML in the body link to that?

Could someone be real specific with this? And not say, send me your code, because that does not help the rest of us who I'm sure have this same, elemental problem: the menu affects all other lists-with-links on the page, unless something is done about it. What that 'it' is, I don't know.

Let's just assume we copy/pasted the above two CSS and HTML codes onto a blank page. Then want to have a two line bullet point list with links pointing to www.google.com and www.yahoo.com so that these links are not affected by the CSS and HTML codes.

What would the CSS and HTML code now look like, exactly?

Thank you. Terribly frustrated.

 

n/a Points
2015-11-21 9:41 am

the dropdown menu is not appears but does not show over the flash image right below the menu. Any help?

 

Staff
11,403 Points
2015-11-23 11:31 am
Edmund, we need a bit more information. Do you have a link to it so we can see it?
n/a Points
2015-12-03 2:24 pm

Hello,

I haved added menu list using <div> now i want to add dropdown for one of the menu how it is to be done?

Learning HTML and CSS: trying the menu bar in different ways possible

CSS code:

body{ background-color:grey;}

div {background-color:white;border-radius:5px;}

.nav { display:inline-block;border-radius:0px;margin:5px;padding:5px;border-radius:5px;}

.nav:hover {background-color:red;}

HTML Code

<div>

<div class="nav">Home</div>

<div class="nav">About</div>

<div class="nav">Login</div>

<div class="nav">Signup</div>

<div class="nav">Tutorials</div>

</div>

 

Inside Tutorials i want to add sub menus like HTML,CSS,JS etc.

Staff
34,213 Points
2015-12-03 3:21 pm
Hello KS,

You can provide CSS code for a specific item or menu within your CSS, but you have provide specific labels for it and then modify your code so that it's identified that way. If you're not familiar with CSS code, then you may want to look for a tutorial such as this one, or consult with a developer or programmer. Providing specific coding support is beyond the scope of our support. However, hopefully the answer provided above gives you enough information to resolve your problem.

If you have any further questions or comments, please let us know.

Regards,
Arnel C.
n/a Points
2015-12-10 4:46 pm

good work for this but is there away to make the nav drop down on click and not hover?

ive looked all over and tryed alsorts but nothing works.

 

Staff
24,701 Points
2015-12-10 5:23 pm
Hello jonnie,

Thank you for contacting us. I found a possible solution through online search here: Creating Drop Down Menu on click CSS.

Thank you,
John-Paul
n/a Points
2016-01-02 4:54 am

How we can create sub select list?

Staff
4,988 Points
2016-01-04 1:37 pm
By "sub select" do you mean "Selector"? If so, then you would need the rule you want to include in your stylesheet.

Here is a list of selectors you can use: http://www.w3schools.com/cssref/css_selectors.asp
n/a Points
2016-01-02 5:21 am

Hi admin, The dropDown menu is so simple and very helpful for Beginners. Although it is so good but it has a little bug you need to fix.

In line no 3 , you've created dropDown for webDesign and soon after that you closed the </li> tag, And on line 9 you closed it again. You need to remove one (from third line.(:)

Staff
4,988 Points
2016-01-04 1:39 pm
Hello Ehtisham,

Thank you for letting us know about the extra tag in that line. We're going to include that change in an upcoming update for this article.
n/a Points
2016-01-17 10:54 pm

It works great except on an iphone. The formating is there but the drop downs don't drop down. It works fine on my android however. But because you can't "hover" on a touch screen I had to remove the href from the display name of each pull down or else it actives the link and shoots you into Narnia. With no href on top touching = hover and the menu shows. Then you can activate each link as desired. I had to adjust the text colors accordingly. The real problem is no pull downs on the iphone. I need iphone compatability. Thanks.

n/a Points
2016-02-18 5:50 am

Hello,

My menu item and submenu item are having some gap. so When i am tring to select down submenu item, beforethat submenu items are disaapering. Need some help.

Staff
24,701 Points
2016-02-18 11:41 am
Hello Deebendra,

Thank you for contacting us. Can you provide a link to the menu for us to test?

Thank you,
John-Paul
n/a Points
2016-02-19 10:01 am

sir you are good expert person and give a good code of html drop down  iam most thanks full to you

tarique hussain khoso 

 

n/a Points
2016-02-24 11:11 pm

How do you change the font size and drop down menu height?

Staff
24,701 Points
2016-02-25 1:13 pm
Hello Rich_R,

Thank you for contacting us. You can adjust the font size by using the font-size property.

Like many coding solutions, there are multiple ways to adjust the drop-down size. For example:
in the rule:
ul li a
see the line for " padding: 5px 10px 5px 10px;"
the two 5px paddings will adjust the padding in the top and bottom of the menu, making the height appear taller/shorter.

You will have to adjust the code and test to ensure it is meeting your needs.

Thank you,
John-Paul
2016-02-27 12:11 am
Thank You unfortunately I went with a web template that has a fixed menu it's not what I want but it's real detailed in the css and I'm afraid of messing it up to get the drop down I want.
n/a Points
2016-03-01 6:24 am

Hi, Thank you for this it is very useful.

Is there a way to create two columns within the <ul> section? If so how?

Also is there a way to put a submenu in a submenu?

Thank you in advance

Staff
4,988 Points
2016-03-01 1:05 pm
You can have two columns for a ul section using the float property or a similar function, or you may consider using a table.
n/a Points
2016-03-15 10:53 am

I like your work but please I would like to have  a message box just as this one you've provided for your repliers. Thanks. I like the feasibility at the comment field.

Staff
4,988 Points
2016-03-15 12:58 pm
There are many different ways to set up a comment form. We have a more complete guide on how to make a basic comment form using PHP and a MySQL Database.
n/a Points
2016-05-02 2:43 pm

Sorry, gave you a dead email last time.

Here's what I mean. Below is exactly what is above (CSS and HTML code). Below it is a bullet point list with links.

What do we do to this code so that the bullet point list with links is unaffected by the CSS code?

If you guys can answer this, well, I'd just about be willing to come out there an hug ya, partners.

 

<!DOCTYPE html><html>  <head>    <meta content="text/html; charset=windows-1252" http-equiv="content-type">    <title></title>    <style type="text/css">  ul {list-style: none;padding: 0px;margin: 0px;}  ul li {display: block;position: relative;float: left;border:1px solid #000}  li ul {display: none;}  ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;           white-space: nowrap;color: #fff;}  ul li a:hover {background: #f00;}  li:hover ul {display: block; position: absolute;}  li:hover li {float: none;}  li:hover a {background: #f00;}  li:hover li a:hover {background: #000;}  #drop-nav li ul li {border-top: 0px;}</style></head>  <body>    <ul id="drop-nav">      <li><a href="#">Support</a></li>      <li><a href="#">Web Design</a>        <ul>          <li><a href="#">HTML</a></li>          <li><a href="#">CSS</a></li>          <li><a href="#">JavaScript</a></li>        </ul>      </li>      <li><a href="#">Content Management</a>        <ul>          <li><a href="#">Joomla</a></li>          <li><a href="#">Drupal</a></li>          <li><a href="#">WordPress</a></li>          <li><a href="#">Concrete 5</a></li>        </ul>      </li>      <li><a href="#">Contact</a>        <ul>          <li><a href="#">General Inquiries</a></li>          <li><a href="#">Ask me a Question</a></li>        </ul>      </li>    </ul>    <p><br>    </p>    <p><br>    </p>    <p><br>    </p>    <p><br>    </p>    <ol>      <li style="list-style-type: disc;"><a href="/support/www.goole.com">Link1</a></li>      <li style="list-style-type: disc;"><a href="/support/www.yahoo.com">Link2</a></li>    </ol>  </body></html>

n/a Points
2016-05-13 7:30 am
I need to know , how can i apply link in href tag for the option that is in drop down menu .....
Staff
10,077 Points
2016-05-13 9:51 am
Hello Ebad,

I am not sure what you are wanting to do. Can you please provide more of an explanation of what you are looking to do?

Best Regards,
TJ Edens
n/a Points
2016-05-29 12:17 pm

I am having a hard time with my lesson and am trying to get a link for when I click on Menu for it to show the menu..below iswhat I have done but I dont know how to include the menu only when I clik on menu....can someone help me

<!DOCTYPE html><html lang="en"><head><h1><title>JavaJam Coffee House</title></h1><meta charset="urf-8"></head><body><h1>JavaJam Coffee House<h1><div> <ul id="menu">                  <nav<li><a href="#">Home</a></li></nav>    <nav<li><a href="#">Menu</a></li></nav>    <nav<li><a href="#">Music</a></li></nav>    <nav<li><a href="#">Jobs</a></li></nav></ul></div><ul><li>Specialty Coffee and Tea</li><li>Bagels, Muffins, and Organic Snacks</li><li> Open Mic Night</li><div><br>12312 Main Street<br/><br>Mountain Home, CA 93923<br/><br>1-888-555-5555</body></html><p><smaller><i>Copyright @ 2014 JavaJam Coffee House</i></smaller><p>

Staff
4,988 Points
2016-05-31 9:10 pm
It looks like you are missing a ">" closing tag on your "nav" elements. That could be part of the problem.
n/a Points
2016-07-21 5:21 pm

Hi! love the menu, but it does not seem to work with Internet Exlporer 10, please help!

 

Thanks!

Staff
24,701 Points
2016-07-21 5:36 pm
Can you provide a link to the site for us to test and replicate the issue?

Thank you,
John-Paul
n/a Points
2016-07-23 9:20 am

Hi John-Paul,

 

Thanks for getting back to me!

The link is www.**********.com

 

Cheers

Rob

Staff
39,221 Points
2016-07-25 6:43 pm
Hello Rob,

When using an IE 10 emulator, the menu seems to work correctly. What is the odd behavior you are seeing?

Kindest Regards,
Scott M
n/a Points
2016-08-23 2:58 pm

This menu bar does not occupy the full width of the screen when I use this approach. Can you help me how to make the entire menu bar occupy the full screen width like a block level element ?

Staff
4,988 Points
2016-08-23 3:02 pm
The bar is limited to the number of options in the list. You can try nest the list within a full-width element.
Staff
34,213 Points
2016-08-24 2:57 pm
Hello Angie,

We generally do not provide coding support, so we can't give you the code you need to use. However, you can add a little bit of code in CSS in order to make it non-clickable while retaining its properties while when you hover over the item. Check out this article for more information on what's needed. You will need to be familiar with your CSS and reference the CSS section that is going to be affected by the change. If you are using the HTML code, then it will be different. You may need to search for code that can be used for this purpose or consult with a developer.

If you have any further questions or comments, please let us know.

Regards,
Arnel C.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

181 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!