May 2 2015 2:06PM
John
1843 Views
Here John gave such a good explanation with example and Demo for Design dropdown using CSS/HTML.
HTML
<body>
<nav>
<ul class="dropdown">
<li class="drop"><a href="#">Title</a>
<ul class="sub_menu">
<li><a href="#">Java Script</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">.NET/C# </a></li>
</ul>
</li>
</ul>
</nav>
</body>
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function () {
$(".dropdown > li").hover(function () {
var $container = $(this),
$list = $container.find("ul");
$container.data("origHeight", $container.height());
$list.show().css({
paddingTop: $container.data("origHeight")
});
}, function () {
var $el = $(this);
$el.height($(this).data("origHeight")).find("ul").css({ top: 0 }).hide().end().find("a").removeClass("hover");
});
});
</script>
CSS
<style type="text/css">
nav
{
width: 750px;
margin: 1em auto;
}
ul
{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.dropdown li
{
font-weight: bold;
float: left;
width: 180px;
position: relative;
background: #ecf0f1;
}
ul.dropdown li a
{
display: block;
padding: 20px 8px;
color: #34495e;
position: relative;
z-index: 2000;
text-align: center;
text-decoration: none;
font-weight: 300;
}
ul.dropdown ul
{
display: none;
position: absolute;
top: 0;
left: 0;
width: 180px;
z-index: 1000;
}
ul.dropdown ul li a:hover
{
display: block;
background: #3498db !important;
color: #fff !important;
}
.drop > a:after
{
content: "";
position: absolute;
right: 10px;
top: 40%;
border-left: 5px solid transparent;
border-top: 5px solid #333;
border-right: 5px solid transparent;
z-index: 999;
}
</style>
Demo
Hi, This is John.I hope this page will helps you to design dropdown using CSS/HTML.Thanks.
BackToTop