小编Nik*_*iki的帖子

如何创建没有浮动的下拉导航栏?

如何在不使用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)

请帮我....

html css

2
推荐指数
1
解决办法
214
查看次数

减少css代码

我创建了两个具有相同属性的类,但只有一个属性(宽度)不同,那么如何减少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)

css

0
推荐指数
1
解决办法
33
查看次数

标签 统计

css ×2

html ×1