-- Dropdown Menu Mengunakan HTML CSS --
<html>
<head>
<title>drowpdown</title>
<style>
* {margin:0; padding:0;}
menu ul {list-style:none;}
menu >ul >li {float:left;}
menu ul li a {text-decoration:none;
padding:5px 10px;
background:red;
width:90px;
height:20px;
display:block;
}
menu ul >li >ul {top:30px;}
menu li {position:relative}
menu li ul {position:absolute; display:none;}
menu li:hover >ul {display:block;}
menu li li >ul {left:100%; top:0px;}
</style>
</head>
<body>
<menu>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a> </li>
<li><a href="">Product 3 ↓</a>
<ul>
<li><a href="">Product 3</a></li>
<li><a href="">Product 4 →</a>
<ul>
<li><a href="">Product 4</a></li>
<li><a href="">Product 4</a></li>
<li><a href="">Product 4</a></li>
<li><a href="">Product 4</a></li>
</ul>
</li>
<li><a href="">Product 5</a></li>
<li><a href="">Product 6</a></li>
</ul>
</li>
<li><a href="">Product 7</a></li>
<li><a href="">Product 8 ↓</a>
<ul>
<li><a href="">Product 8</a></li>
<li><a href="">Product 8</a></li>
<li><a href="">Product 8</a></li>
<li><a href="">Product 8</a></li>
<li><a href="">Product 8</a></li>
</ul>
</li>
</ul>
</menu>
</body>
</html>
-- Exp 1 --
-- Exp 2 --
0 komentar:
Posting Komentar