0

So I am making a webshop for my company and I made a dropdown menu to choose different kinds of product categories. My products are listed right underneath the dropdown menu and the dropdown menu itself overrides the different product images. My idea was to be able to hover over a product image to able to see some information about the product. To achieve this i made a div with absolute position that overides the image but with an opacity of 0. When you hover over it the opacity changes to 50%. But since the dropdown menu overides the image, when trying to choose a product category the dropdown menu vanishes when hovering over the product image.

Here is my css code.

#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;
}

And here is my html code. The product_info div is loaded from the php function 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>
4

1 回答 1

1

您是否尝试过使用 z-index？

于 2013-02-07T21:27:16.073 回答