The topic is the front end of NetEase Cloud class "page makes" the homework question of the course, at that time to understand the error did not meet the requirements of the problem, became the heart forever pain, the so-called must have echoes, in the school library spent a few hours to make and the relevant knowledge points are summarized, wrote this blog post. OK, get to the point.
---------------------Gorgeous split Line------------------------
0. Requirements: When the mouse hover to the button, the Drop-down menu navigation bar appears.
1. Problem Dismantling:
(1) How HTML should be organized more convenient and reasonable
Because the problem requires that the Drop-down menu be located just below the button, you can set the <ul>padding value to 0 by using the list <li> nested unordered list <ul>.
(2) How to implement the Pull-down menu does not appear when the mouse is not hover to the button
Using positioning concealment, set the Drop-down menu to be absolutely positioned, setting a negative large value.
(3) How to implement the Drop-down menu when the mouse hover
Sets the left value of the,<ul> list when the mouse hover is set.
2.HTML Structure
<body>
<li class= "btn" ><a class= "Btn1" href= "#" > button </a>
<ul>
<li> <a href= "#" > Drop-down menu items </a></li>
<li><a href= "#" > Dropdown menu item </a></li>
< Li><a href= "#" > Drop-down menu items </a></li>
<li><a class= "Last" href= "#" > Dropdown menu item </a> </li>
</ul>
</li>
</body>(1) Reset the default <li>,<a> label style first
Li,
li a {
text-decoration:none;
List-style-type:none;
Font-family: "The song Body";
font-size:12px;
Color: #000;
}(2) Set the border of the button, and so on, I set the outer <li> tag in the <a> tag style, at this time the inner Layer <a> label set to block-level blocks, so you can set the width and height, and later useful (later).
. btn1 {
display:block;
border:1px solid #ddd;
width:50px;
height:28px;
Text-align:center;
line-height:28px;
}
(3) Hide the dropdown menu and set it to invisible
UL {
margin-top:1px;
Position:absolute; /* Set Absolute positioning *
/left: -999em; /* Set hidden *
/padding:0; /* The boundary of its parent element is 0, so it can be located directly under the parent element <li>/
}(4) Add a style for the Drop-down menu item
Ul Li a {
display:inline-block; /* menu item width is unknown, set inline-block width for content width * *
border-top:1px solid #ddd;
border-left:1px solid #ddd; * * This method is very stupid, do not learn me * * *
border-right:1px solid #ddd;
height:30px;
padding:0 10px;
line-height:30px;
}(5) Can't forget the last one
. Last {
border-bottom:1px solid #ddd;
}(6) When setting the mouse hover, a drop-down menu appears
. btn:hover UL {
left:auto/* Default UL padding is 0, located under the button * * *
(7) Change the background color when setting hover
UL li a:hover {
background-color: #ddd;
}(8) There will be a small bug, the mouse hover to the whole line of the button will appear drop-down menu, because at this time the outermost <li> tag is block-level elements, block-level elements do not set the width of the default width is the parent element width, and its parent element is the body, The first (6) step is to hover the entire outer <li> label, so this can happen.
WORKAROUND: You can set the block in the parent element <li> settings Inline-block, and when the child element content is exceeded, the parent element width varies according to the content, so you can hover the button within the border of the area control button.
. btn{
Display:inline-block/* Setting BTN is Inline-block, the
default width is the content width, the mouse will only expand the Drop-down menu when hover to the button area */
}These are some of my ideas and implementation, if there is a mistake, welcome to the front end of the great God message comments Pat Brick. If you have a good idea can also communicate with me, my code wrote a lot of deficiencies, I hope that more exchanges and improve, thank you ...
add me if you need me qq:965093975
Here's the complete code:
<!
DOCTYPE html>
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
