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

Question

我创建了一个名为 NetWeight 的 asp.net 应用程序，我的下拉菜单及其子菜单没有正确放置，其中一些放置正确，而另一些则相互并入。

我的情况有点乱，请帮帮我:

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

如您所见，如果您将鼠标悬停在 MasterData 选项卡上，所有菜单都井井有条，但旁边的选项卡，产品重量数据表打印一个元素和打印所有元素的子菜单彼此重合我什至无法结束在元素上没有 block 相互干扰。

这是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 件，左 + 中(重复)+ 右。

演示: 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 我喜欢调试代码!)