我的下拉菜單和子菜單沒有正確放置在瀏覽器中

Question

我創建了一個名爲NetWeight的asp.net應用程序，我的下拉菜單和子菜單放置不正確，其中一些放置正確，其他人共同在一起。

我已創建我的情況小提琴請幫我：

http://jsfiddle.net/debatechamp/nv93vahq/

，你可以看到，如果你將鼠標懸停在MasterData標籤的所有菜單的井然有序，但標籤旁邊，產品重量數據表打印一個項目並打印所有項目的子菜單彼此重合，我甚至無法在沒有塊互相打斷的情況下重疊項目。

這裏是CSS

/* DropDown Styling */ 
.menu ul li:hover ul li a {background-image: none; display:block;height: 28px; line-height: 26px; color:#381B01; width:142px; text-align:left; margin: 0; padding:0 0 0 11px;font-weight:normal;} 
.menu ul li:hover ul { 
    margin: 0 0 0 3px; 
    padding: 0; 
    background-image:url('http://i.imgur.com/cAxTTkk.png'); 
    background-repeat:no-repeat; 
    background-position:bottom left; 
} 

/* DropDown Menus ":active" or "Selected" Styling */ 
.menu ul li:hover ul .sub_active { 
    background-image:url('http://i.imgur.com/Npx66xl.png'); 
    margin-right: 1px; 
} 

/* DropDown Menus ":hover" Styling */ 
.menu ul li:hover ul li a:hover {color:#381B01 !important; background-image:url('http://i.imgur.com/TwDd5GH.png');} 

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;} 
.menu ul li:hover ul li:hover ul.left {left:-105px;} 

.wrap{ 
position:relative; 
top:32px; 
left:-10px; 
float:left; 
width:1647px; 
height:829px; 
background:#3A1C01 url('images/presentation/caramel-cream.png') no-repeat center 120px; 
border:3px solid #f0f0f0; 
padding-left:10px; 
    margin-right: 0px; 
    padding-right: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
} 
.dropdown-submenu { 
    position: absolute; 
    margin-left: 10px; 
    display:block 


} 

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    display:none; 
    margin-top: -1px; 
    border-left-color:#fff; 
    margin-left: 10px; 



} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: green; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: 180px; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 

} 

的HTML代碼

<ul> 
        <li class="dropdown-menu"> 
        <a tabindex = "-1" >Print One Item</a> 
        <ul class = "dropdown-submenu"> 
        <li><a tabindex = "-1" href = "PrintOneBag.aspx" >Bag</a></li> 
        <li><a tabindex = "-1" href = "PrintOneBar.aspx">Bar</a></li> 
         <li><a tabindex = "-1" href = "PrintOneSapal.aspx">Sapal</a></li> 
         <li><a tabindex = "-1" href = "PrintOneHandPack.aspx">Hand Pack</a></li> 
        </ul> 
        </li> 
        <li class="dropdown-menu"> 
        <a tabindex = "-1">Print All Items</a> 
        <ul class = "dropdown-submenu"> 
        <li><a tabindex = "-1" href = "AllBag.aspx">Bag</a></li> 
        <li><a tabindex = "-1" href = "AllBar.aspx">Bar</a></li> 
         <li><a tabindex = "-1" href = "PrintAllSapal.aspx">Sapal</a></li> 
         <li><a tabindex = "-1" href = "PrintAllHandPack.aspx">Hand Pack</a></li> 
        </ul> 

感謝提前任何幫助，你的幫助是非常讚賞，因爲我並不擅長的CSS/HTML

Answer 1

在CSS中有很多更新，我不能列出所有的變化我做了。我相信這是我能做的最好的。顯然這個背景圖片不夠長http://i.imgur.com/UhmOQBN.png你必須做一個新的。如果你想使它變得靈活，你需要3件，​​左+中（重複）+右。

DEMO：http://jsfiddle.net/nv93vahq/5/

body { 
    height: 40px; 
    clear: both; 
    width: 100%; 
    margin: 0; 
    margin-left: 20px; 
    background-image: url('http://i.imgur.com/zh97eNW.jpg'); 
} 

.pickit { 
    font-family: verdana, arial, sans-serif; 
    font-size: 15px; 
    font-weight: normal; 
    color: #D8BC91; 
    margin: 1px 8px 0 0; 
    clear: none; 
    position: relative; 
    float: left; 
} 
/* --- Navbar Style --- */ 
#nav { 
    width: 1000px; 
    height: 36px; 
    float: left; 
    background: transparent; 
    margin: 24px 0 0 0; 
    z-index: 1; 
} 
/* -- Brown Menu -- */ 
.menu { 
    font-family: "Trebuchet MS", Arial, san-serif; 
    width: 997px; 
    height: 33px; 
    position: relative; 
    font-size: 11px; 
    margin: 0; 
    z-index: 1000; 
    top: -1px; 
    left: 1px; 
} 

.menu ul li a { 
    display: block; 
    text-decoration: none; 
    color: #EBE0D5; 
    font-weight: bold; 
    width: 181px; 
    height: 42px; 
    text-align: center; 
    border-bottom: 0; 
    background-image: url('images/brown/center.png'); 
    line-height: 48px; 
    font-size: 11px; 
    overflow: hidden; 
    padding-left: 1px; 
} 
/* End Caps Styling */ 
.menu .left_nosub { 
    background-image: url('images/brown/left.png'); 
    padding-left: 1px; 
    margin-right: -1px; 
} 

.menu .right_hassub { 
    background-image: url('images/brown/right.png'); 
} 

.menu .right_nosub { 
    background-image: url('images/brown/right.png'); 
} 

.menu ul { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    width: 1100px; 
} 

.menu ul li { 
    float: left; 
    position: relative; 
    top: 13px; 
    left: 3px; 
    height: 32px; 
    width: 179px; 
    margin-top: 0px; 
} 

.menu ul li ul { 
    display: none; 
} 

.menu ul li ul li { 
    display: block; 
    float: none; 
    white-space: nowrap; 
    width: auto; 
    height: auto; 
    padding: 0; 
    background-color: #D2C6AC; 
} 

.menu ul li ul li:first-child { 
    padding-top: 10px; 
} 

.menu ul li ul li:last-child { 
    border-bottom-left-radius: 5px; 
    border-bottom-right-radius: 5px; 
    padding-bottom: 10px; 
} 
/* Button ":hover" Styling */ 
.menu ul li:hover a { 
    color: #381B01; 
    background: url('http://i.imgur.com/UhmOQBN.png') center top no-repeat; 
} 

.menu ul li:hover ul { 
    display: block; 
    position: absolute; 
    top: 29px; 
    left: 0; 
    width: 152px; 
    margin: 0; 
    padding: 0; 
} 

.menu ul li:hover ul li a.center_hassub { 
    background: #6a3; 
    color: #EBE0D5; 
} 

.menu ul li:hover ul li:hover a.center_hassub { 
    background: #6fc; 
    color: #381B01; 
} 

.menu ul li:hover ul li ul { 
    display: none; 
} 

.menu ul li:hover .left_nosub { 
    color: #381B01; 
    background: url('http://i.imgur.com/qr5mzZU.png'); 
} 

.menu ul li:hover .right_hassub { 
    color: #381B01; 
    background: url('http://i.imgur.com/BdV64of.png'); 
} 

.menu ul li:hover .right_nosub { 
    color: #381B01; 
    background: url('http://i.imgur.com/0vEO0KC.png'); 
} 
/* DropDown Styling */ 
.menu ul li:hover ul li a { 
    background-image: none; 
    display: block; 
    height: 28px; 
    line-height: 26px; 
    color: #381B01; 
    width: 126px; 
    text-align: left; 
    margin: 0; 
    padding: 0; 
    font-weight: normal; 
    padding: 0 13px; 
} 

.menu ul li:hover ul { 
    margin: 0 0 0 10px; 
    padding: 0 0 15px; 
    width: 152px; 
} 
/* DropDown Menus ":active" or "Selected" Styling */ 
.menu ul li:hover ul .sub_active { 
    background-image: url('http://i.imgur.com/Npx66xl.png'); 
    margin-right: 1px; 
} 
/* DropDown Menus ":hover" Styling */ 
.menu ul li:hover ul li a:hover { 
    color: #381B01 !important; 
    background-image: url('http://i.imgur.com/TwDd5GH.png'); 
} 

.menu ul li:hover ul li:hover ul { 
    display: block; 
    position: absolute; 
    left: 139px; 
    top: 0; 
    z-index: 2; 
} 

.menu ul li:hover ul li:hover ul.left { 
    left: -105px; 
} 

.wrap { 
    position: relative; 
    top: 32px; 
    left: -10px; 
    float: left; 
    width: 1647px; 
    height: 829px; 
    background: #3A1C01 url('images/presentation/caramel-cream.png') no-repeat center 120px; 
    border: 3px solid #f0f0f0; 
    padding-left: 10px; 
    margin-right: 0px; 
    padding-right: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
} 

.dropdown-submenu { 
    position: absolute; 
    margin-left: 10px; 
    display: block; 
} 

.dropdown-menu .sub-menu { 
    left: 100%; 
    position: absolute; 
    top: 0; 
    display: none; 
    margin-top: -1px; 
    border-left-color: #fff; 
    margin-left: 10px; 
} 

.dropdown-submenu:hover>.dropdown-menu { 
    display: block; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: green; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #ccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #fff; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: 180px; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
} 
/* -- End Brown Menu -- */ 

（我不會感到驚訝，如果這是唯一的答案：PI愛調試代碼）