Horizontal Drop-Down Menu (Down-Down Menu)
A simple horizontal drop-down menu is designed below. Codes can be changed to make them desired.
#menu ul { } Formats all ul tags in menu. The marks at the beginning of the lines have been removed and the margin and padding have been reset so that all elements align.
#menu li { } formats all li tags in the menu. By making float:left, the li's are placed side by side. Their width is 150 px.
#menu li ul { } Formats the ul tags that are inside the menu and also between the li tags. These ul tags are the lists that will drop down when the relevant element is hovered. By setting display:none here, these lists are not normally visible. In addition, position and location settings were made and their locations were adjusted.
#menu li:hover ul { } formats the ul tag in menu that is in the hovered li. By making Display:block, the list in the hovered li becomes visible.
#menu li a { } Formats the a tags inside the menu and between the li tags.
#menu li a:hover { } formats the hover states of a tags inside the menu and between the li tags.
Html Section:
<div id="menu">
<ul>
<li><a href="#">Aaa</a></li>
<li><a href="#">Bbb</a>
<ul> <!-- Make sure sublists are between li tags -->
<li><a href="#">Ccc</a></li>
<li><a href="#">Ddd< /a></li>
<li><a href="#">Eee</a></li>
<li><a href="#">Fff</a></li>
</ul >
</li>
<li><a href="#">Ggg</a></li>
<li><a href="#">Mmm</a>
<ul>
<li><a href="#">Nnn</a></li>
<li><a href="#">Ooo</a></li>
<li><a href= "#">Aoo</a></li>
<li><a href="#">Ppp</a></li>
<li><a href="#">Rrr</a>< /li>
</ul>
</li>
<li><a href="#">FAQ</a></li>
<div style="clear:both"></div> <!-- After the last element placed side by side, float property We remove the effect. -->
</ul>
</div>
CSS Part:
#menu { padding:0px; }
#menu ul {
margin:0px;
padding:0px;
list-style-type:none; }
#menu li {
float:left; /* li tags are placed side by side */
position:relative; /* We ensure that the inner uls are positioned here */
width:150px; }
#menu li ul {
display:none; /* make the inner lists not initially visible */
position:absolute; /* To set the position */
left:0px; /* we adjust the distance from the left according to our own menu */
top:29px; } /* we adjust the distance from the top according to our own menu */
#menu ul li a {
background-color:pink;
border:1px solid red;
color:red;
font-weight:bold;
display:block;
margin:0px;
padding:2px;
text-decoration:none;
line-height:24px;
text-align:center; }
#menu ul li a:hover {
background-color:white;
color:gray;}
#menu li:hover ul {
display:block;} /* We make the ul in the hovered li visible. */
creating css horizontal popup menu, how to make a dropdown menu, how to make a horizontal dropdown menu, css menu examples, horizontal menu examples
EXERCISES
|
CSS horizontal popup menu tutorial
|
Try It
|
By clicking the Try It Yourself button, you can see the sample drop-down menu and try it yourself by changing your codes.
Read 954 times.