قائمة منسدلة بالصور

<style> /*Start Css Menu*/

.menu {

    border: none;

    border: 0px;

    margin: 0px;

    padding: 0px;

    font-family: verdana,geneva,arial,helvetica,sans-serif;

    font-size: 14px;

    font-weight: bold;

    color: 8e8e8e;

}



.menu ul {

   
background:
url(http://4.bp.blogspot.com/-qQX1fDv0xbY/UAreB1hPbKI/AAAAAAAAAvc/1CEAIsBF08s/s1600/rb+background.gif)
 top left repeat-x;

    height: 43px;

    list-style: none;

    margin: 0;

    padding: 0;

}



.menu li {

    float: left;

    padding: 0px 8px 0px 8px;

}



.menu li a {

    color: #666666;

    display: block;

    font-weight: bold;

    line-height: 43px;

    padding: 0px 25px;

    text-align: center;

    text-decoration: none;

}



.menu li a:hover {

    color: #000000;

    text-decoration: none;

}



.menu li ul {

    background: #e0e0e0;

    border-left: 2px solid #a80329;

    border-right: 2px solid #a80329;

    border-bottom: 2px solid #a80329;

    display: none;

    height: auto;

    filter: alpha(opacity=95);

    opacity: 0.95;

    position: absolute;

    width: 225px;

    z-index: 200;

/*top:1em;

/*left:0;*/

}



.menu li:hover ul {

    display: block;

}



.menu li li {

    display: block;

    float: none;

    padding: 0px;

    width: 225px;

}



.menu li ul a {

    display: block;

    font-size: 12px;

    font-style: normal;

    padding: 0px 10px 0px 15px;

    text-align: left;

}



.menu li ul a:hover {

    background: #949494;

    color: #000000;

    opacity: 1.0;

    filter: alpha(opacity=100);

}



.menu p {

    clear: left;

}



.menu #current {

   
background:
url(http://3.bp.blogspot.com/-ga070y-Fi0A/UAre0d4oPQI/AAAAAAAAAvk/UDOO5lBCLZM/s1600/rb+home+background.gif)
 top left repeat-x;

    color: #ffffff;

}



/*End Css Menu By RealcomBiz.com*/ 

</style>  





<div class="menu">

 <ul>

  <li><a href="#" id="current">Home</a></li>

  <li><a href="#">Contact</a></li>

  <li><a href="#">About Us</a></li>

  <li><a href="#">Services</a>

  <ul>



[font='Courier New',Courier,monospace]   <li><a href="[b][color=black]#[/color][/b]">Sub page #1</a></li>[/font]



[font='Courier New',Courier,monospace]   <li><a href="[b]#[/b]">Sub page #2</a></li>[/font]



[font='Courier New',Courier,monospace]   <li><a href="[b]#[/b]">Sub page #3</a></li>[/font]



[font='Courier New',Courier,monospace]   <li><a href="[b]#[/b]">Sub page #4</a></li>[/font]



[font='Courier New',Courier,monospace]  </ul>[/font]

  </li>

 </ul>

</div>