How to Use CSS to Make a Menu Box
Cascading Style Sheets is a style-sheet language used to design websites and is often used for creating stylized menus for site navigation. Combining CSS with HTML, you can create your own menu box using an HTML unordered list. Unordered lists are lists marked with bullets, created in HTML using the <ul> tag. CSS allows you to style unordered lists and transform bullet-point lists into a single-line boxed menu.
Other People Are Reading
Instructions
-
-
1
Open Notepad and fill in the names of the items you wish to appear on your menu using an HTML unordered list:
<div id="menubox">
<ul>
<li><a href="item1.html">Item 1</a></li>
<li><a href="item2.html">Item 2</a></li>
<li><a href="item3.html">Item 3</a></li>
</ul>
</div>
-
2
Add the following CSS in the <head> section of the HTML to remove the bullets:
<style type="text/css">
#menubox ul
{
list-style: none;
}
</style>
-
-
3
Add the following CSS within the <style> tags to make the list fall in one line:
#menubox li
{
float: left;
}
-
4
Add the menu box style in your CSS:
#menubox li a
{
height: 2em;
line-height: 2em;
float: left;
width: 9em;
display: block;
border: 1px solid #ccc;
color: #000;
text-decoration: none;
text-align: center;
}
-
5
Save it as an HTML file.
-
1
Tips & Warnings
Define more styles within CSS selector "#menubox li a" to further customize the appearance of the menu box.
