JSFiddle - React, Tailwind, and code Playground

by xsmael

HTML

<body>


	<div id = "div1">
	
	
	 <ul >
	
			<li><a href="#">PROUCT</a>
			<ul >
				<li><a href="#">Product 1 </a></li>
				<li><a href="#">Product 2</a></li>
				<li><a href="#">Product 3</a></li>
				<li><a href="#">Product 4</a></li>
				<li><a href="#">Product 5</a></li>
				<li><a href="#">Product 6</a></li>
				<li><a href="#">Product 7</a></li>
			</ul>
			</li>
			
		</ul>
		
		<div id="buying_form"><h2> please fill your buying form</h2></div>

		</div>

CSS

ul
{
margin:0px;
padding:0px;	
}
ul li
{
	background-color:black;
	border:1px solid white;
	width:330px;
	height:30px;
	line-height:30px;
	float:left;
	text-align:center;
	list-style:none;
	opacity:.8;
	z-index:1px;
}
ul li a
{
	color:white;
	text-decoration:none;
	display:block;
}
ul li a:hover
{
background-color:ORANGE;
}
ul li ul li
{
display:none;

}
ul li:hover ul li
{
	display:block;
	cursor:default;
}
#div1
{
	width:200px;
    height:650px;
	background:url(bgi2.jpg);
	text-align:center;	
}
#buying_form
{
	float:left;
	margin-left:4px;
	margin-top:100px;
	width:326px;
	height: 442px;
	color:MEDIUMBLUE;
	border:1px solid gray;
	background-color:#708090;
	opacity:.5;
}