خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

dropdown menu problem

Hello,

I have a drop menu problem. I copied a dropdown menu with a navigation bar from W3Schools Online Web Tutorials. But the dropdown content doesn't drop down when hovered over it. I tried changing the position attribute to fixed and relative and I need a combination of both of these attributes for my website. Both of the drop down contents coded widths in the css code have to show correctly (fixed does this but relative doesn't) and the menu must move along the screen correctly while scrolling down the page (relative does this but fixed doesn't).

I don't know how to code this. Any help would be appreciated.

Greetings,

Colin

Code:
<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">

        <title>Blog Template for Bootstrap</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link href="<?php echo get_bloginfo( 'template_directory' );?>/blog.css" rel="stylesheet">
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
        <?php wp_head();?>
</head>

<body>
    <div class="header-top"><a href="home"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/header-top.png"></a></div>
       
        <div class="navbar">
            <ul>
            <li><a href="home">Home</a></li>
                    <li class="dropdown">
                                <a href="bezorggebieden" "javascript:void(0)" class="dropbtn">Bezorggebieden</a>
                                <div class="dropdown-content">
                                        <a href="amersfoort">Amersfoort</a>
                                        <a href="nijkerk">Nijkerk</a>
                                        <a href="zeewolde">Zeewolde</a>
                                </div>
                        </li>
                        <li class="dropdown">
                                <a href="producten" "javascript:void(0)" class="dropbtn">Producten</a>
                                <div class="dropdown-content">
                                        <a href="groente">Groente</a>
                                        <a href="fruit">Fruit</a>
                                        <a href="diversen">Diversen</a>
                                </div>
                        </li>
                        <li><a href="recepten">Recepten</a></li>
                        <li><a href="personeel">Personeel</a></li>
                        <li><a href="vacatures">Vacatures</a></li>
                        <li><a href="contact">Contact</a></li>
                </ul>
        </div>
       
                <h1 class="blog-title"><a href="<?php echo get_bloginfo( 'wpurl' );?>"><?php echo get_bloginfo( 'name' ); ?></a></h1>
        <p class="lead blog-description"><?php echo get_bloginfo( 'description' ); ?></p>


Code:
.header-top {
    border: 15px solid white;
    text-align: center;
}

.header-top img {
    width: 100%;
    max-width: 933px;
}

.navbar {
    max-width: 940px;
    margin: auto;
          overflow: hidden;
          border: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #412F73;
          border-radius: 20px 20px 0px 0px;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #412F73;
        color: white;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: fixed;
    background-color: #412F73;
    z-index: 1;
          width: 133px;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
        background-color: #412F73;
        text-decoration: underline;
}

.dropdown:hover .dropdown-content {
    display: block;
}

li.dropdown:nth-child(3) > div:nth-child(2) {
        width: 95px;
}

.aligone {
    width: 100%;
    height: 100%;
    max-width: 940px;
}

.entry {
    background-color: #8ABC3A;
    border-radius: 0px 0px 20px 20px;
    padding-bottom: 10px;
    position: relative;
    bottom: 22px;
    max-width: 940px;
    margin: auto;
}

برچسب: نویسنده: آیلین رضوانی تاريخ: يکشنبه 12 آذر 1396 ساعت: 19:12

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه