Question

我的布局有问题。这是顶部标题，我试图让两个下拉菜单坐在彼此旁边，但现在他们坐在彼此的顶部。我已经尝试过我认识的css无济于事。

CSS

#top_black{
margin-top:0px; 
width:100%;
background-color:#000;  
height:38px;
color:#fff;
font-size:13px;
}
ul#menu, ul#menu ul.sub-menu {
padding:0;/*position of menu*/
margin: 0;/*position of menu*/
font-family:"Adobe Caslon Pro"; 
font-size:13px;
}
ul#menu li, ul#menu ul.sub-menu li {
list-style-type: none;
display: inline-block;  
}
ul#menu li a{/*width level 1*/
width:100px;     
}
ul#menu li ul.sub-menu li a {
width:300px;    
}

ul#menu li a, ul#menu li ul.sub-menu li a {
text-decoration: none;
color: #fff;
background: #000;
padding-top: 10px;
padding-bottom: 10px;
padding-left:25px;
display:inline-block;
}

ul#menu li {
position: relative;     
}
ul#menu li ul.sub-menu {
display:none;
position: absolute;
top: 38px;/*position level 2*/
left: 0;/*position level 2*/
width: 100px;/*wierd width level 2*/
}
ul#menu li:hover ul.sub-menu {
display:block;
}

ul#menu2, ul#menu2 ul.sub-menu2 {
padding:0;/*position of menu*/
margin-top:-9px;/*position of menu*/
font-family:"Adobe Caslon Pro"; 
font-size:13px;
}
ul#menu2 li, ul#menu2 ul.sub-menu2 li {
list-style-type: none;
display: inline-block;  
}
ul#menu2 li a{/*width level 1*/
width:100px;    
}
ul#menu2 li ul.sub-menu2 li{
width:100px;    
}

ul#menu2 li a, ul#menu2 li ul.sub-menu2 li a {
text-decoration: none;
color: #fff;
background: #000;
padding-top: 10px;
padding-bottom: 10px;
padding-left:25px;
display:inline-block;
}

ul#menu2 li ul.sub-menu2 li{
text-decoration: none;
color: #fff;
background: #000;
padding-top: 10px;
padding-bottom: 10px;
padding-left:25px;
display:inline-block;
}

ul#menu2 li {
position: relative;     
}

ul#menu2 li ul.sub-menu2 {
display:none;
position: absolute;
top: 46px;/*position level 2*/
left: 5px;/*position level 2*/
width: 100px;/*wierd width level 2*/
 }
 ul#menu2 li:hover ul.sub-menu2 {
 display:block;
}

HTML

<div id="top_black">

<ul id="menu2">
    <li><a href="#">Contact Us</a>
        <ul class="sub-menu2">
            <li>
                Tel.845.564.7161
            </li>
              <li>
                Fax.845.564.7171
            </li>
            <li>
                311 Route 31 Newburgh NY, 12550
            </li>
        </ul>
    </li>
</ul>
<br />


<ul id="menu">
<li><a href="#">Jump to</a>

    <ul class="sub-menu">
        <li>
            <a href="#criminal">Town of Newburgh Court Criminal Cases</a>
        </li>
        <li>
            <a href="#smallclaims">Town of Newburgh Court Small Claims</a>
        </li>
        <li>
            <a href="#evictions">Town of Newburgh Court Evictions</a>
        </li>
        <li>
            <a href="#codeviolations">Town of Newburgh Court Code Violations</a>
        </li>
        <li>
            <a href="#judges">Town of Newburgh Court Judges</a>
        </li>
        <li>
            <a href="#rules">Town of Newburgh Court Rules </a>
        </li>
    </ul>
</li>
</ul>
</div><!---top_black--->

Answer 1

尝试添加：

ul#menu,
ul#menu2 {
    float:left;
    margin-top:0px;
    padding-top:0px;
}

演示彼此相邻的菜单：http://jsfiddle.net/w5G55/7/

布局使两个下拉列表彼此相邻

1 个答案: