VIDEO TUTORIAL

CSS Drop down Menu

*Set the video to HD for best viewing experience.

Written by Eric Young Posted on March 5th, 2013 No Comments

This is how you make a simple CSS drop down menu.

First, lets go ahead and start with the HTML:


<h1>CSS Dropdown Menu</h1>
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#" class="padding-right">Services</a>

      <ul>
         <li><a href="#">SEO</a></li>
         <li><a href="#">Websites</a></li>
         <li><a href="#">Hosting</a></li>
         <li><a href="#">Domain</a></li>
      </ul>
    </li>

    <li><a href="#" class="padding-right">Portfolio</a>

        <ul>
         <li><a href="#">Blog Site</a></li>
         <li><a href="#">Restuarant Site</a></li>
         <li><a href="#">Design Site</a></li>
         <li><a href="#">Widget Site</a></li>
      </ul>

    </li>
    <li><a href="#">Contact</a></li>
</ul>

<h1>CSS Dropdown Menu</h1>

<ul>

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

<li><a href="#" class="padding-right">Services</a>

<ul>

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

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

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

</ul>

</li>

<li><a href="#" class="padding-right">Portfolio</a>

<ul>

<li><a href="#">Restuarant Site</a></li>

<li><a href="#">Design Site</a></li>

<li><a href="#">Widget Site</a></li>

</ul>

</li>

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

</ul>

Then the CSS:


ul { list-style:none; margin:0 }
ul li { float:left; position:relative; }
ul li a { display:block; padding:10px 20px; border:1px solid #1787cf; background:#064b76; color:#1787cf; }
ul li a:hover { background:#1787cf; color:#064b76; }
ul li a.padding-right {  padding:10px 20px 10px 20px; background: #064b76 url(arrow.png) no-repeat 95% center }
ul li a.padding-right:hover {  background: #1787cf url(arrow.png) no-repeat 95% center;  color:#064b76;  }
ul li ul{ display:none; }
ul li:hover>ul{ display:block; position:absolute; top:43px; left:auto; }
ul li ul li a { color:#1787cf; display:block; padding:10px 20px; border:1px solid #064b76; background:#1787cf; 
color:#064b76; width:100px }
ul li ul li a:hover{ background:#064b76; color:#1787cf;  }

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

ul li { float:left; position:relative; }

ul li a { display:block; padding:10px 20px; border:1px solid #1787cf; background:#064b76; color:#1787cf; }

ul li a:hover { background:#1787cf; color:#064b76; }

ul li a.padding-right { padding:10px 20px 10px 20px; background: #064b76 url(arrow.png) no-repeat 95% center }

ul li a.padding-right:hover { background: #1787cf url(arrow.png) no-repeat 95% center; color:#064b76; }

ul li ul{ display:none; }

ul li:hover>ul{ display:block; position:absolute; top:43px; left:auto; }

ul li ul li a { color:#1787cf; display:block; padding:10px 20px; border:1px solid #064b76; background:#1787cf;

color:#064b76; width:100px }

ul li ul li a:hover{ background:#064b76; color:#1787cf; }

Conclusion:

This is a very simple way to make a CSS drop down menu. I’m using the Pseudo-class and the sibling selector to target the nested ul. ( ul li:hover>ul ) Im setting the ul li with a relative position which allows you to control the nested ul the way you want. I added a padding-right class where I added an arrow to signify there was a drop down.

To find out more about sibling selectors check out this article on child and sibling selectors by Chris Coyier@CSS-Tricks. To find out more about Pseudo-classes check out this article.

Check out the Demo! Download files!

About Eric Young

Hi, my name is Eric Young. I’m a web designer who has worked in the IT industry since 2000. I love blogging and making the web a better place. If I'm not here I'm probably playing Gears of War. LOL

MENU

CSS Drop down Menu

This is how you make a simple CSS drop down menu.

First, lets go ahead and start with the HTML:

Then the CSS:

Conclusion:

About Eric Young

Related Articles You Might Enjoy!

Leave a Reply