當前位置:編程學習大全網 - 網站源碼 - 求CSS大神網頁導航條鼠標經過後有背景有下拉菜單 效果如圖

求CSS大神網頁導航條鼠標經過後有背景有下拉菜單 效果如圖

這個其實很簡單啊,用hover就行。

下面是例子:

css代碼

<style?type="text/css">

body{background:#566;}

ul{margin-left:?0;padding-left:?0}

li{

display:inline-block;

color:?#fff;

font-size:?20px;

line-height:?30px;

font-weight:?bold;

text-align:?center;

}

.menuitem{

float:?left;

width:?120px;

list-style:?none;

}

.submenuitem{

display:?none;

float:?none;

margin-left:?0;

list-style:?none;

border:?dotted?#e00;

border-width:?0?0?2px?0;

}

.menuitem:hover{

background-color:#b00;

}

.menuitem:hover?.submenuitem{

display:?block;

background-color:#b00;

}

</style>

HTML代碼

<ul>

<li?class="menuitem">首頁</li>

<li?class="menuitem">

學校概況

<ul>

<li?class="submenuitem">學校簡介</li>

<li?class="submenuitem">現任領導</li>

<li?class="submenuitem">信息公開</li>

</ul>

</li>

<li?class="menuitem">機構設置</li>

</ul>

效果大概其就是妳想要的那種,不用js,鼠標經過時自動出現

  • 上一篇:帝國cms,有壹套源碼在數據恢復之後提示賬號不能同時登陸或者被封禁,就壹直進不去了
  • 下一篇:海天味業在哪裏上市?
  • copyright 2024編程學習大全網