1) Portrait navigation menu
<styletype= "Text/css" >
body {font-family:verdana;font-size:12px; line-height:1.5;}
A {color: #000; text-decoration:none;}
a:hover {color: #F00;}
#menu {width:100px; border:1px solid #CCC;}
#menu ul {list-style:none;margin:0px; padding:0px;}
#menu ul li {background: #eee; padding:0px 8px; height:26px; line-height:26px;
border-bottom:1px solid #CCC; }
</style>
<body>
<divid= "Menu" >
<ul>
<li><ahref= "@#" > Home </a></li>
<li><ahref= "#" > Page layout layout </a></li>
</ul>
</div>
</body>
Default style refers to the default style of the UL tag, the original point, loading the picture with a border, and so on, remove the default style method:
Ul{list-style:none;}
Img{border-style=none;}
CSS derivation selectors: helps save a lot of class definitions. #menu ul and #menu ul Li are derived selectors, only the UL with the ID menu is valid, and the attribute can be inherited by the ID of Li under menu.
2) Level two pop-up menu
When the mouse on the first level menu, pop up the corresponding level two menu, remove the mouse and automatically disappear.
<style type= "Text/css" >
body {font-family:verdana;font-size:12px; line-height:1.5;}
img {border-style:none;}
A {color: #000; text-decoration:none;}
a:hover {color: #F00;}
#menu {width:100px; border:1px solid #CCC; border-bottom:none;}
#menu ul {list-style:none;margin:0px; padding:0px;}
#menu ul li {background: #eee; padding:0px 8px; height:26px; line-height:26px;
border-bottom:1px solid #CCC;p osition:relative; }
#menu ul Li ul {display:none;position:absolute; left:100px; top:0px; width:100px;
border:1px solid #ccc; border-bottom:none; }
#menu UL li.current ul {display:block;}
#menu UL Li:hover ul {display:block;}
</style>
<div id= "Menu" >
<ul>
<li><ahref= "#" > Home </a></li>
<li><ahref= "#" > Video Tutorials </a>
<ul>
<li><ahref= "#" > Tools </a></li>
<li><ahref= "#" > Bookmarks </a></li>
</ul>
</li>
<li><ahref= "#" > Information download </a>
<ul>
<li><ahref= "#" > Hospital </a></li>
<li><ahref= "#" > School </a></li>
</ul>
</li>
</ul>
</div>
#menu UL Li:hover ul {display:block;} Represents a level two menu that is displayed when the mouse is placed on a level menu. Display property None indicates that the element is hidden;
Position the positional property, the value relative indicates that if an element is positioned relative to it, first it will appear where it is, and then move horizontally or vertically relative to the original starting point. The element still occupies the original space, whether or not it is moved, the value absolute represents absolute positioning, is calculated based on the upper left corner of the browser, the absolute positioning of the element out of the document flow, and therefore does not occupy space, the layout of the elements in the normal document flow as if absolutely positioned elements do not exist, absolutely positioned elements are not related You can override other elements on the page by Z-index to control the hierarchy order, and the higher the value, the more the upper level is displayed.
The parent container uses relative positioning, and when the child element is absolutely positioned, the child element is no longer relative to the upper-left corner of the browser, but relative to the upper-left corner of the parent container. Relative positioning and absolute positioning need to match top, right, bottom, left to locate the specific position.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
