下拉菜单获胜'不要出现在导航栏上

Dropdown menu won't show over the navbar

本文关键字：导航 获胜 下拉菜单      更新时间：2023-09-26

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

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

<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);
});

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

如果我正确理解你的问题，这应该行得通。

在3"CLIENTS"链接之前，您的代码中有一个额外的"</a>"，这会稍微偏离代码。但除此之外，为导航栏类添加一个溢出属性，应该可以解决这个问题。

$('.solutions').click(function() {
  $('.submenu').toggle(200);
});
.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;
}
<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>

希望这能有所帮助。

相关文章：