無法讓導航菜單在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內呈現

回答

相關問題