CODEWITHSUNDEEP
jquerycsshtml
user1720275
user1720275

Reputation: 57

Can not get the navigation menu to render inside of a div

I can not for the life of me get this navigation menu to sit within a div I need it in a div so that I can style the background of the menu to match my site here is a jsfiddle of the menu and div. Any help would be greatly appreciated!

http://jsfiddle.net/gWxp8/4/

iv.mydiv
{
    background-color:#CE04E3;
}
.menu, .menu ul {
     margin: 0;
     padding: 0;
     position: relative;
     line-height: 2.5em;
 }
 .menu a {
     text-decoration: none;
 }
 .menu > li {
     margin-left: 15px;
 }
 .menu > li:first {
 margin-left:0px!important;
 }
 .menu > li > a {
     padding: 0px 10px;
     margin: 0;
 width: 100%;
 text-decoration: none;
 color: #838383;
 font-weight: bold;
 }
   div.box {
     position: absolute;
     z-index: -1;
     background-color: #75CDD2;
     left: 0;
     top: 0;
     border-radius: 4px 4px 0px 0px;
     -moz-border-radius: 4px 4px 0px 0px;
     -webkit-border-radius: 4px 4px 0px 0px;
 }
 li.pull-down {
     padding-right:6px;
 }
 li.pull-down > a {
     background-image: url('../images/darrow.png');
     background-position: 96% 75%;
     background-repeat: no-repeat;
     padding-right: 20px;
 }
 li.right-menu > a {
     background-image: url('../images/rarrow.png');
     background-position: 97% 45%;
     background-repeat: no-repeat;
 }
 .menu a.selected {
     background-color: #75CDD2;
     border-radius: 0px 4px 4px 4px;
     -moz-border-radius: 0px 4px 4px 4px;
     -webkit-border-radius: 0px 4px 4px 4px;
 }
 .menu li {
     float: left;
     position: relative;
 }
 .menu ul {
     position: absolute;
     display: none;
     width: 200px;
     top: 2.5em;
     /*padding-right: 10px;*/
     background-color: #75CDD2;
     /*-moz-opacity: .50;     filter: alpha(opacity=50);     opacity: .50;*/
 border-radius: 0px 4px 4px 4px;
 -moz-border-radius: 0px 4px 4px 4px;
 -webkit-border-radius: 0px 4px 4px 4px;
 }
 .menu li ul a {
     width: 180px;
     height: auto;
     float: left;
     color: #FFFEFD;
     padding: 0 10px;
 }
 .menu li ul li {
 padding: 0;
 margin: 0;
 }
 .menu ul ul {
 top: auto;
 }
 .menu li ul ul {
 left: 198px;
     /*margin: 0px 0 0 10px;*/
 }
 .menu-item-selected > a {
 background-color: #FFFEFD;
     -moz-opacity: .50;
     filter: alpha(opacity=50);
     opacity: .50;
 }
 .menu-item-selected > a:hover {
     color: #257E84 !important;
 }

Upvotes: 0

Views: 70

Answers (6)

Itay
Itay

Reputation: 16777

jsFiddle Demo

Add this code to the div.mydiv class:

overflow: hidden;

Upvotes: 2

showdev
showdev

Reputation: 29168

Because your <li> elements are floated left, they are removed from the document flow.
So the <ul> has no height, doesn't expand its container's height, and appears below its container.

Try clearing the floats after your <ul> element like this:

<div style="clear:both;"></div>

(There are other methods of clearing floats, as seen in other answers here -- this is just an example.)

http://jsfiddle.net/gWxp8/8/

Upvotes: 0

Shahzad Fateh Ali
Shahzad Fateh Ali

Reputation: 724

Add following CSS

.menu {
        display: inline-block;
    }

Upvotes: 0

andi
andi

Reputation: 6522

You need some sort of clearfix on div.myDiv. See this for all the info: What methods of ‘clearfix’ can I use?

Upvotes: 0

Hieu Le
Hieu Le

Reputation: 8415

Add the overflow: hidden to the menu ul because you are using floating elements inside it.

Updated fiddle

ul.menu {
    overflow: hidden;
}

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

You're using floats, which screw with everything!

Changing the li CSS to display:inline-block; fixes it.

updated jsFiddle

Upvotes: 1

Related Questions