CSS 简单的菜单导航模板Css / Html

Posted 2021-05-23

HTML:

<ul id="navigation">
	
	<li><a href="index.html">Home</a></li>
	<li>
		<a href="#">Product One</a>
		<ul> <!-- This is a sub menu within the second link -->
			<li><h3>Collections</h3></li> <!-- This is optional but handy for headings within the menu -->
			<li><a href="#">New Arrivals</a></li> <!-- These are usual list items with anchors in to link to the other pages (or indeed a div within the current page) -->
			<li><a href="#">Collection One</a></li> <!-- In case you are wondering, # is often used as a placeholder for links to make prototyping quicker -->
			<li><a href="#">Collection Two</a></li>
			<li><a href="#">Collection Three</a></li>
			<li><a href="#">View All</a></li>
		</ul>
	</li>
	<li><a href="#">Product Two</a></li>
	<li><a href="#">Product Three</a></li>
	<li><a href="#">About Us</a></li>
</ul>

CSS:
<style>
/* The #navigation is the full navigation which is an unordered list */
#navigation {
    margin: 0; 
    padding: 0; 
    list-style: none; 
    white-space: nowrap; /* This is optional but prevents from line wrapping */
    text-align: left; 
    width: 130px; /* Width of the top level items */
    background: #c9eeff;
    border: 1px solid #09C;
    float: left; /* Floats navigation to the left */
}

/* The list items/links, removes the default styles for list items and makes them look like a menu by removing the bullets */
#navigation  li {
    margin: 0; 
    padding: 0; 
    list-style: none;
}

#navigation  li {
    display: list-item;
    text-transform: uppercase; /* Converts all letters to capitals */
    color: #4f8ba3; /* Changes font colour */
}

/* When submenus are not supposed to show, this hides them */
#navigation ul {
    position: absolute; 
    left: -9999px;
}

#navigation  a {
    display: block; /* Makes the entire link (not just the text, as there is padding on the anchor) clickable */
    font: bold 11px verdana,arial,sans-serif; /* Sets all font to 11px bold and a sans-serif font */
    color: #0099ca;
    line-height: 22px; /* Sets the height of the line (adds padding to the font until it reaches right height) */
    text-decoration: none; /* Gets rid of underlines in the link */
    padding: 0 20px 0 10px; /* Padding to the link */
} 

/* Styling for the optional in menu headings */
#navigation h3 {
    margin: 0px;
    font-size: 0.9em;
    text-align: center; /* Note the American spelling used throughout css */
}

/* This styling happens when a mouse hovers over the link */
#navigation li a:hover {
    background-color: #09c; 
    color: #fff;
} 

/* This styling happens to the submenu links when a top level link is hovered over  */
#navigation  li:hover > a {
    background-color: #09c; 
    color: #fff;
}

/* This styling happens to the submenu ul when the top level list items are hovered over */
#navigation li:hover > ul {
    min-width: 130px;
    padding: 5px;
    left: 131px; /* For the example I needed the submenu to the right of the main menu, you may need to change this if you change the width */
    margin-top: -22px; /* Also for the example I used this to align the submenu with the link in the top level menu */
    border: 1px solid #09C;
    background: rgba(255,255,255,0.8); /* This css3 (rgba) adds a 80% transparency to the colour white */
    position: absolute; /* This makes the position set by css rather than where it thinks it should go */
}
</style>