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
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
26,137 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.

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-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
26,137 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
26,137 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
29,167 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
29,167 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
17,726 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
17,726 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
17,726 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
29,167 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
29,167 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
17,726 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
26,137 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
26,137 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
29,167 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
29,167 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
17,726 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
29,167 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
29,167 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
29,167 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
17,726 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
29,167 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
26,137 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
17,726 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
17,726 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
5,084 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
26,137 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
29,167 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
29,167 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
29,167 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
29,167 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
29,167 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
5,084 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
26,137 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
5,084 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
26,137 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!!!

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.

114 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!