Скачет вертикальное меню

suvolod · December 26, 2014

Сделал вертикальное меню.... хочу "подсвечивать" элемент по событию hover. Точнее, выделять его шрифтом большего размера ... но у меня при этом начинает прыгать меню, потому-что li меняет свою высоту. Как можно обойти этот косяк....? пробовал magrin-ы и паддинги во всех мыслимых и немыслимых комбинациях, и для li, и для роительского ul, но ничего не получилось....

Пример кода здесь: http://jsfiddle.net/Lbrc1n94/

*{    margin:0;    padding:0;    } html, body{    height:100%;    width:100%;} div.main{    border:1px solid black;    width:400px;    height:80%;    margin:auto auto;    position:absolute;    top:0px; bottom:0px; left:0px; right:0px;    text-align:center; } ul.menu{    list-style-type: none;    text-align:center;    display:inline-block;    background:yellow; } ul.menu li{    padding: 10px 0px;    border-bottom:2px solid #c02222;    } ul.menu li:last-child{    border:none;} ul.menu li a{    color:#C02222;    text-decoration:none;    font-family: Verdana, Geneva, sans-serif;    font-weight:bold;    font-size:14px;    } ul.menu li a:hover{    font-size:16px;    }

<div class="main">         <ul class="menu">                    <li><a href="#"> ГЛАВНАЯ</a></li>            <li><a href="#">МЕБЕЛЬ</a></li>            <li><a href="#">БЫТОВАЯ<br/>ТЕХНИКА</a></li>            <li><a href="#">КАТАЛОГ</a></li>            <li><a href="#">КОНТАКТЫ</a></li>            <li><a href="#">ОБРАТНАЯ<br/>СВЯЗЬ</a></li>                            </ul>         </div>

satantx · December 26, 2014

Сделай меню фиксированным тогда

ul.menu{    list-style-type: none;	text-align:center;	display:inline-block;	background:yellow;    width: 100px;}

TuTaHuKk · December 26, 2014

У вас слишком много лишнего кода!

вот что вы хотите?

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Document</title>  <style type="text/css">*{    margin:0;    padding:0;  }html, body{    height:100%;    width:100%;}div.main{    border:1px solid black;    width:400px;    height:80%;    margin:auto auto;    position:absolute;    top:0px; bottom:0px; left:0px; right:0px;    text-align:center;}ul.menu{    list-style-type: none;    text-align:center;    display:inline-block;    background:yellow; } ul.menu li{    width: 150px;    height: 50px;    border-bottom:2px solid #c02222;    } ul.menu li:last-child{    border:none;}ul.menu li a{    padding: 10px 10px;    color:#C02222;    text-decoration:none;    font-family: Verdana, Geneva, sans-serif;    font-weight:bold;    font-size:14px;    display: block;    }ul.menu li a:hover{    font-size:16px;    }  </style></head><body>  <div class="main">     <ul class="menu">                <li><a href="#"> ГЛАВНАЯ</a></li>        <li><a href="#">МЕБЕЛЬ</a></li>        <li><a href="#">БЫТОВАЯ<br/>ТЕХНИКА</a></li>        <li><a href="#">КАТАЛОГ</a></li>        <li><a href="#">КОНТАКТЫ</a></li>        <li><a href="#">ОБРАТНАЯ<br/>СВЯЗЬ</a></li>                        </ul>      </div>  </body></html>

suvolod · December 26, 2014

Фиксированное по ширине меню не подходит, т.к. у меня часть пунктов состоят из двух слов. В этом случае ширина li-элементов, которые включают в себя одно слова, будет слишком большая. Некрасиво...

Edited December 26, 2014 by suvolod

Sign In

Скачет вертикальное меню

Question

suvolod

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

satantx

Link to comment

Share on other sites

TuTaHuKk

Link to comment

Share on other sites

suvolod

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information