0

我知道这里有类似的问题。我花了几个小时摆弄和 jsfiddling，但似乎无法将这些问题转化为我的问题。当#call 有这么多不同的规则时，我感到困惑。#nav li ul li ul liii XD

我有一个水平导航栏。有些项目有下拉菜单，有些则没有。我希望子菜单项保持一致。如果你看一下我的 JSfiddle，“合作伙伴”部分，文本会换行。我希望它向右溢出，它不必与父下拉菜单保持相同的宽度。

JS 小提琴：http: //jsfiddle.net/Peege151/hvgA9/1/

这是我的代码 HTML 

<div id="navbar">
            <ul id="nav">
                <li> Home </li>
                <li>Services 
                    <ul>
                        <li> Full Suite of Services </li>                  
                    </ul>
                </li>   
                <li> <a href="case_studies/index"> Case Studies</a> 
                    <ul>    
                        <li><a href="case_studies/1"> Thing1</a> </li>
                        <li><a href="case_studies/2">Thing2 </a> </li>
                        <li><a href="case_studies/3"> Thing3 </a></li>
                    </ul>
                </li>
                <li>Partners 
                    <ul>
                        <li> Dude Middle Name Dood </li>
                        <li> Dude Middle Name Daaad </li>
                    </ul>
                </li>
                <li>Contact Us</li>
            </ul>
        </div>`

这是我的 CSS

#navbar {
float:right;
margin-right: 10%;
width:50%;
background-color:blue;
text-align: right;
}
    #navbar ul{ 
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
box-shadow: 0px 0px 9px rgba(0,0,0,0.95);
padding: 0 10px;
border-radius: 10px;  
list-style: none;
position: relative;
display: inline-table;
  }
#navbar ul li {
position:relative;

显示：内联块

 }
 #navbar ul ul{
display:none; 
position:absolute;
top:1em;
left:0
}
#navbar ul > li:hover ul {
display:inline-table;
margin:0;
}
#navbar ul li:hover {
    background: #4b545f;
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}

#navbar li {
display: inline-block;
margin: 10px;

谢谢！

4

0 回答 0