如何在不使用float的情况下创建下拉导航栏?我尝试了但是我的答案有点远,我的代码如下##
HTML
<div id="nav">
<ul>
<li><a href="#Animals">Animals</a></li>
<li><a href="#birdes">Birds</a></li>
<li><a href="#vegetables">Vegetables</a>
<ul>
<li><a href="#">Okra</a></li>
<li><a href="#">Runner Beans</a></li>
<li><a href="#">Pumkin</a></li>
</ul>
</li>
<li><a href="#fruits">Fruits</a>
<ul>
<li><a href="#">Apple</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Orange</a></li>
<li><a href="#">Lemom</a></li>
</ul>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
CSS
#nav{width:100%;}
#nav ul{list-style-type:none; margin:0; padding:0; background-color:#9900CC;}
#nav ul li{display:inline;}
#nav ul li a{color:#ffffff; text-decoration:none; display:inline-block; padding:15px; font-weight:700;}
#nav ul li a:hover{background-color:#5F6975;}
#nav ul ul{position:absolute; background:#5F6975; display:none;}
#nav ul li:hover > ul{display:block;}
#nav li ul li{display:block;}
Run Code Online (Sandbox Code Playgroud)
请帮我....
我创建了两个具有相同属性的类,但只有一个属性(宽度)不同,那么如何减少css代码?
.login-box button{
width: 100%;
height: 40px;
background-color: #ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
.add-category-box button{
width: 48%;
height: 40px;
background-color:#ffd133;
color: #ffffff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
border: 1px solid #ffd133;
border-radius: 5px;
cursor: pointer;
}
Run Code Online (Sandbox Code Playgroud)