无法让导航菜单在div内呈现

我不能为我的生活获取此导航菜单以便在div内坐我需要它在div中，以便我可以调整菜单的背景以匹配我的网站在这里是菜单和div的jsfiddle。任何帮助将不胜感激！无法让导航菜单在div内呈现

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

来源

2013-08-29 user1720275

你有没有试过清除浮动？ –

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

尝试清除浮动你<ul>元素后是这样的：

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

（有other methods of clearing floats，在这里其他的答案看到的 - 这只是一个例子。）

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

来源

2013-08-29 18:43:17 showdev

jsFiddle Demo

这个代码添加到div.mydiv类：

overflow: hidden;

来源

2013-08-29 18:41:02 Itay

更新的小提琴，因为链接的不包含此解决方案：http://jsfiddle.net/gWxp8/9/ – showdev

@showdev谢谢。可能忘了自己更新它... – Itay

您使用花车，这一切的螺丝钉！

更改li CSS到display:inline-block;修复它。

updated jsFiddle

来源

2013-08-29 18:42:40 PlantTheIdea

这完美的工作！我现在遇到的唯一问题是菜单项出现在页面内容后面，你会不会知道如何解决这个问题？ – user1720275

添加overflow: hidden到菜单ul因为你使用它里面浮动元素。

Updated fiddle

ul.menu { 
    overflow: hidden; 
}

来源

2013-08-29 18:42:59

你需要在div.myDiv上使用某种clearfix。所有的信息请参阅本：What methods of ‘clearfix’ can I use?

来源

2013-08-29 18:43:18 andi

添加以下CSS

.menu { 
     display: inline-block; 
    }

来源

2013-08-29 18:46:07

无法让导航菜单在div内呈现

回答

相关问题