X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите знатоки CSS
elo4ka
elo4ka
Topic Starter сообщение 31.3.2014, 4:10; Ответить: elo4ka
Сообщение #1


Новичок
*

Группа: User
Сообщений: 24
Регистрация: 16.10.2011
Поблагодарили: 3 раза
Репутация:   0  


Прошу о помощи знатоков CSS. Сама методом научного тыка не разобралась. :niasilil: Прошу поправить меню так, чтобы оно выпадало справа налево. :mol:

Развернуть/Свернуть
Код
#flyList {width:748px; height:420px; position:relative; background:url(http://www.cssplay.co.uk/menus/flylist/fashion.jpg); border:1px solid #000;}
#menu {padding:0; margin:0; list-style:none; width:150px; height:175px;}
#menu li.level1-li {float:left; height:25px; width:150px;}
#menu li.level1-li a.level1-a {display:block; height:25px; line-height:25px; padding-left:10px; text-decoration:none; font-size:11px; font-family:verdana, arial, sans-serif; color:#fff; border-right:1px solid #000; font-weight:bold; background:#000; filter: alpha(opacity=60); opacity:0.6;}
#menu li.sub a.level1-a {background:#000 url(http://www.cssplay.co.uk/menus/flylist/arrow.gif) no-repeat 135px center;}

#menu table {border-collapse:collapse; width:0; height:0; position:absolute; left:0; top:0;}

#menu div.listHolder {position:absolute; left:-9999px; border:1px solid #000; border-width:1px 1px 1px 0; background:#fff url(http://www.cssplay.co.uk/menus/flylist/divider.gif); filter: alpha(opacity=80); opacity:0.8; font-family:verdana, arial, sans-serif; font-weight:bold;}
#menu div.col1 {width:150px;}
#menu div.col2 {width:300px;}
#menu div.col3 {width:450px;}

#menu div.listCol {width:130px; float:left; padding:10px;}
#menu div.listCol ul {padding:0; margin:0; list-style:none;}
#menu div.listCol ul li {height:16px;}
#menu div.listCol ul li a {display:block; height:16px; line-height:16px; font-size:10px; text-decoration:none; color:#069; padding-left:15px; background: url(http://www.cssplay.co.uk/menus/flylist/dot.gif) no-repeat 5px center;}
#menu div.listCol h5 {padding:5px 0 0 15px; margin:0; font-size:11px; line-height:20px; background:url(http://www.cssplay.co.uk/menus/flylist/linedot.gif) repeat-x left bottom;}
#menu div.listHolder div.bottomLine {clear:both;}
#menu div.listHolder div.bottomLine p {padding:0 20px; margin:0; line-height:20px; background:#400 url(http://www.cssplay.co.uk/menus/flylist/arrow.gif) no-repeat 7px 7px; color:#fff; font-size:10px;}
#menu div.listHolder div.bottomLine p a {color:#8ff;}

#menu li a:hover {background-color:#fff; color:#000; filter: alpha(opacity=80); opacity:0.8;}
#menu li.level1-li:hover > a {background:#fff; color:#000; filter: alpha(opacity=80); opacity:0.8;}

#menu li.sub a:hover {border-right:0;}
#menu li.sub:hover > a {border-right:0;}

#menu :hover div.listHolder {left:150px; top:-1px;}

#menu div.listCol ul li a:hover {color:#069; text-decoration:underline;}
#menu div.listHolder div.bottomLine p a:hover {color:#8ff; text-decoration:none; background:transparent;}


Если надо вот и HTML:
Развернуть/Свернуть
Код
<ul id="menu">
<li class="level1-li"><a class="level1-a" href="#url">Home</a></li>
<li class="level1-li sub"><a class="level1-a" href="#url">Collections<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="listHolder col3">
        <div class="listCol">
            <h5>Dresses</h5>
            <ul>
                <li><a href="#url">Floral Print</a></li>
                <li><a href="#url">Sleeveless</a></li>
                <li><a href="#url">Pure Cotton</a></li>
                <li><a href="#url">Linen Blend</a></li>
                <li><a href="#url">Buttoned</a></li>
            </ul>
            <h5>Coats &amp; Jackets</h5>
            <ul>
                <li><a href="#url">Silk Blend</a></li>
                <li><a href="#url">Cotton Rich</a></li>
                <li><a href="#url">Sleeveless</a></li>
                <li><a href="#url">Pure Linen</a></li>
            </ul>
        </div>
        <div class="listCol">
            <h5>Jeans</h5>
            <ul>
                <li><a href="#url">Flared denim</a></li>
                <li><a href="#url">Bootleg</a></li>
                <li><a href="#url">Cropped</a></li>
            </ul>
            <h5>Knitwear</h5>
            <ul>
                <li><a href="#url">Cardigans</a></li>
                <li><a href="#url">Bolero</a></li>
                <li><a href="#url">Plain long sleeve</a></li>
            </ul>
            <h5>Socks</h5>
            <ul>
                <li><a href="#url">Plain Cotton</a></li>
                <li><a href="#url">Trainer</a></li>
                <li><a href="#url">Sports</a></li>
            </ul>
        </div>
        <div class="listCol">
            <h5>Shirts &amp; Blouses</h5>
            <ul>
                <li><a href="#url">Pure Cotton</a></li>
                <li><a href="#url">Pure Silk</a></li>
                <li><a href="#url">Floral</a></li>
            </ul>
            <h5>Skirts</h5>
            <ul>
                <li><a href="#url">Pleated</a></li>
                <li><a href="#url">Belted</a></li>
                <li><a href="#url">Panelled</a></li>
                <li><a href="#url">Pencil</a></li>
                <li><a href="#url">Flared</a></li>
            </ul>
        </div>
        <div class="bottomLine">
            <p>Visit our <a href="#url">online store</a> for more bargains and special offers . . .</p>
            <p><a href="#url">Free delivery</a> on orders over £100.</p>
        </div>
    </div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="level1-li sub"><a class="level1-a" href="#url">Mail Order<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="listHolder col2">
        <div class="listCol">
            <h5>Electronics</h5>
            <ul>
                <li><a href="#url">Televisions</a></li>
                <li><a href="#url">DVD Players</a></li>
                <li><a href="#url">Mobiles</a></li>
                <li><a href="#url">Games Consoles</a></li>
            </ul>
            <h5>Wine</h5>
            <ul>
                <li><a href="#url">Red</a></li>
                <li><a href="#url">White</a></li>
                <li><a href="#url">Rose</a></li>
                <li><a href="#url">Sparkling</a></li>
            </ul>
        </div>
        <div class="listCol">
            <h5>Furniture</h5>
            <ul>
                <li><a href="#url">Garden furniture</a></li>
                <li><a href="#url">Sofas</a></li>
                <li><a href="#url">Dining chairs</a></li>
                <li><a href="#url">Beds</a></li>
            </ul>
        </div>
        <div class="bottomLine">
            <p>Special offer on all <a href="#url">Microwaves</a> - 50% OFF!</p>
        </div>
    </div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="level1-li sub"><a class="level1-a" href="#url">Special Offers<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="listHolder col1">
        <div class="listCol">
            <h5>Menswear</h5>
            <ul>
                <li><a href="#url">Half price shirts</a></li>
                <li><a href="#url">30% off Suits</a></li>
                <li><a href="#url">Half price shoes</a></li>
                <li><a href="#url">2 for 1 Shirts</a></li>
            </ul>
            <h5>Kidswear</h5>
            <ul>
                <li><a href="#url">Half price shirts</a></li>
                <li><a href="#url">2 for 1 T shirts</a></li>
                <li><a href="#url">1/3 off trainers</a></li>
            </ul>
        </div>
        <div class="bottomLine">
            <p>More <a href="#url">offers</a> online.</p>
        </div>
    </div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="level1-li sub"><a class="level1-a" href="#url">Accessories<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
    <div class="listHolder col3 left1">
        <div class="listCol">
            <h5>Scarves</h5>
            <ul>
                <li><a href="#url">Silk</a></li>
                <li><a href="#url">Chiffon</a></li>
                <li><a href="#url">Crinkle</a></li>
                <li><a href="#url">Butterfly</a></li>
                <li><a href="#url">Tassel</a></li>
            </ul>
            <h5>Belts</h5>
            <ul>
                <li><a href="#url">Leather</a></li>
                <li><a href="#url">Elasticated</a></li>
                <li><a href="#url">Reversible</a></li>
            </ul>
        </div>
        <div class="listCol">
            <h5>Necklaces</h5>
            <ul>
                <li><a href="#url">Pendant</a></li>
                <li><a href="#url">Pearl</a></li>
                <li><a href="#url">Drop</a></li>
            </ul>
            <h5>Earrings</h5>
            <ul>
                <li><a href="#url">Party</a></li>
                <li><a href="#url">Silver</a></li>
                <li><a href="#url">Gold</a></li>
                <li><a href="#url">Stud</a></li>
            </ul>
            <h5>Rings</h5>
            <ul>
                <li><a href="#url">Diamond</a></li>
                <li><a href="#url">Pearl</a></li>
                <li><a href="#url">Emerald</a></li>
            </ul>
        </div>
        <div class="listCol">
            <h5>Handbags</h5>
            <ul>
                <li><a href="#url">Shopper</a></li>
                <li><a href="#url">Tote</a></li>
                <li><a href="#url">Shoulder</a></li>
                <li><a href="#url">Beach</a></li>
                <li><a href="#url">Leather</a></li>
                <li><a href="#url">Clutch</a></li>
                <li><a href="#url">Mock Crocodile</a></li>
            </ul>
        </div>
        <div class="bottomLine">
            <p>Why not treat yourself to a <a href="#url">makeover</a> in our cosmetic department.</p>
        </div>
    </div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="level1-li"><a class="level1-a" href="#url">Contact Us</a></li>
<li class="level1-li"><a class="level1-a" href="#url">Where to Find Us</a></li>
</ul>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Tollun
Tollun
сообщение 31.3.2014, 4:47; Ответить: Tollun
Сообщение #2


Старожил
******

Группа: Active User
Сообщений: 1595
Регистрация: 1.10.2009
Из: Хабаровск
Поблагодарили: 394 раза
Репутация:   66  


Обновите
Код
#menu {float:right;padding:0; margin:0; list-style:none; width:150px; height:175px;}
#menu table {border-collapse:collapse; width:0; height:0; position:absolute; right:0; top:0;}
#menu div.listHolder {position:absolute; right:-9999px; border:1px solid #000; border-width:1px 1px 1px 0; background:#fff url(http://www.cssplay.co.uk/menus/flylist/divider.gif); filter: alpha(opacity=80); opacity:0.8; font-family:verdana, arial, sans-serif; font-weight:bold;}
#menu div.listCol {width:130px; float:right; padding:10px;}
#menu :hover div.listHolder {right:150px; top:-1px;}


--------------------


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
elo4ka
elo4ka
Topic Starter сообщение 31.3.2014, 14:38; Ответить: elo4ka
Сообщение #3


Новичок
*

Группа: User
Сообщений: 24
Регистрация: 16.10.2011
Поблагодарили: 3 раза
Репутация:   0  


Огромное спасибо за помащь! ^_^ Похоже осталось только с картинками разобраться.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
elo4ka
elo4ka
Topic Starter сообщение 1.4.2014, 16:30; Ответить: elo4ka
Сообщение #4


Новичок
*

Группа: User
Сообщений: 24
Регистрация: 16.10.2011
Поблагодарили: 3 раза
Репутация:   0  


Всплыла одна проблемка - если пункт меню будет длиной в несколько строчек, то последующие пункты накладываютя поверх(((
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Aleko
Aleko
сообщение 16.6.2014, 1:30; Ответить: Aleko
Сообщение #5


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 2.2.2011
Поблагодарили: 4 раза
Репутация:   0  


Можно использовать overflow:hidden + text-overflow:ellipsis
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1017 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1328 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 431 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 677 29.11.2017, 17:27
автор: genjnat
Открытая тема (нет новых ответов) Помогите оценить новотник. Плиз
1 Alex-777 514 29.11.2017, 7:18
автор: grumdas


 



RSS Текстовая версия Сейчас: 13.12.2017, 6:11
Дизайн