1The position of an absolutely positioned element is relative to the nearest positioned ancestor element, and if the element does not have a positioned ancestor element, then its position is relative to the original containing block.
element is set to, absolute, the original position will be occupied, set to relative the original position is reserved, at this time do not set left,top or STATUC effect. However, the internal absolute positioning can be a standard basis for the effect. Li width:100% relative to UL;
2 text wrapping and no line wrapping
Word-break:keep-all;white-space:nowrap is used in general, forcing no line break.
Word-wrap:break-word;word-break:break-all;white-space:normal; Line break
3 Table Style
<style> Classical_table1 { border-collapse:collapse; Border:none; /* This design 1px border to fine */ } Classical_table1 TD { word-wrap:break-word; & nbsp word-break:break-all; white-space:normal; &NB Sp } classical_table1_top { padding: 5px 10px; font-size:12px; font-family: verdana; font-weight:bold; &NBS P COLor: #fff; border-bottom-width:0; text- align:center; BORDER:1PX solid blue; } & nbsp Classical_table1_top td:not (: first-child) { & nbsp border-left:1px Solid yellow; } /* cont s Tyle */ Classical_table1_middle TD { padding:5px 10p x; font-size:12px; Font-family:verdana ; font-weight:bold; color: #000; BORDER:1PX solid gray; } . Classical_taBle1_bottom TD { background: #eee; font- Family: "Microsoft Yahei"; color: #7a7676; &NBS P line-height:20px; font-size:12px; Line -height:30px; BORDER:1PX solid gray; } </style>
4 triangle div CSS3
Taboo in the triangle's parent div using overflow, if you need a div inside the div can be nested inside the use of overflow
/* Put content div*/ .trianglediv_cont_div { padding:20px; overflow:auto; MAX-HEIGHT:300PX;&NBSP ; word-wrap:break-word; word-break:break-all; W hite-space:normal; } /* on */ & nbsp; /* Overall div*/ .trianglediv_up { Position:absol ute; border-radius:4px; border:1px Sol ID #545050; box-shadow:1px 1px 5px #d1d1d1; -WEBKIT-BOX-SHADOW:1PX 1px 5px gray; } . Trianglediv_up em { Position:absolute ; left: 10px; margin-top: -11px; width:0; Heigh t:0; border-right:10px solid transparent; border-left:10px Solid transparent; border-bottom:10px solid #1e242b; z-index:5; &N Bsp } trianglediv_up i { position:absolute; left:10px; margin-top: -10px; width:0; height:0; border-right:10px solid transparent; border-left:10px s Olid transparent; border-bottom:10px solid white; z-index:5; } /* down */ /* Overall div*/ Trianglediv_down { position:absolute; border-radius:4px; BORDER:1PX solid #545050; box-shadow:1px 1px 5px #d1d1d1; -webkit-box-shadow:1px 1px 5px gray; } Trianglediv_down em { position:absolute; left:10px; BOTTOM:0PX;&NB Sp Margin-bottom: -11px; width:0; HEIGHT:0;&NBSP ; border-right:10px solid transparent; border-left:10px solid transparent; border-top:10px solid #1e242b; z-index:5; } &N BSP: Trianglediv_down i { position:absolute; LEFT:10 px;   bottom:0px; Margin-bottom: -10px; width:0; &NB Sp height:0; border-right:10px solid transparent; Border-left: 10px solid transparent; border-top:10px solid white; Z-INDEX:5;&N Bsp } /* Left */ /* Overall div*/ .trianglediv_left { position:absolute; border-radius:4px; BORDER:1PX solid #545050; box-shadow:1px 1px 5px #d1d1d1; & nbsp -webkit-box-shadow:1px 1px 5px gray; } trianglediv_left em { position:absolute; top:10px; Margin-left:-11 px; width:0; height:0; border-top:10px solid tra nsparent; border-bottom:10px solid transparent; border-right:10px Solid #1e242b; z-index:5; } trianglediv_left i { position:absolute; top:10px; Margin-left:-1 0px; width:0; height:0; border-top:10p X solid transparent; border-bottom:10px solid transparent; BORDER-R ight:10px Solid white; z-index:5; } /* Left */ /* Overall div*/ .trianglediv_right { position:absolute; &nbs P   border-radius:4px; border:1px solid #545050; Box-sha dow:1px 1px 5px #d1d1d1; -webkit-box-shadow:1px 1px 5px gray; } . tr Ianglediv_right em { position:absolute; TOP:10PX;&NBS P right:0px; margin-right: -11px; WIDTH:0;&NBSP ; height:0; border-top:10px solid transparent; border-bottom:10px Solid transparent; border-left:10px solid #1e242b; &NB Sp z-index:5; } trianglediv_right i { Position:absolute; top:10px; right:0px; Margin-right:-10 px; width:0; height:0; border-top:10px Solid TR ansparent; border-bottom:10px solid transparent; border-left:10px Solid white; z-index:5; }
5, right-stretched UL style
.menu_righttype_ul ul { top:0; left:100%;} .menu_righttype_ul { width:200px; margin:0; padding:0; FONT-F Amily:segoe UI, arial; position:relative; list-style:none; box-shadow:0 1px 2px Rgba (0,0,0,0.5); } Menu_righttype_ul Li { DISPLAY:BLOCK;&NBS P width:100%; padding:0; font-size:14px; position:relative; box-sizing:border-box; -M oz-box-sizing:border-box; -webkit-box-sizing:border-box; } Menu_righttype_ul li:hover { }&NBSP;&N Bsp Menu_righttype_ul Li a { &NBSP width:100%; display:block; &NBS P padding:15px 20px 15px 19px; color: #fff6f6; & nbsp text-decoration:none; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -o-transition:all. 3s ease-in-out; -we Bkit-transition:all. 3s ease-in-out; -moz-transition:all. 3s ease-in-out; Transition:all. 3s ease-in-out; } . Menu _righttype_ul UL Li ul { top:1px; } Menu_righttype_ul ul,. Me Nu_righttype_ul ulLi ul { list-style:none; margin:0; Padd ing:0; /* display:none;*/ position:absolute; & nbsp z-index:999; width:100%; background: #171515; box-shadow:0 1px 3px rgba (0,0,0,0.3); }
Use
<ul class= "Menu_righttype_ul" > <li><a href= "javascript:void (0)" > Multi-level </a> <ul style= "Display:block;" ><li><a href= "javascript:void (0)" >111111111111111</a></li> <li><a>111111111111111 </a> <ul style= "Display:block;" ><li><a href= "javascript:void (0)" >522222222222</a></li> <li><a href= "javascript:void (0)" >3333333333 </a></li> </ul> </li& gt; </ul> </li> </ul >
# #常用效果css # #
