VPF::Помогите начинающему - Форум программистов

BioWulf

Дата 14.7.2008, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 17.5.2008

Репутация: нет
Всего: нет

Вобщем есть такая менюшка

Код


body {
    font: normal 11px verdana;
    }

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 150px; /* Width of Menu Items */
    border-bottom: 1px solid #ccc;
    }
    
ul li {
    position: relative;
    }
    
li ul {
    position: absolute;
    left: 149px; /* Set 1px less than menu width */
    top: 0;
    display: none;
    }

/* Styles for Menu Items */
ul li a {
    display: block;
    text-decoration: none;
    color: #777;
    background: #fff; /* IE6 Bug */
    padding: 5px;
    border: 1px solid #ccc; /* IE6 Bug */
    border-bottom: 0;
    }
    
/* Holly Hack. IE Requirement \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

Код


<ul id="nav"> 
  <li><a href="#">Home</a></li> 
  <li><a href="#">About</a> 
    <ul> 
      <li><a href="#">History</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Offices</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Services</a> 
    <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Internet Marketing</a></li> 
      <li><a href="#">Hosting</a></li> 
      <li><a href="#">Domain Names</a></li> 
      <li><a href="#">Broadband</a></li> 
    </ul> 
  </li> 
  <li><a href="#">Contact Us</a> 
    <ul> 
      <li><a href="#">United Kingdom</a></li> 
      <li><a href="#">France</a></li> 
      <li><a href="#">USA</a></li> 
      <li><a href="#">Australia</a></li> 
    </ul> 
  </li> 
</ul>

а нужно чтоб выглядело так
user posted image

подскажите что где исправить, а то я не все еще понимаю smile

malkovian

Дата 16.7.2008, 09:00 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 20.5.2008
Где: Киев/Orgrimmar

Репутация: нет
Всего: нет

А таблицей не пробовал разметить?

Или это выпадающее меню надо?

Можешь объяснить конкретнее, какое меню надо? А то картинка двояко толкуется твоя.

bars80080

Дата 16.7.2008, 09:15 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

да нет, ему нужно горизонтальное меню с выпадающим списком вниз

что-то я потыкался, стало лень, может это пригодится:

Код

<style type="text/css">/*<![CDATA[*/
body { behavior:url(css/csshover.htc); }
body div#fthead3 ul li ul { display: none; }
body div#fthead3 ul li ul li ul { visibility: hidden; top: -1px; left: 10em; }
div#fthead3 { position: absolute; left: 100px; top: 100px; float: left; border: solid 4px #008000; }
div#fthead3 ul { margin: 0 0 0 0px; }
div#fthead3 li { float: left; width: 10em; height: 16px; position: relative; list-style-type: none; 
    background-color: #ffffff; border-left: 1px solid #000088; }
div#fthead3 li:hover { background-color: #ffffff; }
div#fthead3 li:hover ul, div#fthead3 ul li ul:hover { display: block; }
div#fthead3 a { display: block; padding: 0 6px; text-decoration: none; color: #000088; }
div#fthead3 a:hover { color: #ff0000; }
div#fthead3 ul li ul { margin 0; position: absolute; width: 100%; left: -1px; }
div#fthead3 ul li ul li { width: 100%;  border-left: 0px; border-bottom: 1px solid #000088; background: #eeeeff; }
* html div#fthead3 ul { float: left; margin-left: 0px; }
* html div#fthead3 ul li ul { width: 0px; margin-left: 0px; border-top: 1px solid #000088; border-left: 0px;  }
* html div#fthead3 ul li ul li { width: 10em; }
/*]]>*/</style>
<div id="fthead3">
  <ul>
  <li><a href="#a1">Авиабилеты</a>
    <ul>
    <li><a href="#a1-1">А Первый 1</a><ul></ul></li>
    <li><a href="#a1-2">А Первый 2</a><ul></ul></li>
    <li><a href="#a1-3">А Первый 3</a><ul></ul></li>
    <li><a href="#a1-4">А Первый 4</a><ul></ul></li>
    </ul></li>
  <li><a href="#a2">А Второй</a>
    <ul>
    <li><a href="#a1-1">А Второй 1</a><ul></ul></li>
    <li><a href="#a1-2">А Второй 2</a><ul></ul></li>
    <li><a href="#a1-3">А Второй 3</a><ul></ul></li>
    <li><a href="#a1-4">А Второй 4</a><ul></ul></li>
    </ul></li>
  <li><a href="#a3">А третий</a><ul></ul></li>
  <li><a href="#a4">А четвёртый</a><ul></ul></li>
  <li><a href="#a5">А пятый</a><ul></ul></li>
  </ul>
</div>
continue:

Присоединённый файл ( Кол-во скачиваний: 3 )

csshover.rar 1,00 Kb

BioWulf

Дата 16.7.2008, 09:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 7
Регистрация: 17.5.2008

Репутация: нет
Всего: нет

bars80080, спасибо за код smile

будем доводить до ума smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »