完全css彈出菜單_易賢網(wǎng)

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)頁(yè)制作

完全css彈出菜單

來(lái)源：易賢網(wǎng) 閱讀：1040 次日期：2016-06-27 10:51:05

溫馨提示：易賢網(wǎng)小編為您整理了“完全css彈出菜單”,方便廣大網(wǎng)友查閱！

<!doctype html public -//w3c//dtd xhtml 1.0 transitional//en >

<head>

/* common styling */

.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:50px 0;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#710069; line-height:20px; font-size:11px; overflow:hidden;}

.menu ul {padding:0; margin:0;list-style-type: none; }

.menu ul li {float:left; margin-right:1px; position:relative;}

.menu ul li ul {display: none;}

/* specific to non ie browsers */

.menu ul li:hover a {color:#fff; background:#36f;}

.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}

.menu ul li:hover ul li a.hide {background:#6a3; color:#fff;}

.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}

.menu ul li:hover ul li ul {display: none;}

.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}

.menu ul li:hover ul li a:hover {background:#6fc; color:#000;}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}

.menu ul li:hover ul li:hover ul.left {left:-105px;}

</style>

<!--[if lte ie 6]>

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}

.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}

.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}

.menu ul li a:hover ul li a.sub {background:#6a3; color:#fff;}

.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}

.menu ul li a:hover ul li a ul {visibility:hidden;}

.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}

.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}

.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

</style>

<![endif]-->

</head>

<body>

<ul>

<li><a class=hide href=../menu/index.html>demos</a>

<!--[if lte ie 6]>

<a href=../menu/index.html>demos

<![endif]-->

<ul>

<li><a href=../menu/zero_dollars.html title=the zero dollar ads page>zero dollars</a></li>

<li><a href=../menu/embed.html title=wrapping text around images>wrapping text</a></li>

<li><a href=../menu/form.html title=styling forms>styled form</a></li>

<li><a href=../menu/nodots.html title=removing active/focus borders>active focus</a></li>

<li><a class=hide href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click ></a>

<!--[if lte ie 6]>

<a class=sub href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click >

<![endif]-->

<ul>

<li><a href=../menu/form.html title=styling forms>styled form</a></li>

<li><a href=../menu/nodots.html title=removing active/focus borders>active focus</a></li>

<li><a href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a href=../menu/shadow_boxing.html title=multi-position drop shadow>shadow boxing</a></li>

<li><a href=../menu/old_master.html title=image map for detailed information>image map</a></li>

<li><a href=../menu/bodies.html title=fun with background images>fun backgrounds</a></li>

<li><a href=../menu/fade_scroll.html title=fade-out scrolling>fade scrolling</a></li>

<li><a href=../menu/em_images.html title=em size images compared>em sized images</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class=hide href=index.html>menus</a>

<!--[if lte ie 6]>

<a href=index.html>menus

<![endif]-->

<ul>

<li><a href=spies.html title=a coded list of spies>spies menu</a></li>

<li><a href=vertical.html title=a horizontal vertical menu>vertical menu</a></li>

<li><a href=expand.html title=an enlarging unordered list>enlarging list</a></li>

<li><a href=enlarge.html title=an unordered list with link images>link images</a></li>

<li><a href=cross.html title=non-rectangular links>non-rectangular</a></li>

<li><a href=jigsaw.html title=jigsaw links>jigsaw links</a></li>

<li><a href=circles.html title=circular links>circular links</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class=hide href=../layouts/index.html>layouts</a>

<!--[if lte ie 6]>

<a href=../layouts/index.html>layouts

<![endif]-->

<ul>

<li><a href=../layouts/bodyfix.html title=cross browser fixed layout>fixed 1</a></li>

<li><a href=../layouts/body2.html title=cross browser fixed layout>fixed 2</a></li>

<li><a href=../layouts/body4.html title=cross browser fixed layout>fixed 3</a></li>

<li><a href=../layouts/body5.html title=cross browser fixed layout>fixed 4</a></li>

<li><a href=../layouts/minimum.html title=a simple minimum width layout>minimum width</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class=hide href=../boxes/index.html>boxes</a>

<!--[if lte ie 6]>

<a href=../boxes/index.html>boxes

<![endif]-->

<ul>

<li><a href=spies.html title=a coded list of spies>spies menu</a></li>

<li><a href=vertical.html title=a horizontal vertical menu>vertical menu</a></li>

<li><a href=expand.html title=an enlarging unordered list>enlarging list</a></li>

<li><a href=enlarge.html title=an unordered list with link images>link images</a></li>

<li><a href=cross.html title=non-rectangular links>non-rectangular</a></li>

<li><a href=jigsaw.html title=jigsaw links>jigsaw links</a></li>

<li><a href=circles.html title=circular links>circular links</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class=hide href=../mozilla/index.html>mozilla</a>

<!--[if lte ie 6]>

<a href=../mozilla/index.html>mozilla

<![endif]-->

<ul>

<li><a href=../mozilla/cascade.html title=a cascading menu>cascading menu</a></li>

<li><a href=../mozilla/content.html title=using content:>content:</a></li>

<li><a href=../mozilla/moxbox.html title=:hover applied to a div>mozzie box</a></li>

<li><a href=../mozilla/rainbow.html title=i can build a rainbow>rainbow box</a></li>

<li><a href=../mozilla/snooker.html title=snooker cue>snooker cue</a></li>

<li><a href=../mozilla/target.html title=target practise>target practise</a></li>

<li><a href=../mozilla/splittext.html title=two tone headings>two tone headings</a></li>

<li><a href=../mozilla/shadow_text.html title=shadow text>shadow text</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class=hide href=../ie/index.html>explorer</a>

<!--[if lte ie 6]>

<a href=../ie/index.html>explorer

<![endif]-->

<ul>

<li><a href=../ie/exampleone.html title=example one>example one</a></li>

<li><a href=../ie/weft.html title=weft fonts>weft fonts</a></li>

<li><a href=../ie/exampletwo.html title=vertical align>vertical align</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

<li><a class=hide href=../opacity/index.html>opacity</a>

<!--[if lte ie 6]>

<a href=../opacity/index.html>opacity

<![endif]-->

<ul>

<li><a href=../opacity/colours.html title=colour wheel>opaque colours</a></li>

<li><a href=../opacity/picturemenu.html title=a menu using opacity>opaque menu</a></li>

<li><a href=../opacity/png.html title=partial opacity>partial opacity</a></li>

<li><a href=../opacity/png2.html title=partial opacity ii>partial opacity ii</a></li>

<!--[if lte ie 6]>

<a class=sub href=../menu/hover_click.html title=hover/click with no active/focus borders>< hover/click

<![endif]-->

<li><a href=../menu/form.html title=styling forms>styled form</a></li>

<li><a href=../menu/nodots.html title=removing active/focus borders>active focus</a></li>

<li><a href=../menu/hover_click.html title=hover/click with no active/focus borders>hover/click</a></li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

<!--[if lte ie 6]>

</td></tr></table>

</a>

<![endif]-->

</li>

</ul>

</div>

</body>

</html>

更多信息請(qǐng)查看網(wǎng)頁(yè)制作

上一篇：css代碼格式化清理工具

下一篇：css/js 加載順序

易賢網(wǎng)手機(jī)網(wǎng)站地址：完全css彈出菜單

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請(qǐng)考生以權(quán)威部門(mén)公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)頁(yè)制作

使用CSS制作立體導(dǎo)航欄10月30日

用純CSS3實(shí)現(xiàn)網(wǎng)頁(yè)中常見(jiàn)的小箭頭10月30日

有關(guān)HTML5中背景音樂(lè)的自動(dòng)播放功能10月30日

HTML5、Select下拉框右邊加圖標(biāo)的實(shí)現(xiàn)代碼(增進(jìn)用戶體驗(yàn))10月30日

html5實(shí)現(xiàn)圖片轉(zhuǎn)圈的動(dòng)畫(huà)效果——讓頁(yè)面動(dòng)起來(lái)10月30日

html5清空畫(huà)布方法(三種)10月30日

HTML實(shí)現(xiàn)移動(dòng)端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務(wù)器10月30日

Dreamweaver怎么設(shè)計(jì)彩色邊框的表格?10月30日

Dreamweaver怎么給個(gè)人簡(jiǎn)歷添加照片并排版?10月30日

基于HTML5的WebGL實(shí)現(xiàn)json和echarts圖表展現(xiàn)在同一個(gè)界面10月30日

解決HTML5手機(jī)端頁(yè)面縮放的問(wèn)題10月30日

利用純CSS實(shí)現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁(yè)排版09月29日

HTML5+CSS3 實(shí)現(xiàn)靈動(dòng)的動(dòng)畫(huà) TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動(dòng)畫(huà)技巧與細(xì)節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動(dòng)網(wǎng)站

2026國(guó)考·省考課程試聽(tīng)報(bào)名

報(bào)班類型
姓名
手機(jī)號(hào)
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合