我已经搜索但无法找到解决方案。
我有一个 CSS 水平菜单,导航菜单向左对齐,工具栏项向右对齐。浏览器窗口展开时看起来不错,但是当它缩小时,右侧工具栏与左侧的导航菜单项重叠。显然这是因为我已经正确定位了它,但我不确定如何解决这个问题。是否可以防止工具栏重叠,而是隐藏并产生水平滚动条?
请参阅我的 jsfiddle http://jsfiddle.net/e9etC/2/
HTML:
<div id="navcontainer">
<div id="menu">
<ul>
<li><a href="#">AAAAA</a></li>
<li><a href="#">BBBBB</a>
<ul>
<li><a href="#">xxxxx</a></li>
<li><a href="#">xxxx</a></li>
<li><a href="#">dddd</a></li>
<li><a class="menuparent" href="#">cccccc</a>
<ul>
<li><a href="#">1111</a></li>
<li><a href="#">2222</a></li>
<li><a href="#">333</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CCCCC</a>
<ul>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a class="menuparent" href="#">SubMenu</a>
<ul>
<li><a href="#">SubSubMenu</a></li>
<li><a href="#">SubSubMenu</a></li>
</ul>
</li>
<li><a href="#">SubMenu</a></li>
</ul>
</li>
<li><a href="#">DDDDD</a>
<ul>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
</ul>
</li>
<li><a href="#">EEEE</a>
<ul>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
<li><a href="#">SubMenu</a></li>
</ul>
</li>
<li><a href="#">GGGGG</a></li>
</ul>
</div>
<div id="toolbar">
<ul>
<li class="currentclient"><a title="Most recently selected client" href="#">1234567: John Doe</a></li>
<li>Client Search</li>
<li><input name="cpc" title="Search by client code, names, email address, phone numbers or CSN." id="cpc" style="width: 150px;" type="text"/></li>
<li><input name="btnCP" class="inputbutton" id="btnCP" type="button" value="Search"/></li>
</ul>
</div>
CSS:
html, body
{
padding: 0;
margin: 0;
}
body
{
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
background-color: #eaeaea;
}
#navcontainer
{
position: fixed;
top: 14px;
left: 0;
width:100%;
height: 28px;
background-color: #F5F5F5;
}
#navcontainer, #menu ul ul, #menu ul ul ul
{
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #808080;
border-bottom: 1px solid #808080;
}
#menu, #toolbar{
padding:0;
margin:0;
position: absolute;
}
#menu ul, #toolbar ul{
padding:0;
margin:0;
}
#menu li, #toolbar li{
position: relative;
list-style: none;
margin: 0;
padding:0;
white-space: nowrap;
}
#menu li a, #toolbar li a{
height: 28px;
display: block;
text-decoration:none;
line-height: 28px;
color: #000;
padding: 0 10px;
white-space: nowrap;
}
#menu ul ul li a, #menu ul ul ul li a
{
line-height: 20px;
height: 20px;
}
#menu li a:hover{
background-color: #A9A9A9;
color: #fff;
}
#menu ul ul, #menu ul ul ul {
position: absolute;
visibility: hidden;
}
#menu ul ul ul {
left: 100%;
top: 0;
margin-top: -1px;
}
#menu ul li:hover > ul, #menu ul ul li:hover ul{
visibility:visible;
}
#menu > ul > li > a {
text-align:center;
}
#menu > ul, #toolbar > ul {
white-space: nowrap;
}
#menu > ul > li {
display: inline-block;
float: none;
border-left: 1px solid #808080;
margin: 0 -3px 0 0;
}
#menu ul li:first-child
{
border-left: none;
}
#menu a.menuparent
{
background-image: url(greyarrow.gif);
background-position: right center;
background-repeat: no-repeat;
}
#toolbar
{
right: 3px;
}
#toolbar > ul > li
{
display: inline-block;
float: none;
}
#toolbar .currentclient a {
color: #1B70E0;
text-decoration: underline;
}
.inputbutton
{
border: solid 1px #8a9ab2;
padding: 5px;
padding-top: 0;
cursor: pointer;
height: 22px;
background-color: #c6d2e7;
color: #2a3341;
}