我的下拉菜单和子菜单未在浏览器中正确放置

Question

我创建了一个名为NetWeight的asp.net应用程序，我的下拉菜单及其子菜单放置不正确，其中一些正确放置，而其他人则互相放在一起。

我创造了一个小提琴，请帮助我：

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

正如您所看到的，如果您将鼠标悬停在MasterData标签上，所有菜单都整齐有序，但旁边的标签，产品重量数据表打印一个项目并打印所有项目＆＃39; s子菜单彼此重合我甚至无法在没有块相互打断的情况下覆盖这些项目。

这是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 -- */

（如果这是唯一的答案，我不会感到惊讶：P我喜欢调试代码！）