用div+css实现简单下拉菜单效果_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

用div+css实现简单下拉菜单效果_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:28 PM

实现自定义下拉菜单，看下面吧，CSS都已经注释。

在风格管理里面添加下面的CSS，直接把下面 CSS代码复制到风格最底部即可:

css代码：/*下拉菜单样式*/

*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;} /*定义总体宽度、高度；background:003399; 控制背景颜色,居中对齐*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px;}         /*控制一级菜单行高；上边距5px；*/
#nav a { display: block; width: 77px; text-align:center; font-size:12px;} /*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/
#nav a:link { color:#FFF; text-decoration:none;margin:0;}     /* 未访问的链接 */
#nav a:visited {color:#FFF;text-decoration:none;margin:0;}    /* 已访问的颜色 */
#nav a:hover {color:#C00;text-decoration:none;}                /* 鼠标在链接上 */

#nav li {float: left;}                   /* 一级菜左对齐 */
#nav li a:hover{background:#FFFFFF;}     /* 鼠标在一级菜单上改变其背景色 */
#nav li ul {line-height: 24px; background:#FFF; list-style-type: none;text-align:left;left: -999em; width:132px; position: absolute;border-width: 1px;border-top-style: none;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-color: #003399; padding:1px;}             /*二级菜单总体样式：行高24px；背景颜色；外框宽度；相对位置；边框一个象素，上边没样式，左右下边实线，边框颜色#003399；内边距1个象素*/

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}                 /* 二级菜单链接样式；背景宽度、左对齐，左缩进2 */
#nav li ul a:link {color:#0d5097; text-decoration:none;}                                   /* 未访问的链接 */
#nav li ul a:visited {color:#0d5097;text-decoration:none;}                                 /* 已访问的链接 */
#nav li ul a:hover {color:#FFF;text-decoration:none;font-weight:normal;background:#003399;}/* 鼠标在链接上 */

#nav li:hover ul {left: auto;}
#nav li.sfhover ul {left: auto;}
#content {clear: left;}

把下面代码插入模板里面，你想要显示的地方：

DIV代码：

上面的连接地址自己进行修改了。

实现的效果如下：

效果图

是不是很简单呢！

在补充一句，如果要在IE上面整个居中，就要在模板最顶部加上下面的代码，我在 Firefox 可以不加，但在IE上就要加哦：

补充代码

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。