CSS sliding door horizontal menu bar

The effect is as follows:

Implementation Method: Use the following two images:

 

 

Front-end code:

<Div id = "nagivation">
<Ul>
<Li> <a href = "mainbooks. aspx"> <B> Home </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 1 "> <B> literature </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 2 "> <B> novel </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 3 "> <B> art </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 4 "> <B> management </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 5 "> <B> test </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 6 "> <B> tool book </B> </a> </LI>
<Li> <a href = "bookstoretop. aspx? Topid = 7 "> <B> Technology </B> </a> </LI>
</Ul>
</Div>

 

 

CSS:

# Nagivation
{
Width: 1180px;
Margin-Right: auto;
Margin-left: auto;
Height: 28px;
Background-image: URL ('wangyeimg/daohang.jpg ');
Display: block;
}
# Nagivation ul
{
Margin: 0px;
Display: block;
Height: 28px;
Padding-left: 8px;
}
# Nagivation ul Li
{
Display: block;
Float: left;

Height: 28px;
Padding-top: 5px;
}
# Nagivation ul Li
{
Padding: 5px 0px 0px 14px;
Text-Decoration: none;
Color: white;
Height: 30px;
}
# Nagivation ul Li a B
{
Padding: 0px 14px 0px 0px;
Height: 28px;
}
# Nagivation ul Li A: hover
{
Background-image: URL ('wangyeimg/huadong.jpg ');
Background-position: Right top;

}
# Nagivation ul Li A: hover
{
Background-image: URL ('wangyeimg/huadong.jpg ');
Color: red;

}