[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: CSS выпадающее Меню
DeeKeiD
Имеется выпадающее меню (выпадает только в низ)
#CSS
Свернутый текст


/* Menu */
#popupMenu { font-size: 10px; font-family: arial; font-weight: bold; text-align: left; margin-top: 0px; margin-bottom: 0px; line-height: 25px; width: 100%; float: left; background-color: #2a2828; background-image: url(images/style/Menu.jpg); }
#popupMenu ul { list-style: none; margin: 0; padding: 0; }
#popupMenu p { text-align: center; margin: 0; color: #ffffff; text-decoration: none; display: block; }
#popupMenu a { margin: 0; color: #ffffff; cursor: pointer; text-decoration: none; display: block; }
#popupMenu p:hover { color: #ff9600; text-decoration: none; display: block; }
#popupMenu a:hover { color: red; text-decoration: none; display: block; }
#popupMenu li { float: left; position: relative; width: 120px; }
#popupMenu li>ul { left: auto; top: auto; }
#popupMenu li:hover ul, li.over ul { display: block; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80); -moz-opacity: 0.80; opacity: 0.80; line-height: 25px; }
#popupMenu .submenu { z-index: 2; display: none; position: absolute; background-color: #2a2828; padding-left: 10px; padding-right: 10px; }
#popupMenu .submenu li { width: 100px; clear: both; }

/* Menu elements */

.menuWidth { width: 168px; }
.menuBorder { border-right: 2px solid #FFFFFF; }
.menuBody { margin-top: 2px; margin-bottom: 10px; border: 3px double #d0d0d2; background-color: #f9f9f9; text-align: left; padding: 5px 5px 5px 5px; }
.border { margin-top: 2px; border: 1px solid #dddddd; background-color: #ffffff; color: #9f9f9f; cursor: pointer; line-height: 18px; }
.vtkborder { margin-top: 2px; border: 1px solid #dddddd; background-color: #ffffff; color: #9f9f9f; cursor: pointer; line-height: 38px; font-size: 25px; }
.vtkborder a { color: red; text-decoration: line-through; }
.bred { border: 1px solid red; }
.menuHeader { clear: both; padding-left: 15px; padding-right: 15px; text-align: left; font-weight: bold; color: #FFFFFF; font-family: Arial; font-size: 11px; background-image: url('/img/top_line_bg.gif'); background-repeat: repeat-x; line-height: 20px; }
.menuHeader a { color: #ff9600; font-weight: bold; text-decoration: none; }
.menuHeaderLight { margin-top: 1px; border-top: 1px solid #FFFFFF; text-align: left; padding-left: 15px; padding-right: 15px; height: 20px; line-height: 20px; background-color: #595657; color: #FFFFFF; }
.menuHeaderLight a { color: #ff9600; font-weight: bold; text-decoration: none; }
.menuBodyLight { padding: 5px 5px 5px 15px; text-align: left; border-left: 1px solid #595e62; border-right: 1px solid #595e62; border-bottom: 1px solid #595e62; }
.menuBodyfn { text-align: justify; padding: 5px 15px 5px 15px; background-color: #f4f4f4; }


# Код меню
Свернутый текст

<div id="popupmenu">
<
ul class="menu">
<
li><p><a href="#">-link-</a></p></li>
<
li><p><a href="#">-link-</a></p></li>
<
li><p><a href="#">-link-</a></p>
<
ul class="submenu">
<
li><a href="#">-link-</a></li>
<
li><a href="#">-link-</a></li>
<
li><a href="#">-link-</a></li>
</
ul>
</
li>
<
li><p><a href="#">-link-</a></p>
<
ul class="submenu">
<
li><a href="#">-link-</a></li>
<
li><a href="#">-link-</a></li>
<
li><a href="#">-link-</a></li>
</
ul>
</
li>
<
li><p><a href="#">-link-</a></p></li>
</
ul>
</
div>

Как сделать что бы меню выпадало ещё и в право? т.е с этим кодом меню выглядит так:
user posted image
А нужно чтоб выглядело так:
user posted image

_____________
Бесполезно просить пощады у цезаря
Фатальная ошибка : Звонок в неопределенную функцию ©
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.