Question

我的下拉菜单受到导航栏大小的限制，如何让它完成并显示下拉菜单？

- HTML--这是显示导航栏和菜单（包含在php中）的html

<div class="navbar">
            <img src="imagens/HDlogo.png" class="logo" />

            <?php include("menu.php"); ?>
        </div>

<ul class="menu">
                <li><a href="index.php">HOME</a></li>
                <li><a href="about.php">ABOUT US</a></li>
                <li class="solutions">SOLUTIONS

                    <ul class="submenu">
                        <li><a href="webdesign.php">Webdesign</a></li>
                        <li><a href="graphic.php">Graphic</a></li>
                        <li><a href="seo.php">SEO</a></li>
                        <li><a href="maintenance.php">Maintenance</a></li>
                    </ul>

                </li></a>
                <li><a href="clients.php">CLIENTS</a></li>
                <li><a href="contact.php">CONTATO</a></li>
            </ul>

- CSS--这里是导航栏，菜单和子菜单的css代码

.navbar{

width:100%;
padding:15px 0px 15px 0px;
overflow: hidden;
background-image:url(../../imagens/backgroundTop.png);
color:#FFF;
position:fixed;
top:0;
left:0;
z-index:2;
}

.menu{
float:right;
padding:10px 0px 0px 0px;
/*height:40px;*/
margin-right:200px;
/*line-height:40px;*/
position:relative;

}

.menu li{
float:left;
font-family:Raleway;

font-size:17px;
margin-left:37px;
}

.submenu{
position:absolute;
z-index:10;
display:none;
width:100px;
height:200px;
}

.submenu li{
color:#FFF;
text-align:left;
}

- JS--这是用于打开和关闭子菜单的js代码

$('.solutions').click(function(){
$('.submenu').toggle(200);
});

Answer 1

尝试将.navbar更改为overflow: visible;

如果我理解你的问题，这应该有用。

Answer 2

你有额外的＆＃34;＆lt; / a＆gt; ＆＃34;在你的代码之前的＆＃34; CLIENTS＆＃34;链接丢掉了一些代码。但除此之外，为你的navbar类添加一个溢出属性，应该解决问题。

＆＃13;

$('.solutions').click(function() {
  $('.submenu').toggle(200);
});

＆＃13;

.navbar {
  width: 100%;
  padding: 15px 0px 15px 0px;
  overflow: hidden;
  background: #999;
  color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  /*z-index:2;*/
  overflow: visible;
}
.menu {
  float: right;
  padding: 10px 0px 0px 0px;
  /*height:40px;*/
  margin-right: 200px;
  /*line-height:40px;*/
  position: relative;
  display: inline-block;
  list-style: none;
}
.menu li {
  float: left;
  font-family: Raleway;
  font-size: 17px;
  margin-left: 37px;
}
.submenu {
  position: absolute;
  z-index: 10;
  display: none;
  width: 100px;
  height: 200px;
}
.submenu li {
  color: #FFF;
  text-align: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="navbar">
  <!--<img src="imagens/HDlogo.png" class="logo" />
    <?php include( "menu.php"); ?>-->
  <ul class="menu">
    <li><a href="index.php">HOME</a>

    </li>
    <li><a href="about.php">ABOUT US</a>

    </li>
    <li class="solutions">SOLUTIONS
      <ul class="submenu">
        <li><a href="webdesign.php">Webdesign</a>

        </li>
        <li><a href="graphic.php">Graphic</a>

        </li>
        <li><a href="seo.php">SEO</a>

        </li>
        <li><a href="maintenance.php">Maintenance</a>

        </li>
      </ul>
    </li>

    <li><a href="clients.php">CLIENTS</a>

    </li>
    <li><a href="contact.php">CONTATO</a>

    </li>
  </ul>
</div>

＆＃13;

希望这有帮助。

下拉菜单不会显示在导航栏上

2 个答案: