Use div css to achieve simple drop-down menu effect_html/css_WEB-ITnose

Implement a custom drop-down menu, see below, the CSS has been commented.

Add the following CSS in style management, and copy the following CSS code directly to the bottom of the style:

css code: /* drop-down menu style*/

*{margin:0;padding:0;border:0;}
#div_center { width:790px; height:23px; background:#003399; margin-left: auto;margin-right:auto;} /*Definition Overall width, height; background:003399; Control background color, center alignment*/
#nav { line-height: 20px; list-style-type: none; margin-top:5px;} ; /*Control the first-level menu Line height; top margin 5px; */
#nav a { display: block; width: 77px; text-align:center; font-size:12px;} /* Overall style of first-level menu links: each menu's Width, center-aligned, text size*/
#nav a:link { color:#FFF; text-decoration:none;margin:0;} /* Unvisited link*/
#nav a:visited {color:#FFF;text-decoration:none;margin:0;} /* Visited color*/
#nav a:hover {color:#C00;text-decoration:none;} /* The mouse is on On the link*/

#nav li {float: left;} /* The first level menu is left aligned*/
#nav li a:hover{background:#FFFFFF;} /* The mouse is at the first level Change its background color on the menu*/
#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;}                                                                                                                                                                                   /* The overall style of the secondary menu: line height 24px; background color; outer frame width; relative position; one pixel border, no style on the top, solid lines on the left and right bottom, border color #003399; 1 padding Pixel*/

#nav li ul a{display:block; width: 130px;text-align:left;padding-left:2px;}      /* Secondary menu link style; background width, left alignment , left indent 2 */
#nav li ul a:link {color:#0d5097; text-decoration:none;}                                                                                                                                                           ; 003399;}/* Mouse over link*/

#nav li:hover ul {left: auto;}

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

#content { clear: left;}

Insert the following code into the template where you want it to appear:

DIV code:

function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i sfEls[i].onmouseover=function() {
this.className =(this.className.length>0? " ": "") "sfhover";
}
sfEls[i ].onMouseDown=function() {
This.className =(this.className.length>0? " ": "") "sfhover";
}
sfEls[i].onMouseUp=function( ) {
this.className =(this.className.length>0? " ": "") "sfhover";
}
sfEls[i].onmouseout=function() {
this .className=this.className.replace(new RegExp("( ?|^)sfhover\b"),
"");
                                                                                                                 menuFix;
//-->

• Homepage


• News Center
  
  
  
  • ·News Center
  
  < ;LI>·News Center


• ·News Center

Company Profile

• ·Company Profile


• ·Company Profile


• ·Company Profile


• ·Corporate Style


• ·Company Profile


• ·Company Profile

Article Center

• ·Article Center


• ·Article Center
  
• ·Article Center

·Article Center

·Article Center

International News

• ·International News


• ·International News< ;/A>


• ·International News
> ;

• ·International News


• ·International News


• ·International News


• ·International News


• ·International News

Picture Center

• ·Picture Center


• ·Picture Center


• ·Picture Center

Download Center

• ·Commonly used software


• ·Document Download

Message Center

Community Forum

The above link address has been modified by myself.

The effect achieved is as follows:

Rendering

Isn’t it very simple!

To add, if you want to center the whole thing on IE, you need to add the following code at the top of the template. I don’t need to add it on Firefox, but I need to add it on IE:

Supplementary code