0

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

6 回答 6

2

jsFiddle 演示

将此代码添加到div.mydiv类中：

overflow: hidden;
于 2013-08-29T18:41:02.953 回答
1

你正在使用花车，它搞砸了一切！

更改liCSS 以display:inline-block;修复它。

更新了 jsFiddle

于 2013-08-29T18:42:40.880 回答
0

添加以下CSS

.menu {
        display: inline-block;
    }
于 2013-08-29T18:46:07.697 回答
0

添加overflow: hidden到菜单ul，因为您在其中使用浮动元素。

更新的小提琴

ul.menu {
    overflow: hidden;
}
于 2013-08-29T18:42:59.350 回答
0

因为您的<li>元素是向左浮动的，所以它们会从文档流中移除。
所以<ul>没有高度，不会扩大其容器的高度，并出现在其容器下方。

<ul>尝试在您的元素之后清除浮动，如下所示：

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

（还有其他清除浮动的方法，如此处其他答案所示——这只是一个示例。）

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

于 2013-08-29T18:43:17.770 回答
0

您需要对 div.myDiv 进行某种清除修复。有关所有信息，请参阅此内容：我可以使用哪些“clearfix”方法？

于 2013-08-29T18:43:18.330 回答