Making a drop down menu using html/css

+6 Steven the awesome · June 1, 2014
Someone ask me how to make a drop down menu. so here some code how to do it.


<html>
<head>
<style type="text/css">
#nav, #nav ul{
padding: 0px;
margin: 0px;
list-style: none;
}
#nav li{
float: left;
width: 120px;
}
#nav ul{
position: absolute;
width: 120px;
display: none;
}
#nav li:hover ul{
display: block;
}
#nan a{
display: block;
margin: 2px 5px 3px 5px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
}
ul a{
font-weight: bold;
color: #F60;
cursor: default;
}
ul ul a:link, ul ul a:visited{
font-weight: normal;
color: #CCC;
cursor: pointer;
}
ul ul a:hover, ul ul a:active{
font-weight: normal;
color: #FFF;
cursor: pointer;
}
ul li{
background-color: #666;
border-top: 3px solid #FFF;
border-left: 0px;
}
</style>
</head>
<body>

<ul id="nav">

<li><a href="#">Main item 1</a>

<ul>
<li><a href="#">Main item 1.1</a></li>
<li><a href="#">Main item 1.2</a></li>
<li><a href="#">Main item 1.3</a></li>
</ul>

</li>

<li><a href="#">Main item 2</a>

<ul>
<li><a href="#">Main item 2.1</a></li>
<li><a href="#">Main item 2.2</a></li>
<li><a href="#">Main item 2.3</a></li>
</ul>

</li>

<li><a href="#">Main item 3</a>

<ul>
<li><a href="#">Main item 3.1</a></li>
<li><a href="#">Main item 3.2</a></li>
</ul>

</li>

</ul>

</body>
</html>

Post a Reply

Replies

Oldest  Newest  Rating
+3 Samuel Oloruntoba · June 1, 2014
hi dude, well you can try checking out the link at the bottom of the page, if you cannot still understand it you can send me a PM, it is a multi level dropdown menu 

http://codepen.io/kayandrae/full/DsKtd


also, you can check out this cool page CLICK ME, I GO TO COOL PAGE
+2 Samuel Oloruntoba · June 2, 2014
you should use text-align to center the text or you can just use padding
+2 Saurabh patel · August 30, 2014
can anyone teach  how css works in here, because it's really freaking me out.!!
+1 Kaveh Greenwood · August 31, 2014
Thanks for sharing this Steven!
0 Ethan Fraser · June 1, 2014
In case anyone is wondering, similar can be done but with a smoother and more visually friendly manner with jQuery. 

EDIT: Another way to place the <li> elements on one page is to set there display to inline. It doesn't effect the <ul>'s setting of display: none; as it is a CSS property for <li> and not <ul>
0 William Moffat · June 1, 2014
That works great, although I seem completely unable to centre the text to the middle of the navbar.
0 William Moffat · June 2, 2014
Text-align didn't work, but  padding may
-1 Ethan Fraser · June 2, 2014
The text-align property affects inline level content. So for an example, the default CSS for <p> is that the <p> element displays as a block.

display: block;

Therefore the content inside of that is treated as the inline level content. If you were to change the <p> to display as inline

display: inline;

then the text wouldn't center if you set the CSS to

text-align: center;

as the content inside it is not inline level, the element itself is. What happens in the text-align: center; process is that because the element is a block, it by default takes up as much space as it can and the text-align: center; merely sets it to the center of that element space. When you set an element to inline then whether you add a width attribute or not it will only take up as much space as it's content meaning that it can't center, left align, right align or even justofy it as there is no space to align it in.

That is my understanding of it.
  • 1

HTML / CSS / Web Design

103,615 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators