除非页面向下滚动,否则下拉列表不可见。我怎样才能解决这个问题?

时间:2014-08-30 17:16:25

标签: php html5 twitter-bootstrap drop-down-menu

http://www.levybusinesslaw.com/index.php

导航下拉列表仅在页面向下滚动时才有效。我已经尝试了一切让它可见,但似乎没有任何效果。任何关于如何解决这个问题的建议都非常感谢。谢谢。

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

<head>
    <meta charset="utf-8">
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- Title -->

    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

    <!-- Google Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

    <!-- Template -->
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js">
</script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<![endif]-->
</head >

    <!-- ==================================================================================================================================
HEADER
======================================================================================================================================= -->

    <section class="home-header">

        <!-- header -->
        <div class="header">
            <div class="container">
                <div class="row">
                    <div class="header-top">
                        <!-- logo -->
                        <div class="col-md-4 col-sm-4 col-xs-5">
                            <div class="logo">
                                <a href="index.html">
                                    <img src="images/logo.png" class="img-responsive" title="" alt="" />
                                </a>
                            </div>
                        </div>
                        <!-- .logo -->

                        <!-- quick contact -->
                        <div class="col-md-8 col-sm-8 col-xs-7">
                            <div class="quick-contact text-right">
                                <p class="phone">410.998.2001</p>
                                <p>Serving The State of Maryland</p>
                            </div>
                        </div>
                        <!-- .quick contact -->
                    </div>
                </div>
            </div>
        </div>
        <!-- .header -->

        <!-- intro content -->
        <div class="container">
            <div class="row">

                <!-- content -->
                <div class="col-md-12">
                    <div class="intro-content text-center">
                        <h2 class="white-text">
                            <strong>
                                <span class="rotate">NEIL LEVY</span>
                                <br />BUSINESS LAWYER<br>IN BALTIMORE, MD</strong>
                        </h2>
                        <a href="mailto:nlevy@lmcplaw.com?Subject=Inquiry" class="btn btn-default button-white">Contact Me
                              </a>
                    </div>
                </div>
                <!-- .content -->

            </div>
        </div>
        <!-- .intro content -->
            <!-- Popout Slider Menu -->
                <div class="container-popup">
                <div class="popup">
                    <div class="popup-overlay">
                        <a href="#" class="item-button play"><i class="play"></i></a>
                        <a href="#" class="item-button share share-btn"><i class="play"></i></a>
                    </div>
                    <div class="popup-content">
                        <div class="popup-top-content">
                            <div class="popup-top-content-inner">
                                <div class="popup-product">
                                    <div class="popup-top-title">
                                        <h6>How can I help you?</h6>

                                    </div>
                                </div>
                            </div>
                        </div> 
                        <div class="popup-add-content">
                            <div class="popup-add-content-inner">
                                <div class="section">
                                    <h6>Services</h6>
                                                                        <ul>
                                    <li><a href="http://levybusinesslaw.com/#practice" >Business</a></li>
                                                                        <li><a href="http://levybusinesslaw.com/#practice" >Estate Planning</a></li>
                                                                        <li><a href="http://levybusinesslaw.com/#practice/" >Real Estate</a></li>
                                                                        </ul>
                                </div> 
                                <div class="section">
                                    <a href="mailto:nlevy@lmcplaw.com?Subject=Inquiry" class="btn buy expand">Contact Me</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="popup-menu popout-menu">
                    <ul>
                        <li><a href="#" class="popout-menu-item"><i class="fa fa-facebook-square" style="font-size:3em"></i></a></li>
                        <li><a href="#" class="popout-menu-item"><i class="fa fa-linkedin-square" style="font-size:3em"></i></a></li> 
                    </ul>
                </div>
            </div>
        <script>
                        $("window").load(function() {
                  $("#body").removeClass("preload");
                });

        $(".share-btn").mouseenter(function() {
            setTimeout(function() {
            $(".item-menu").addClass("visible")
            }, 500);
        });
        $(".share-btn").mouseleave(function() {
            setTimeout(function() {
            $(".item-menu").removeClass("visible")
            }, 500);
        });
        $(".item-menu").hover(function() {
            $(".item-menu").addClass("visible")
        });
        $(".item-menu").mouseleave(function() {
            setTimeout(function() {
            $(".item-menu").removeClass("visible")
            }, 500);
        });
        $(".container-item").hover(function() {
            setTimeout(function() {
            $(".container-item").css("z-index","1000")
            }, 500);
        });
        </script>
         <!-- Popout Slider Menu -->

        <!-- navigation scrolled -->
        <div class="main-nav scrolled">
            <nav class="navbar navbar-default" role="navigation">
                <div class="container_toggle container">
                    <div class="navbar-header">
                        <button class="navbar-toggle button-white menu" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <i class="fa fa-bars"></i>
                        </button>

                        <!-- smaller logo -->
                        <a class="navbar-brand" href="#">
                            <img src="images/logo.png" class="img-responsive" title="" alt="" />
                        </a>
                        <!-- .smaller logo -->

                    </div>
                    <div class="collapse navbar-collapse" > 

                        <!-- main nav -->
                        <ul class="nav navbar-nav">

                 <li><a href="/index.php">HOME</a></li>

                            <li>
                                <a href="/index.php#about">ABOUT</a>

                            </li>

                            <li>
                                <a href="/index.php#community">COMMUNITY</a>
                            </li>                                   
                <li class="dropdown">
                <a href="http://levybusinesslaw.com/index.php#practice" class="dropdown-toggle" data-toggle="dropdown">PRACTICE AREAS <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Business</a></li>
                    <li><a href="#">Estate Planning</a></li>
                    <li><a href="#">Real Estate</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Other</a></li>
                </ul>
                </li>

                            <li>
                                <a href="/index.php#contact"> CONTACT </a>
                            </li>
                            <li>
                                <a href="http://www.levybusinesslaw.com/blog/"> BLOG </a>
                            </li>         
            </ul>

                        <!-- .main nav -->

                        <!-- quick contact -->
                        <ul class="nav navbar-nav navbar-right hidden-xs">
                            <li>
                                <div class="quick-contact">
                                    <p class="phone">410.998.2001</p>
                                </div>
                            </li>
                        </ul>
                        <!-- quick contact -->

                    </div>
                </div>
            </nav>
        </div>
        <!-- .navigation scrolled -->

    </section>

1 个答案:

答案 0 :(得分:1)

overflow:hidden;开始.home-header

由于dropdown-menuposition:absolute;,因此不会调整.home-header的大小,因此不会显示。