Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change content on hover doesn't work

    I use different arrow on dropdown menu.
    On hovering changing arrow doesn't work or submenu isn't showed.
    How to solve ?

    See code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pure CSS Responsive Dropdown Menu</title>
        <style type="text/css">
            /* CSS Document */
    
            @import url(https://fonts.googleapis.com/css?family=Open+Sans);
            @import url(https://fonts.googleapis.com/css?family=Bree+Serif);
    
            body {
                background-color:khaki;
                font-size: 22px;
                line-height: 32px;
                color: #ffffff;
                margin: 0;
                padding: 0;
                word-wrap: break-word !important;
                font-family: 'Open Sans', sans-serif;
            }
    
            
    
            h1 {
                font-size: 60px;
                text-align: center;
                color: #FFF;
            }
    
            h3 {
                font-size: 30px;
                line-height: 34px;
                text-align: center;
                color: #FFF;
            }
    
                h3 a {
                    color: #FFF;
                }
    
            a {
                color: #FFF;
            }
    
            h1 {
                margin-top: 100px;
                text-align: center;
                font-size: 60px;
                line-height: 70px;
                font-family: 'Bree Serif', 'serif';
            }
    
            #container {
                margin: 0 auto;
                max-width: 890px;
            }
    
            p {
                text-align: center;
            }
    
            .toggle,
            [id^=drop] {
                display: none;
            }
    
            /* Giving a background-color to the nav container. */
            nav {
                text-align:center;
                margin-left: auto;
                margin-right:auto;
                background-color: #254441;
            }
    
           #CAPT li a:hover {
               background:lightblue;
               text-transform:uppercase;
               font-weight:bold;
               
           }
    
            /* Since we'll have the "ul li" "float:left"
     * we need to add a clear after the container. */
    
            nav:after {
                content: "";
                display: table;
                clear: both;
            }
    
            /* Removing padding, margin and "list-style" from the "ul",
     * and adding "position:reltive" */
            nav ul {
                display:inline-block;
                padding: 0;
                margin:0;
                list-style: none;
                position: relative;
            }
    
                /* Positioning the navigation items inline */
                nav ul li {
                    margin: 0px;
                    display: inline-block;
                    float: left;
                    background-color: #254441;
                }
    
            /* Styling the links */
            nav a {
                display: block;
                padding: 14px 20px;
                color: #FFF;
                font-size: 17px;
                text-decoration: none;
               
            }
    
    
            nav ul li ul li:hover {
                background: orange;
            }
    
            
    
            /* Background color change on Hover */
            nav a:hover {
                background-color: orange;
                color: red;
                
            }
            nav li:hover {
                background-color: orange;
                color: red;
             }
    
            nav ul li ul li > a:hover :after {
               content:' \2192';
            }
    
    
           /* Hide Dropdowns by Default
     * and giving it a position of absolute */
            nav ul ul {
                display: none;
                position: absolute;
                /* has to be the same number as the "line-height" of "nav a" */
                top: 60px;
            }
    
            /* Display Dropdowns on Hover */
            nav ul li:hover > ul {
                display: inherit;
            }
    
            /* Fisrt Tier Dropdown */
            nav ul ul li {
                width: 170px;
                float: none;
                display: list-item;
                position: relative;
            }
    
            /* Second, Third and more Tiers    
     * We move the 2nd and 3rd etc tier dropdowns to the left
     * by the amount of the width of the first tier.
    */
            nav ul ul ul li {
                position: relative;
                top: -60px;
                /* has to be the same number as the "width" of "nav ul ul li" */
                left: 170px;
            }
    
    
            /* Change ' +' in order to change the Dropdown symbol */
            li > a:after {
                content: ' \2193';
            }
            
            li > a:only-child:after {
                content: '';
            }
    
           /* I want other content (right arrow) when hovering eg. Grafiek and see dropdown beside ('Bar' - 'Line' - 'Pie'chart text)
            
    
    
            /* Media Queries
    --------------------------------------------- */
    
            @media all and (max-width : 768px) {
    
                #logo {
                    display: block;
                    padding: 0;
                    width: 100%;
                    text-align: center;
                    float: none;
                }
    
                nav {
                    margin: 0 auto;
                }
    
                /* Hide the navigation menu by default */
                /* Also hide the  */
                .toggle + a,
                .menu {
                    display: none;
                }
    
                /* Stylinf the toggle lable */
                .toggle {
                    display: block;
                    background-color: #254441;
                    padding: 14px 20px;
                    color: #FFF;
                    font-size: 17px;
                    text-decoration: none;
                    border: none;
                    
                }
    
                .toggle:hover {
                        background-color: yellow;
                    }
    
                /* Display Dropdown when clicked on Parent Lable */
                [id^=drop]:checked + ul {
                    display: block;
                }
    
                /* Change menu item's width to 100% */
                nav ul li {
                    display: block;
                    width: 100%;
                }
    
                nav ul ul .toggle,
                nav ul ul a {
                    padding: 0 40px;
                }
    
                nav ul ul ul a {
                    padding: 0 80px;
                }
    
                
                nav ul li ul li .toggle,
                nav ul ul a,
                nav ul ul ul a {
                    padding: 14px 20px;
                    color: #FFF;
                    font-size: 17px;
                }
    
    
                nav ul li ul li .toggle,
                nav ul ul a {
                    background-color: yellow;
                    color: yellow;
                }
    
                /* Hide Dropdowns by Default */
                nav ul ul {
                    float: none;
                    position: static;
                    color: #ffffff;
                    /* has to be the same number as the "line-height" of "nav a" */
                }
    
                    /* Hide menus on hover */
                    nav ul ul li:hover > ul,
                    nav ul li:hover > ul {
                        display: none;
                    }
    
                    /* Fisrt Tier Dropdown */
                    nav ul ul li {
                        display: block;
                        width: 100%;
                    }
    
                    nav ul ul ul li {
                        position: static;
                        /* has to be the same number as the "width" of "nav ul ul li" */
                    }
            }
    
            @media all and (max-width : 330px) {
    
                nav ul li {
                    display: block;
                    width: 94%;
                }
            }
    
    
    
        </style>
    
    </head>
    <body>
        <nav>
            <label for="drop" class="toggle">Menu</label>
            <input type="checkbox" id="drop" />
            <ul class="menu">
                <li><a href="#">Startpagina</a></li>
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-2" class="toggle">Informatie</label>
                    <a href="#">Informatie</a>
                    <input type="checkbox" id="drop-2" />
                    <ul>
                        <li><a href="#">Uitnodiging</a></li>
                        <li><a href="#">Schrijf In</a></li>
                        <li>
                            <!-- Second Tier Drop Down -->
                                <label for="drop-3" id="AR" class=" toggle">Grafiek</label>
                                <a href="#" >Grafiek</a>
                                <input type="checkbox" id="drop-3" />
                                <ul id="CAPT">
                                    <li><a href="#">BarGrafiek</a></li>
                                    <li><a href="#">LijnGrafiek</a></li>
                                    <li><a href="#">TaartGrafiek</a></li>
                                </ul>
                        </li>
                    </ul>
                </li>
    
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-2" class="toggle">Foto's</label>
                    <a href="#">Foto's</a>
                    <input type="checkbox" id="drop-2" />
                    <ul>
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">Foto's</label>
                            
                                <a href="#">2005-2010</a>
                                <input type="checkbox" id="drop-3" />
                                <ul id="CAPT">
                                    <li><a href="#">2006</a></li>
                                    <li><a href="#">2007</a></li>
                                    <li><a href="#">2008</a></li>
                                    <li><a href="#">2009</a></li>
                                    <li><a href="#">2010</a></li>
                                </ul>
                            
                         </li>
                            
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">Grafiek</label>
                            <a href="#">2011-2015</a>
                            <input type="checkbox" id="drop-3" />
                            <ul id="CAPT">
                                <li><a href="#">2011</a></li>
                                <li><a href="#">2012</a></li>
                                <li><a href="#">2013</a></li>
                                <li><a href="#">2014</a></li>
                                <li><a href="#">2015</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">Grafiek</label>
                            <a href="#">2016-2020</a>
                            <input type="checkbox" id="drop-3" />
                            <ul id="CAPT">
                                <li><a href="#">2016</a></li>
                                <li><a href="#">2017</a></li>
                                <li><a href="#">2018</a></li>
                                <!-- <li> <a href="#">2019</a></li>
                         <li><a href="#">2020</a></li> -->
                            </ul>
                        </li>
    
                    </ul>
    
                </li>
    
    
                <li>
                    <!-- First Tier Drop Down -->
                    <label for="drop-2" class="toggle">Foto's</label>
                    <a href="#">Overzicht</a>
                    <input type="checkbox" id="drop-2" />
                    <ul>
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">Overzicht</label>
                            <a href="#">2005-2010</a>
                            <input type="checkbox" id="drop-3" />
                            <ul id="CAPT">
                                <li><a href="#">2006</a></li>
                                <li><a href="#">2007</a></li>
                                <li><a href="#">2008</a></li>
                                <li><a href="#">2009</a></li>
                                <li><a href="#">2010</a></li>
                            </ul>
                        </li>
    
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">Grafiek</label>
                            <a href="#">2011-2015</a>
                            <input type="checkbox" id="drop-3" />
                            <ul id="CAPT">
                                <li><a href="#">2011</a></li>
                                <li><a href="#">2012</a></li>
                                <li><a href="#">2013</a></li>
                                <li><a href="#">2014</a></li>
                                <li><a href="#">2015</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- Second Tier Drop Down -->
                            <label for="drop-3" class="toggle">Grafiek</label>
                            <a href="#">2016-2020</a>
                            <input type="checkbox" id="drop-3" />
                            <ul id="CAPT">
                                <li><a href="#">2016</a></li>
                                <li><a href="#">2017</a></li>
                                <li><a href="#">2018</a></li>
                                <!-- <li> <a href="#">2019</a></li>
                         <li><a href="#">2020</a></li> -->
                            </ul>
                        </li>
    
                    </ul>
    
                </li>
                
                <li><a href="#">Geschiedenis</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Gastenboek</a></li>
            </ul>
        </nav>
    
    </body>
    </html>
    Last edited by VIPStephan; Feb 5th, 2019 at 11:23 AM. Reason: added code BB tags


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •