滑块阻止导航下拉菜单

时间:2019-06-16 14:01:15

标签: css drop-down-menu overflow z-index flexslider

我有一个CSS模板。滑块正常工作正常,但是我在滑块中添加了来自sql的图像,现在滑块阻止了下拉菜单。

无法正常运行z-index和溢出

CSS

.fh5co-nav ul li.has-dropdown {
  position: relative;
}
.fh5co-nav ul li.has-dropdown .dropdown {
  width: 150px;
  -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  z-index: 1002;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
  background: #000;
  padding: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}

HTML

    <nav class="fh5co-nav" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-md-3 col-md-pull-3 col-xs-2">
                    <div id="fh5co-logo"><a href="{{ url('home') }}">{{ setting[0].title }}</a></div>
                </div>
                <div class="col-md-4 col-xs-5 text-center menu-1">
                    <ul>
                        {% for cat in cats %}
                            {{ cat|raw }}
                        {% endfor %}
                        <li><a href="{{ url('about') }}">HAKKIMIZDA</a></li>
                        <li><a href="{{ url('contact') }}">İLETİŞİM</a></li>
                    </ul>
                </div>
``

0 个答案:

没有答案