Я кодировал горизонтальную навигацию, как показано ниже.
Но я с трудом пытаюсь написать выпадающее меню для него.
Если кто-то может помочь мне с кодированием простого простого выпадающего меню ниже Аренда (выделите на панели навигации синим цветом моря), я могу улучшить это.
Спасибо
Вот мой текущий HTML-файл:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
<ul class="glossymenu">
<li class="separator"><a href="#"><b>Reservations</b></a></li>
/* Added for the drop down */
<ul class="child">
<li><a href="#"><b>New Reservation</b></a></li>
<li><a href="#"><b>Search Reservation</b></a></li>
<li><a href="#"><b>Search Customer</b></a></li>
<li><a href="#"><b>Search Vehicle</b></a></li>
</ul>
<li class="separator"><a href="#"><b>Rentals</b></a></li>
<li class="separator"><a href="#"><b>Tariffs</b></a></li>
<li class="separator"><a href="#"><b>Fleet</b></a></li>
<li class="separator"><a href="#"><b>Tools</b></a></li>
<li class="separator"><a href="#"><b>Reports</b></a></li>
<li class="separator"><a href="#"><b>System Management</b></a></li>
</ul>
</body>
Вот мой код CSS:
.glossymenu{
padding: 0 0 0 0px;
margin: 0 auto 0 auto;
background: url(../images/menur_bg.gif) repeat-x;
height: 36px;
list-style: none;
border:solid 1px #CCC;
}
.glossymenu li{
float:left;
}
.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
height: 36px;
line-height: 36px;
text-align: center;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}
.glossymenu li a b{
float: left;
display:block;
padding: 0 28px 0 8px;
}
.glossymenu li a:hover{
color: #fff;
background: url(../images/menur_hover_left.gif) no-repeat;
background-position: left bottom;;
}
.glossymenu li a:hover b{
color: #fff;
background-image: url(../images/menur_hover_right.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
.glossymenu li.separator {
background:url(../images/separator.gif) no-repeat;
background-position:right;
padding: 0 5px 0 3.5px;
}
/* Added for the drop down */
.glossymenu .child {
position:absolute;
visibility:hidden;
top:100px;
}
.glossymenu ul li:hover {
visibility:visible;
z-index:9999;
}