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

Question

My dropdown menu is being limited by the size of the navbar, how can I make it go over it and show the dropdown menu all the way?

--HTML-- this is the html showing the navbar and also the menu(included with 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-- here are the css codes for navbar, menu and submenu

.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-- this is the js code for toggling the submenu on and off

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

Answer 1

Try changing .navbar to overflow: visible;

If I understand your question correctly, this should work.

Answer 2

You have an extra "< /a > " in your code before3 the "CLIENTS" link that is throwing off the code a bit. But besides that add an overflow property for your navbar class that should take care of problem.

 $('.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> 

Hope this helps.