©2020-2024 ioDraw All rights reserved
<> Secondary menu – Vertical row
* It's as a review of what you learned before
* You can also take Kangkang as a review
* Secondary menu — vertical Row
* Please point out the deficiencies
* Code as usual All have detailed explanations
design sketch
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <title> Secondary menu
vertical </title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet"
href="./css/secondaryMenu.css"> </head> <body > <div class="main"> <!--
Set up a main frame --> <!-- this HTML The code is in the ul Inside li and ul label Let's take a simple look at this --> <ul> <li> <a
href="#"> First level menu </a> <ul> <li><a href="#"> Secondary menu </a></li> </ul> </li> <li> <a
href="#"> First level menu </a> <ul> <li> Secondary menu </li> <li> Secondary menu </li> <li> Secondary menu </li> </ul> </li>
<li> <a href="#"> First level menu </a> <ul> <li> Secondary menu </li> <li> Secondary menu </li> <li> Secondary menu </li> </ul>
</li> </ul> </div> </body> </html>
Here's what's going on css code
body{ font-size: 14px; color: black; background-color: #ccc; font-family:
Arial, Helvetica, sans-serif," Microsoft YaHei "; line-height: 1.5; } <!-- Here is to set some properties for the whole page
font size background color Font color And fonts Xinggao It's all global --> a{ color: #00a1d6; text-align: center; }
<!-- This is for the overall situation a Set some styles for labels --> .main{ width: 220px; border: 1px solid #eee; margin
: 10px auto; box-sizing: border-box; } <!-- It's for the main one div Set style Fixed width Set borders, etc Center it and so on -->
.main ul li{ border: 1px solid #eee; line-height: 50px; height: 50px; <!--
This is the middle Row height and height are equal -->background-color:#fff; position: relative; text-align:
center; <!-- Center text --> box-sizing: border-box; } .main ul li ul{ display: none;
<!-- Here is the hidden meaning -->position: absolute; left: 218px; top: -3px; width: 120px;
height: 50px; border: 1px solid #ccc; box-sizing: border-box; } .main li:hover{
background-color: #008c8c; } .main ul li:hover ul{ display: block; border-right:
none; } <!-- This is hover style Mouse up style -->
* Here is used as a simple review I didn't write in detail What do you don't understand Can be in Talk about it in the comments section
* Reset the code On my other blog If everyone's is different You can go and have a look .
* Thank you
Technology