I'm trying to create a simple menu pop-up effect using anchors within a div and unordered lists.
I want the html to look something like this:
<div class="info">
Link |
<a onclick="menu('id1');">Another Link</a>
<ul id="id1" class="submenu">
<li>Stuff</li>
<li>Other</li>
<li>Hooray</li>
</ul>
</div>
Here is my javascript [pretty simple, not the problem, i don't think]:
function menu(id) {
var myLayer = document.getElementById(id);
if (myLayer.style.display == "none" || myLayer.style.display == "") {
myLayer.style.display = "block";
} else {
myLayer.style.display = "none";
}
}
The css is I believe where the problem is:
.info ul .submenu
{
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0;
clear: both;
z-index: 2;
display: none;
}
.info ul .submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.info .submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.info .submenu li a:hover
{
background: #0000ff;
}
I don't really know how to create the css on the ul so that if appears over the underlying text. I can't get it in the right spot.
I just want to click the <a> tag and a menu will pop up directly below the <a> tag.
I cleaned up your CSS:
.info ul.submenu
{
border: solid 1px #000;
border-top: none;
background-color: #fff;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0px 0px 0px;
z-index: 2;
display: none;
}
.info ul.submenu li
{
display: block;
border: none;
border-top: solid 1px #00ff00;
}
.info ul.submenu li a
{
display: block;
padding: 6px 0px 6px 4px;
color: #ff0000;
}
.info ul.submenu li a:hover
{
background: #0000ff;
}
Let me know if the problem is still there. Like I said earlier, I don't see "a"'s moving on show/hide.
EDIT: Ok. I'm much more stronger with jQuery as oppose to plain javascript. If you cannot use jQuery for whatever reason, I have to leave it up to you to perform the same with plain js. Sorry!
HTML:
<ul class="root">
<li>
<div class="menuHeader">Something 1</div>
<ul class="parent">
<li>asdf 1.1</li>
<li>asdf 1.2</li>
<li>asdf 1.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 2</div>
<ul class="parent">
<li>asdf 2.1</li>
<li>asdf 2.2</li>
<li>asdf 2.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 3</div>
<ul class="parent">
<li>asdf 3.1</li>
<li>asdf 3.2</li>
<li>asdf 3.3</li>
</ul>
</li>
</ul>
CSS:
.info ul.root > li
{
width: auto;
float: left;
border:solid 1px blue;
padding:5px;
}
.info ul.parent
{
padding:0px;
display:none;
}
.info .menuHeader
{
cursor:pointer;
}
.info li
{
list-style: none;
}
Javascript (utilizing jQuery):
$(document).ready(function() {
$('.menuHeader').click(function(event) {
$('.parent').hide();
$(this).siblings('.parent').show();
});
});
I included only the functional kind of stuff in the CSS. Obviously, you need different look, so you may play with colors on your own. Let me know if you have more questions.
Try:
ul .submenu ==> ul.submenu
in the css.
I have made a couple of changes to ur css -
i am directly refering to submenu class
.submenu
{
list-style: none;
display: none;
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
margin:0;
padding: 0 5px;
width: 150px;
clear: both;
z-index: 2;
}
.submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.submenu li a:hover
{
background: #0000ff;
}
Related
when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my code
html
{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
p
{ padding: 0 0 20px 0;
line-height: 1.7em;}
#menubar
{ width: 880px;
height: 46px;}
ul#menu
{ float: right;
margin: 0;}
ul#menu li
{ float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;}
ul#menu li a
{ font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;}
ul#menu li.selected a
{ height: 20px;
padding: 6px 35px 5px 28px;}
ul#menu li.selected
{ margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;}
ul#menu li.selected a, ul#menu li.selected a:hover
{ background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;}
ul#menu li a:hover
{ color: #E4EC04;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a,
ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.
Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>
Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.
<li>Items
</li>
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
see the ul is out side the Items li, put it inside and it will work like this.
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
You were putting a ul inside a ul directly.
The problem is not with your jQuery but with the HTML, you should wrap your dropdown menu (ul) with items (li)
function mainmenu() {
$(" #nav ul ").css({
display: "none"
});
$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function() {
mainmenu();
});
body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation">
<ul id="nav">
<li>Home
</li>
<li>Items
<ul>
<li>T-Shirt
</li>
<li>Pants
</li>
<li>Accessories
</li>
</ul>
</li>
<li>Shop
</li>
<li>About
</li>
</ul>
</div>
<div id="content_area">
</div>
<div id="sidebar">
</div>
<div id="footer">
<p>All rights reserved</p>
</div>
</div>
I am using JQuery to slide toggle a navigation bar when a div is pressed.
JQuery:
$(document).ready(function() {
$(".menu-toggle").click(function() {
$(".nav").slideToggle();
});
});
HTML:
<div class="menu-toggle">Toggle Menu</div>
<nav class="sidebar">
<ul>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
This works well on desktop, but when using a touch screen (i.e. smartphone) it acts up. When you press the .menu-toggle button, the .nav toggles up and down as expected. But when you scroll the page with your finger the .nav hides itself. It doesn't slide toggle back up, it just "disappears" and you have to press the .menu-toggle button again to display it again.
How can I go about fixing this so when a user scrolls down the page with a touch screen, the .nav doesn't hide itself automatically?
EDIT: Here's the actually code
HTML:
<div class="resized-menu">
Toggle Menu
</div>
<nav class="main-nav">
<div class="inner-wrapper">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Help</li>
</ul>
</div>
</nav>
JQuery:
$(document).ready(function() {
$(".resized-menu").click(function() {
$(".main-nav").slideToggle();
});
});
$(window).resize(function() {
//hide/show main navigation when window is resized
if($(window).width() >= 550) {
$(".main-nav").show();
$(".sidebar").show();
} else {
$(".main-nav").hide();
$(".sidebar").show();
}
});
Main CSS:
.resized-menu {
font-size: 3em;
background: #222;
color: #FFF;
cursor: pointer;
display: none;
padding: 3px 0px;
}
.main-nav {
height: 40px;
background: url("../img/main-nav-bg.png");
font-size: 12px;
border-top: 1px solid rgba(255,255,255,.3);
border-bottom: 1px solid rgba(255,255,255,.3);
display: block;
}
.main-nav ul {
margin: 0;
/*margin: 0 0 0 123px;*/
padding: 0;
border-left: 1px solid rgba(255,255,255,.3);
border-right: 1px solid rgba(0,0,0,.3);
}
.main-nav ul li {
list-style-type: none;
display: inline;
float: left;
width: 16.666%;
text-align: center;
}
.main-nav li a {
display: block;
color: #FFF;
text-decoration: none;
padding: 7px 15px; /*0px 15px*/
/*line-height: 40px;*/
height: 40px;
transition: .2s linear;
border-left: 1px solid rgba(0,0,0,.3);
border-right: 1px solid rgba(255,255,255,.3);
}
CSS with "only screen and (max-width:550px)":
.resized-menu {
display: block;
}
.main-nav {
height: 100%;
border-top: none;
border-bottom: none;
display: none;
}
.main-nav ul li {
width: 50%;
border: none;
}
.main-nav li a {
border-bottom: 1px solid rgba(0,0,0,.3);
border-top: 1px solid rgba(255,255,255,.3);
}
I've tried your code on an iPhone in Safari and Chrome and it is working fine.
I don't know what is causing this problem, may be it'll help if you post your entire code.
By the way the nav selector in jQuery should be $("nav").slideToggle() without the dot because you're selecting an element not a class.
I am trying to use slideToggle() function to create a submenu but it's not working. I saw some examples and it was on <div>s not <ul>s so it's only working with <div>s ? Here's my code on fiddle : Fiddle
I am inserting the <script> tags correctly in my HTML and my other jQuery codes run correctly.
You are missing jQuery library in your fiddle. Also there is a typo in your code, callback function should be function() not Function()
$(document).ready(function() {
$('.mainmenu').click(function() {
// ----^----- f should be small letter
$('.submenu').slideToggle('fast');
});
});
.mainmenu {
cursor: pointer;
color: #ffffff;
text-align: center;
display: block;
}
.mainmenu p {
font-size: 20px;
line-height: 10px;
}
.submenu {
list-style-type: none;
padding: 0;
text-align: center;
border: 2px solid black;
border-top: 0;
border-radius: 0 0 10px 10px;
background-color: #464646;
width: 90%;
margin: 0 auto;
margin-bottom: 5px;
display: none;
}
.submenu li {
border-bottom: 2px solid white;
}
.submenu li:last-child,
.submenu li:last-child a:last-child {
border-bottom: 0;
border-radius: 0 0 10px 10px;
}
.submenu a:hover {
background-color: aliceblue;
color: #000000;
}
#sidebar {
background-color: white;
float: right;
}
#sidebar>ul {
list-style-type: none;
margin: 0;
padding: 20px;
}
#sidebar>ul >li {
position: relative;
width: 21em;
background-color: #1a8891;
border: 2px solid #0c383a;
margin-bottom: 5px;
border-radius: 20px;
}
#sidebar a:link,
#sidebar a:visited {
display: block;
position: relative;
width: 100%;
text-align: center;
line-height: 50px;
font-size: 20px;
color: white;
text-decoration: none;
}
#sidebar li:hover {
background-color: #156b72;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar">
<ul>
<li class="mainmenu">
<div class="arrow-up"></div>
<p>Text</p>
</li>
<ul class="submenu">
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
<li>Text
</li>
</ul>
</div>;
The problem I encounter is that I want the nav to expand when I click on a button, but what it now does is that it looks like it kinda float above the rest. Or that it is another div that is created underneath it.
For a clearer understanding of what is happening I would recommend that you run the snippet, because it is hard for me to explain what really happens.
This problem is only relative for the mobile menu.
I also use the bootstrap css, but that onlt effects <div class="container">.
The things I already tried to fix the problem are:
Removed the bootstrap css
Changed the <nav> to a div element
Changed all the positions to relative
Changed somethings about the float
So this are the most important parts of the code I use.
/*JS for the hide/show of the menu*/
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu").slideToggle(400, function() {
$(this).toggleClass("nav-expanded").css('display', '');
});
});
});
/*JS for the dropdown in the menu*/
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").slideToggle()).hide();
});
});
body{
background-color: white;
}
.container{
background-color: #919191;
box-shadow: 0px 0px 2px black;
}
nav {
background: #7D7D7D;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 40px;
margin: 2px 10px;
}
nav ul, li, a {
margin: 0;
padding: 0;
}
nav a, a:link, a:visited, a:hover{
text-decoration: none;
color: white;
display: block;
}
ul > li {
list-style: none;
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
nav ul li a:hover{
border-radius: 4px;
background: #666666;
display: block;
}
nav ul li ul {
background: #333333;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
display: none;
position: absolute;
z-index:100;
}
nav ul li ul li {
float: none;
line-height: 40px;
width: 150px;
}
.menu-trigger{
display: none;
}
.burger{
background-color: white;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin: 5px auto;
}
#media screen and (max-width: 760px){
.menu-trigger{
display: block;
background-color: #BFBFBF;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
height: 35px;
padding: 5px 5px;
margin: 3px 10px;
width: 40px;
}
.nav-expanded{
display: block;
}
nav ul{
display: none;
background: #7D7D7D;
border-radius: 0 0 4px 4px;
}
nav ul li{
float: none;
padding: 0;
}
nav ul li:first-child{
margin-top: 5px;
}
nav ul li ul {
background: #7D7D7D;
box-shadow: none;
display: none;
position: relative;
z-index:0;
}
nav ul li ul li {
line-height: 35px;
width: 100%;
}
}
.active{
border-radius: 4px;
background-color: #404040;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<nav>
<button class="menu-trigger">
<span class="burger"></span>
<span class="burger"></span>
<span class="burger"></span>
</button>
<ul class="menu">
<li class="active">Link
</li>
<li>Link 2
</li>
<li class="dropdown-trigger">Dropdown<span class="caret"></span>
<ul>
<li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Link 3
</ul>
</nav>
</header>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Thanks in advance for your help.
And if there are somethings unclear please ask and maybe I can make a clearer. Also if there is something wrong with the post I would like to hear it.
Check the DEMO here
You had a fixed height for "nav" that was 40px with border radius 4px, which was making it not to expand and look like a separate element in itself even though the expanded list was inside it.
What you need to do is to give it an auto height, so that it has the height equal to the height of all the child elements together.
Check the demo, let me know if you wanted this only.