1. The effect of centering the navigation bar
Effect:
2. Transparent drop-down box
Transparent navigation bar:
The effect in the figure is written by me in the simplest and most stupid way. It's also used as a normal practice to build a complete website. Because it's self-made, the two side-by-side drop-down boxes use absolute positioning to change the position, so you need to adjust the value of left and top by yourself and directly go to the code segment.
css Style
<style> * { margin:0; padding:0;} ul, li{ list-style:none; } a { text-decoration:none; } .nav { padding-left:15%; list-style-type:none; overflow:hidden; width: 100%; height:40px; background-color:rgb(184, 0, 0); padding-top: 1px ; font-size: 17px; } /* The above code sets the overall length and height, which will be adaptive in the web page*/ .nav ul li { float:left;} .nav ul li a { z-index:10; width:180px; height:40px; text-align:center; line-height:30px; display:block; border-right:2px solid rgb(184, 0, 0); background-color: rgb(184, 0, 0); color:white; } .nav ul li a:hover{ background-color: #555; color :white; } .nav ul li ul { position:absolute; display:none; } .nav ul li ul li { float:none; } .nav ul li ul li a { border-right:none; /* Transparent navigation bar */ border: 2px solid hsla(0,0%,100%,.1); background:rgb(221, 221, 221); background-clip: padding-box; /* End */ color: black } .nav ul li:hover ul{ display:block; } </style>
html code
</head> <body> <div class="nav"> <ul> <li><a href="SHouYe.html">home page</a> </li> <li><a href="#">Training system courses</a> <ul id="one" style="position:absolute; top:39px; left: 465px; "> <!-- Generate absolute positioning elements, convenient to modify the location of the drop-down box --> <li><a href="YLB.html">Outside the station</a></li> <li><a href="GJB.html">Senior operation selection class</a></li> </ul> </li> <li><a href="#">Training course</a> <ul id="two" style="position:absolute; top:39px; left: 645px; "> <!-- Generate absolute positioning elements, convenient to modify the location of the drop-down box --> <li><a href="BDJQ.html">Explosion order</a></li> <li><a href="HSBD.html">Treasure</a></li> <li><a href="BWMJ.html">Special training course</a></li> </ul> </li> <li><a href="TXY.html">Wang Zhe special training camp</a></li> <li><a href="#">Activity display</a></li> <li><a href="#">Mentor style</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </body> </html>
If you need to modify it, please send me a private message~