[X] Помощник

[elo4ka Topic Starter]

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

Развернуть/Свернуть

Код

#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>

[Tollun]

Обновите

Код

#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;}

[elo4ka Topic Starter]

Огромное спасибо за помащь! Похоже осталось только с картинками разобраться.

[elo4ka Topic Starter]

Всплыла одна проблемка - если пункт меню будет длиной в несколько строчек, то последующие пункты накладываютя поверх(((

[Aleko]

Можно использовать overflow:hidden + text-overflow:ellipsis

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.