*nav的隐藏显示

HTML:

            <div class="nav-center">
                <ul>
                    <li><a href="###">AAA</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                    <li><a href="###">BBB</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                    <li><a href="###">CCC</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                    <li><a href="###">DDD</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                    <li class="end_li"><a href="###">EEE</a>
                    <div class="nav_son">
                          <ul class="ul_son">
                              <li><a href="###">111</a></li>
                              <li><a href="###">222</a></li>
                              <li><a href="###">333</a></li>
                              <li><a href="###">444</a></li>
                              <li><a href="###">555</a></li>
                          </ul>
                      </div>
                    </li>
                </ul>
            </div>

CSS:

*{
    margin:0;
    padding:0;
}

.nav-center{
    margin-top: 30px;
    margin-left: 250px;
}
.nav-center ul{

    list-style-type:none;/*清除项目符号*/
}
.nav-center ul li{
    text-align: center;/*文字居中对齐*/
    width: 115px;/*宽度*/
    height: 17px;/*高度*/
    border-right:1px solid #d8d8d8;/*右边框*/
    float: left;/*左浮动*/
    line-height: 17px;/*行高*/
    position: relative;/*相对定位*/
}
.nav-center ul li a{
    text-decoration: none;/*清除下划线*/
    font-size: 14px;/*字体样式*/
    color: #646464;/*字体颜色*/
}
.nav-center ul li a:hover{
    color:#0b7bc9;
}
.nav-center ul li a:hover + .nav_son > .ul_son{
  visibility: visible;/*关键的一步  visibility属性规定元素是否可见,可选值:visible可见,默认; hidden不可见; collapse这个我知道如何详细说明,但它的特点是不占位,和display:none占位不同。*/
   left: -100px;/*触发后向左平移100px*/
}
.nav-center .end_li{
   border:none; /*清除边框*/
}

.nav-center .nav_son .ul_son{
    transition-duration:0.5s;/*过渡所需时间*/
    visibility: hidden;/*元素不可见*/
    margin:0;
    width: 400px;
    height: 20px;
    background:blue;/*背景颜色*/
    border-radius: 15px;/*圆角*/
    position: absolute;/*绝对定位*/
    left:0px;
    top:20px;
}
.nav-center .nav_son .ul_son:hover{
   visibility: visible;/*元素可见*/
   left: -100px;/*这里与上面(.nav-center ul li a:hover + .nav_son > .ul_son)对应,目的是控制元素的位置*/
}
.nav-center .nav_son .ul_son li{
    width: 70px;
    height: 20px;
    line-height: 20px;
    border: none;
    float: left;
    margin-left:8px;
}
 .nav-center .nav_son .ul_son li a{
    color:white;
    text-align:center;
}
.nav-center .nav_son .ul_son li a:hover{
    color:red;
}

效果见下期、、、

时间: 2024-10-13 17:40:31

*nav的隐藏显示的相关文章

【锋利的JQuery-学习笔记】输入框提示语-隐藏/显示

html <div class="search"> <input type="text" id="inputSearch" class="" value="请输入商品名称"/> </div> css: #inputSearch { border: 1px solid #BABEBF; color: #999999; font-size: 14px; height: 17p

jquery实现的点击页面其他地方隐藏显示的元素

jquery实现的点击页面其他地方隐藏显示的元素:在实际应用中,可能有这样的效果,那就是有这样一个弹出层,点击层本身的时候,这个层不会隐藏,而点击除去层之外的页面其他地方则会将这个层隐藏,下面就通过代码实例介绍一下如何实现此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="

基于特定值来推断隐藏显示元素的jQuery插件

jQuery-Visibly是一款小巧简单的jQuery隐藏显示元素插件.该插件依据某个元素的值,例如以下拉框的值.输入框的值等来推断是否显示某个指定的元素. 用于推断的值能够是单个值,或者是多个值,也能够是正則表達式,很灵活. 在线演示:http://www.htmleaf.com/Demo/201503111503.html 下载地址:http://www.htmleaf.com/jQuery/Layout-Interface/201503111502.html

Android 仿QQ浏览器WebView,滑动隐藏显示ActionBar效果

Android 仿QQ浏览器,滑动隐藏显示ActionBar效果. 往上推,是一个ScrollView会将,actionbar以及内容往上推,当actionbar消失后,将滚动Webview的内容. 此效果是基于QuickReturnHeader源码,修改而来的,代码也不多,实现方法比较简单. 直接上demo:http://download.csdn.net/detail/xufeifandj/8388493 直接看效果图:

.Net常用技巧_隐藏/显示DataGridView的行/等待框(转)

//當主表選擇行更改後,顯示相應的採購資料 private void dgvMain_SelectionChanged(object sender, EventArgs e) { if (this.dgvMain.SelectedRows.Count > 0 && this.dgvItem.DataSource != null && this.dgvItem.Rows.Count > 0) { string fMaterielCode = this.dgvMai

jQuery 学习02——效果:隐藏/显示、淡入淡出、滑动、动画、停止动画、Callback、链

jQuery 效果- 隐藏hide()和显示show() 语法: $(selector).hide(speed,callback);$(selector).show(speed,callback); (可选)speed  参数:规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. (可选)callback 参数:是隐藏或显示完成后所执行的函数名称. 例1:使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: <scrip

angularjs2 ng2 密码隐藏显示

代码结合ionic2开发移动端项目,注册页的密码的input一般用password, 但是用户输入密码时可能会输入错误,需要显示成text. 如图: 首先,输入框的类型判断: 1 <ion-input type="{{pwshow?'text':'password'}}" placeholder="输入密码"></ion-input> 然后,添加眼睛的点击事件,ngClass判断图标样式: 1 <a href="javascr

JQuery效果隐藏/显示

hide() 方法 语法 $(selector).hide(speed,callback) show() 方法 语法 $(selector).show(speed,callback) 参数 描述 speed 可选.规定元素从可见到隐藏的速度.默认为 "0". 可能的值: 毫秒 (比如 1500) "slow" "normal" "fast" 在设置速度的情况下,元素从可见到隐藏的过程中,会逐渐地改变其高度.宽度.外边距.内边距

关于元素隐藏/显示的各种方法

元素的隐藏/显示可以说数使用频率最高的方法之一,比如二级菜单,响应式布局,透明过度等等许许多多的特效都会使用到,以下介绍一下元素隐藏的各属性以及他们的特性和使用方法:display  visibility  opacity  overflow  position 我们先设置一些共有属性: <head> <style> div{ width: 100px; height: 100px; background-color: #444; margin: 10px; color: #f00