そこで、会社のWebショップを作成し、さまざまな種類の製品カテゴリを選択するためのドロップダウンメニューを作成しました。私の製品はドロップダウンメニューのすぐ下に表示され、ドロップダウンメニュー自体がさまざまな製品画像を上書きします。私のアイデアは、商品の画像にカーソルを合わせて、商品に関する情報を表示できるようにすることでした。これを実現するために、画像を上書きする絶対位置で不透明度0のdivを作成しました。カーソルを合わせると、不透明度が50％に変わります。ただし、ドロップダウンメニューが画像に重なるため、商品カテゴリを選択しようとすると、商品画像にカーソルを合わせるとドロップダウンメニューが消えます。
これが私のcssコードです。
#product_info
{
position:absolute;
background-color:#000;
width:250px;
height:167px;
opacity:0.0;
filter:alpha(opacity=0); /* For IE8 and earlier */
}
#product_info:hover
{
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
ul.dropdown, ul.dropdown ul
{
list-style:none;
margin:0; padding:0;
position: relative;
}
ul.dropdown ul
{
display:none; /*initially menu item is hidden*/
position: absolute; /*absolute positioning is important for menu to float*/
background-color:#fff;
text-align: left;
top:18px;
width:150px;
}
/*Hover effect for menu*/
ul.dropdown li:hover > ul
{
display:block;
}
そして、これが私のhtmlコードです。product_info divは、php関数products（）からロードされます。
<?php
require 'scripts/cart.php';
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html>
<head>
<title>Streetstash - Webshop</title>
<LINK href="stylesheets/style.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id='navigation'><p class='nav'><a class='nav' href='/streetstash'>Forside</a> / <a class='nav' href='omkring-os.html'>Omkring os</a> / <a class='nav' href='#'>Blog</a></p></div>
<div id='container_webshop'>
<div id='container_about'>
<table cellpadding="0" cellspacing="15" width="200px">
<tr>
<td colspan="3" align="center"><p class='subheader'><?php
if($_GET['kategori'] == null){
echo "Alle produkter";
}else{
echo $_GET['kategori'];
}
?></p></td>
</tr>
<tr>
<td>
<ul class='dropdown'>
<li class='header_item' >
<p class='dropdown_headers'><a class='nav' href="#">Beklædning</a></p>
<ul>
<?php echo "
<li ><p class='nav'><a class='nav' href='webshop.php?kategori=".'T-shirts'."'>T-shirts</a></p></li>
<li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Sweatshirts'."'>Sweatshirts</a></p></li>
<li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Hatte'."'>Hatte</a></p></li>";?>
</ul>
</li>
</td>
<td>
<p class='nav'>/</p>
</td>
<td>
<ul class='dropdown'>
<li>
<p class='dropdown_headers'><a class='nav' href="#">Skate</a></p>
<ul>
<?php echo "
<li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Decks'."'>Decks</a></p></li>
<li><p class='nav'><a class='nav' href='webshop.php?kategori=".'Hjul'."'>Hjul</a></p></li>";
?>
</ul>
</li>
</ul>
</td>
</ul>
</td>
</tr>
</table>
<table>
<tr>
<?php products(); ?>
</table>
</div>
</div>
</body>
</html>