We are independent & ad-supported. We may earn a commission for purchases made through our links.

Advertiser Disclosure

Our website is an independent, advertising-supported platform. We provide our content free of charge to our readers, and to keep it that way, we rely on revenue generated through advertisements and affiliate partnerships. This means that when you click on certain links on our site and make a purchase, we may earn a commission. Learn more.

How We Make Money

We sustain our operations through affiliate commissions and advertising. If you click on an affiliate link and make a purchase, we may receive a commission from the merchant at no additional cost to you. We also display advertisements on our website, which help generate revenue to support our work and keep our content free for readers. Our editorial team operates independently from our advertising and affiliate partnerships to ensure that our content remains unbiased and focused on providing you with the best information and recommendations based on thorough research and honest evaluations. To remain transparent, we’ve provided a list of our current affiliate partners here.

How Do I Create Drop down CSS Menus?

By Kristen Grubb
Updated May 16, 2024
Our promise to you
EasyTechJunkie is dedicated to creating trustworthy, high-quality content that always prioritizes transparency, integrity, and inclusivity above all else. Our ensure that our content creation and review process includes rigorous fact-checking, evidence-based, and continual updates to ensure accuracy and reliability.

Our Promise to you

Founded in 2002, our company has been a trusted resource for readers seeking informative and engaging content. Our dedication to quality remains unwavering—and will never change. We follow a strict editorial policy, ensuring that our content is authored by highly qualified professionals and edited by subject matter experts. This guarantees that everything we publish is objective, accurate, and trustworthy.

Over the years, we've refined our approach to cover a wide range of topics, providing readers with reliable and practical advice to enhance their knowledge and skills. That's why millions of readers turn to us each year. Join us in celebrating the joy of learning, guided by standards you can trust.

Editorial Standards

At EasyTechJunkie, we are committed to creating content that you can trust. Our editorial process is designed to ensure that every piece of content we publish is accurate, reliable, and informative.

Our team of experienced writers and editors follows a strict set of guidelines to ensure the highest quality content. We conduct thorough research, fact-check all information, and rely on credible sources to back up our claims. Our content is reviewed by subject matter experts to ensure accuracy and clarity.

We believe in transparency and maintain editorial independence from our advertisers. Our team does not receive direct compensation from advertisers, allowing us to create unbiased content that prioritizes your interests.

Cascading Style Sheets (CSS) is a name used to describe the way a Hyper Text Markup Language (HTML) or Extensible Markup Language (XML) document is formatted. It can be used for any type of XML document, but it is most often used with web pages written in HTML. CSS can be used to create drop down menus on web pages. Drop down CSS menus have a single text item shown until the visitor uses the mouse to hover over the menu, at which point the entire list of items is shown. The menu is created using the CSS identification and class tags.

Drop down CSS menus start with the ID selector. This selector looks like #. It is followed by the name of the ID. You can name the ID anything, but it should be descriptive so that others can read your code. For example, a drop down menu can use the code #drop1.

Create the class for the first item in the drop down menu by using the class selector, which looks like a period. The class will be part of the HTML list element. The list element is designated by the characters "li." Create the top level class by typing "li.top." The class description is contained between two curly braces.

The following example shows the entire CSS code for the first item in the list:

#drop1 li.top {font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: #FF00FF;}

Next, create a class for the items that will be hidden beneath the first item in the CSS menu. The class will describe the HTML unordered list, which is designated with the characters "ul." The description will look essentially the same as the top-level menu item, with the addition of the words "display:none#59" at the beginning of the description. This indicates that the items in the unordered list will be hidden until the pointer hovers over the drop down CSS menu.

The following is an example of this portion of the CSS code:

#drop1 ul.link {
display:none#59
font-family: Verdana, Geneva, san-serif;
font-size: 100%;
color: #FF00FF;}

You will want to the drop down CSS menu to appear over the rest of the HMTL document. Otherwise, when the visitor hovers over the menu, it will push the rest of the document down the page to make room for the list. Setting the position element to absolute, will do this.

The code to set the position is:

#drop1{position:absolute;}

That is all that is needed for the CSS portion of the drop down menu. The rest of the drop down CSS menu is created in the HTML document using the "div," "id," "class," "li" and "ul" elements. The "div" tag separates the menu portion of the document. Type <div id="drop1"> to create the drop down menu portion. Then start the unordered list using the HTML "ul" element.

Add the top class to the first list item, and the link class for the rest of the items. The HTML code should look similar to:

<div id="drop1">
<li class="top">Top Item</li>
<li class="link"><a href="#">Item</a></li>
<li class="link"><a href="#">Item</a></li>
<li class="link"><a href="#">Item</a></li>
</ul> </div>

When you open the document in a web browser, the drop down CSS menu will appear as a single item on the page. When you move your mouse over the top item, the rest of the menu will appear. The rest of the text on the page will not move, but a portion will be hidden by the menu.

EasyTechJunkie is dedicated to providing accurate and trustworthy information. We carefully select reputable sources and employ a rigorous fact-checking process to maintain the highest standards. To learn more about our commitment to accuracy, read our editorial process.

Discussion Comments

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.

EasyTechJunkie, in your inbox

Our latest articles, guides, and more, delivered daily.