CSS Simple drop down menu 2

Last Modified: 26 February 2023

Example

HTML Code

<div class='drop'>
      <ul class='drop_menu'>
        <li><a href='#'>Link 1</a>
          <ul>
            <li><a href='#'>Sub Link 1</a></li>
            <li><a href='#'>Sub Link 2</a></li>
          </ul>
        </li>
        <li><a href='#'>Link 2</a>
          <ul>
            <li><a href='#'>Sub Link 1</a></li>
            <li><a href='#'>Sub Link 2</a></li>
            <li><a href='#'>Sub Link 3</a></li>
            <li><a href='#'>Sub Link 4</a></li>
          </ul>
        </li>
        <li><a href='#'>Link 3</a>
          <ul>
            <li><a href='#'>Sub Link 1</a></li>
            <li><a href='#'>Sub Link 2</a></li>
            <li><a href='#'>Sub Link 3</a></li>
            <li><a href='#'>Sub Link 4</a></li>
          </ul>
        </li>
      </ul>
    </div>

CSS code

/* CSSTerm.com Simple Horizontal DropDown CSS menu */

.drop_menu {
	background:#005555;
	padding:0;
	margin:0;
	list-style-type:none;
	height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
	padding:9px 20px;
	display:block;
	color:#fff;
	text-decoration:none;
	font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
	left:0px;
	top:30px;
	background:#5FD367;
	padding:0px;
}

.drop_menu li:hover ul li a {
	padding:5px;
	display:block;
	width:168px;
	text-indent:15px;
	background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }