与子菜单有趣的重叠

时间：2013-12-11 15:31:03

标签： css css3 html-lists

我需要你的帮助，

我似乎无法确定我的CSS样式代码中为何该框看起来重叠。我该如何解决这个问题？将菜单带到前面。

enter image description here 

<!--            Start of top menu                   -->
<link rel="stylesheet" href="topmenu_files/mbcsmbtopmenu.css" type="text/css" />

<ul id="mbtopmenuebul_table" class="mbtopmenuebul_menulist css_menu">
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>File</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Save</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Print</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Close</a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Edit</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Add new</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Delete</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Clear all</a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>View</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">Next ></a></li>
  <li class="gradient_menuitem gradient23"><a title="">< Prev</a></li>
  <li class="gradient_menuitem gradient23"><a title=""><< First</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Last >></a></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Actions</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Export</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23"><a title="">Excel</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">HTML</a></li>
    </ul></li>
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">Reports</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23"><a title="">Metrics</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">Item</a></li>
    </ul></li>
  <li class="gradient_menuitem gradient23"><a class="with_arrow" title="">E-mail</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23 last_item"><a class="with_arrow" title="">Send</a>
      <ul class="gradient_menu gradient83">
      <li class="gradient_menuitem gradient23"><a title="">Notification</a></li>
      <li class="gradient_menuitem gradient23 last_item"><a title="">Reminder</a></li>
      </ul></li>
    </ul></li>
  <li class="gradient_menuitem gradient23 last_item"><a class="with_arrow" title="">Create</a>
    <ul class="gradient_menu gradient83">
    <li class="gradient_menuitem gradient23"><a title="">Coverpage</a></li>
    <li class="gradient_menuitem gradient23 last_item"><a title="">Approval sheet</a></li>
    </ul></li>
  </ul></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient20"><a>Help</a></div>
  <ul class="gradient_menu gradient83">
  <li class="gradient_menuitem gradient23"><a title="">About IMTS</a></li>
  <li class="gradient_menuitem gradient23"><a title="">Contact support</a></li>
  <li class="gradient_menuitem gradient23 last_item"><a title="">Quick Reference</a></li>
  </ul></li>
  <li class="topitem"><div class="buttonbg gradient_button gradient83" style="width: 39px;height: 19px;"><a class="button_6">Logoff</a></div></li>
</ul>
<!--            End  of top menu                    -->

CSS STYLE SHEET：

#mbtopmenuebul_table {
    margin: 0px;
    padding: 0px;
    line-height: 0px;
    font-size: 0px;
    width: 100%;
    height: 20px;
    display: inline-block;
}

#mbtopmenuebul_table li a {
  line-height: 15px;
  font-size: 12px;
  font-family: Arial,sans-serif;
  text-decoration: none;
  color: #333333;
  font-style: normal;
  font-weight: normal;
  padding: 2px;
  display: block;
  cursor: pointer;
  white-space: nowrap;
}

#mbtopmenuebul_table li div.buttonbg {
  height: 18px;
  width: 58px;
  line-height: 0;
  background-color: transparent;
  border-style: solid;
  border-color: transparent;
  border-width: 1px;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}

#mbtopmenuebul_table li:hover div.buttonbg a, #mbtopmenuebul_table li.expanded a.topitem, #mbtopmenuebul_table li.active a.topitem,
#mbtopmenuebul_table li.itemhot a.topitem, #mbtopmenuebul_table li a:hover {
  color: #333333;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}


#mbtopmenuebul_table li.expanded div.buttonbg, #mbtopmenuebul_table li.active div.buttonbg, #mbtopmenuebul_table li.itemhot div.buttonbg, #mbtopmenuebul_table li:hover div.buttonbg {
  border-color: #7DA2CE;
}

#mbtopmenuebul_table {
  padding: 4px;
  border-style: solid;
  border-color: #B0B5BB;
  border-width: 1px;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  border-collapse: separate;
  background-image: url('wrapper_bg.png');
  background-repeat: repeat-x;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%);
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%);
  background: linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%);
}

#mbtopmenuebul_table ul li a {
  color: #333333;
  font-family: Arial,sans-serif;
  font-size: 12px;
  line-height: 15px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  display: block;
  vertical-align: middle;
  white-space: nowrap;
}

#mbtopmenuebul_table ul li:hover > a {
  color: #000000;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#mbtopmenuebul_table ul li.subexpanded a.subexpanded, #mbtopmenuebul_table ul li.subitemhot a.subitemhot, #mbtopmenuebul_table ul li a:hover {
  color: #000000;
  font-family: Arial,sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

#mbtopmenuebul_table ul li:hover, #mbtopmenuebul_table ul li.subexpanded, #mbtopmenuebul_table ul li.subitemhot {
  border-color: #7DA2CE;
  background-color: transparent;
}

#mbtopmenuebul_table ul {
  margin: 0;
  border-style: solid;
  border-color: #B2B7BD;
  border-width: 1px;
  padding: 3px;
  background: transparent;
  font-size: 0;
}

#mbtopmenuebul_table ul li a {
  padding: 3px 11px 3px 9px;
  text-align: left;
}

#mbtopmenuebul_table ul li.separator {
  padding: 3px;
  cursor: default;
  background: none;
  box-shadow: none;
  border-width: 0;
}

#mbtopmenuebul_table ul li.separator div {
  border-top: 1px solid #D6D9DC;
  border-bottom: 1px solid #FFFFFF;
  font-size: 0px;
}

#mbtopmenuebul_table ul li {
  border-style: solid;
  border-width: 1px;
  height: auto;
  width: auto;
  text-align: left;
  line-height: 0;
  font-size: 0;
  cursor: pointer;
  float: none;
  margin: 0 0 3px 0;
  padding: 0;
  border-color: transparent;
}

#mbtopmenuebul_table ul li.last_item {
  margin-bottom: 0;
}


#mbtopmenuebul_table .spaced_li {
  margin: 0px 10px 0px 0px;
}

#mbtopmenuebul_table a img {
  border: none;
}

#mbtopmenuebul_table li {
  list-style: none;
  float: left;
}

#mbtopmenuebul_table.css_menu li {
  position: relative;
}

#mbtopmenuebul_table.css_menu ul li:hover > ul {
  opacity: 1;
}

#mbtopmenuebul_table.css_menu li:hover > ul {
  top: 100%;
  left: 0;
  right: auto;
  opacity: 1;
}

#mbtopmenuebul_table.css_menu ul li:hover > ul {
  top: -1px;
  left: 100%;
  right: auto;
}

#mbtopmenuebul_table ul {
  position: absolute;
  top:-99999px;
  z-index: 4000;
}

#mbtopmenuebul_table ul ul {
  position: absolute;
  z-index: 5000;
}

#mbtopmenuebul_table .submenu_arrow {
  margin-left: 8px;
}

#mbtopmenuebul_table li:hover div.gradient20, #mbtopmenuebul_table li.expanded div.gradient20, #mbtopmenuebul_table li.active div.gradient20, #mbtopmenuebul_table li.itemhot div.gradient20 { 
  background-image: url('buttonhot_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #BFDAFC; 
} 

#mbtopmenuebul_table li:hover div.gradient_button, #mbtopmenuebul_table li.expanded div.gradient_button, #mbtopmenuebul_table li.active div.gradient_button, #mbtopmenuebul_table li.itemhot div.gradient_button { 
  background: linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
} 

#mbtopmenuebul_table ul.gradient83 { 
  background-image: url('menu_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #F0F5FB; 
} 

#mbtopmenuebul_table ul.gradient57 { 
  background-image: url('menu_bg1.png'); 
  background-repeat: repeat-x; 
  background-color: #F0F5FB; 
} 

#mbtopmenuebul_table ul.gradient_menu { 
  background: linear-gradient(top, #FFFFFF 0%, #F0F5FB 100%); 
} 

#mbtopmenuebul_table ul li.gradient23:hover, #mbtopmenuebul_table ul li.gradient23.subexpanded, #mbtopmenuebul_table ul li.gradient23.subitemhot { 
  background-image: url('menuitemhot_bg.png'); 
  background-repeat: repeat-x; 
  background-color: #BFDAFC; 
} 

#mbtopmenuebul_table ul li.gradient_menuitem:hover, #mbtopmenuebul_table ul li.gradient_menuitem.subexpanded, #mbtopmenuebul_table ul li.gradient_menuitem.subitemhot { 
  background: linear-gradient(top, #EDF4FE 0%, #BFDAFC 100%); 
}

2 个答案:

答案 0 :(得分：0)

将所有内容复制到jsfiddle并截取屏幕截图：http://i.imgur.com/YNOYnLH.png

你看到的是什么浏览器似乎在那里运作良好，

我建议的另一件事可能是在UL上设置背景颜色吗？

答案 1 :(得分：0)

在CSS中添加'margin：0 0 0 4px;'到'#mbtopmenuebul_table ul'

margin: 0 0 0 4px;

在这里摆弄：http://jsfiddle.net/moonspace/6sLBa/

相关问题
最新问题