I have the task of converting a pre-existing menu to use the RadMenu control. The current CSS is defined as:
and a html example of this is:
Where active is the currently selected menu item.
I am just wondering if anyone can show me how I can replace the static menu with a radmenu but preserve the current style of the menu.
Regards
| /* Menu */ |
| #menu { |
| width: 770px; |
| height: 65px; |
| margin: 0 auto; |
| border-right: 1px solid #EDEBD5; |
| } |
| #menu ul { |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
| #menu li { |
| display: inline; |
| } |
| #menu a { |
| display: block; |
| float: left; |
| width: 109px; |
| height: 45px; |
| padding: 20px 0 0 0; |
| border-left: 1px solid #EDEBD5; |
| text-transform: lowercase; |
| text-decoration: none; |
| text-align: center; |
| font-size: 144%; |
| color: #BABABA; |
| } |
| #menu a:hover { |
| background: #F7F7F4; |
| } |
| #menu .active a { |
| background: #ba3a01; |
| color: #FFFFFF; |
| } |
and a html example of this is:
| <div id="menu"> |
| <ul> |
| <li class="active"><a href="#">Home</a></li> |
| <li><a href="#">Link 2</a></li> |
| <li><a href="#">Link 3</a></li> |
| <li><a href="#">Link 4</a></li> |
| <li><a href="#">Link 5</a></li> |
| <li><a href="#">Link 6</a></li> |
| <li><a href="#">Link 7</a></li> |
| </ul> |
| </div> |
Where active is the currently selected menu item.
I am just wondering if anyone can show me how I can replace the static menu with a radmenu but preserve the current style of the menu.
Regards