Проблемы с CSS-кодированием в навигационном меню

Question

У меня есть 2 проблемы, которые я хотел решить в CSS-меню, которое я кодирую, но я не могу их решить.Прежде чем поместить код здесь, позвольте мне описать мои 2 проблемы: 1) Мне бы хотелось, чтобы область «все ли» была кликабельной, а не только текст. 2) Я думаю, что изображение и текст неправильно выровнены по вертикали и я хотел исправитьэто также.

Кроме того: Вы можете увидеть код, который я имею в действии на www.nfrases.com/modelo.php

HTML:

<nav>
  <div class="drop-menu">
     <span class="plus">+</span><span class="droptexto">Navegação</span>
     <ul class="sub-menu">
        <li><a href="http://www.google.pt"><img src="/images/icon_info.png" alt="rss"> Acerca</a></li>
        <li><a href="http://www.google.pt"><img src="/images/icon_email.png" alt="rss"> Contactos</a></li>
     </ul>
  </div>
</nav>

CSS:

nav { width: 640px; float: right; }
.drop-menu { font-family: Arial, Helvetica, sans-serif; display: block; position: relative; margin: 0 auto; text-align: left; padding: 10px 10px; font-size: 22px; height: 30px; max-height: 30px; width: 120px; cursor: pointer; border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; background: url("../images/bg_header.png") repeat scroll right top transparent; float: right; }
.drop-menu a, .drop-menu  a:visited { color: #464530; text-decoration: none; }
.drop-menu a:hover { color:#ff5400; }
.drop-menu span.droptexto { padding-left:10px; font-size: 20px; color: #ff5400; font-family: 'Leckerli One', cursive; }
.plus { display: inline-block; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; color: #ff5400; }
.drop-menu:hover .plus { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); }
.drop-menu:hover { border-left: 1px solid #e7e4d4; border-right: 1px solid #e7e4d4; }
.drop-menu:hover .sub-menu { display: inline-block; }
.sub-menu { display: none; width: 120px; background: #fff; padding: 10px 10px; margin-left: -11px; margin-top: 12px; border: 1px solid #e7e4d4; -webkit-box-shadow: 0px 13px 25px rgba(0,0,0, 0.2); }
.sub-menu li { list-style-type: none; display: block; border: 1px; border-color: #fff; border-style: dotted; border-bottom: 1px dotted #eaeaea; font-size: 19px; height: 24px; padding: 8px 0; font-size: 12px; }
.sub-menu li img { margin-right: .5em; margin-left: .5em; }
.sub-menu li:hover { border: 1px; border-color: #ff5400; border-style: dotted; }

Answer 1

, как предлагалось ранее, чтобы сделать полную ссылку кликабельной, используйте display:block и укажите ширину и высоту или отступ

.sub-menu li a {display:block; padding: 10px;}

чтобы изображение и текст были выровнены по центру, лучший способ - поместить изображение в фоновый цвет тега li или 'a'. Не забывайте, что отступ слева должен быть больше ширины изображения.

.sub-menu li a.img1 { background-image:url(images/imagename.jpg); }

.sub-menu li a { background-position:center left; background-repeat: no-repeat; height: 20px; line-height: 20px; display: block; padding-left: 20px; }

Даже если вы не хотите помещать изображение в фоновом режиме, попробуйте это. Это может сработать. Установите высоту в соответствии с высотой изображения или используйте отступы.

.sub-menu li a { height: 20px; line-height:20px; display: block;}

Надеюсь, это поможет!

Answer 2

Примерно так будет работать: http://jsfiddle.net/YGHNu/

Чтобы создать полную ссылку, установите для "display: block;", затем установите высоту и поле.Для центрирования изображения используйте «vertical-align: middle», а затем переместите его немного выше с помощью margin-top.

Answer 3

1)

.drop-menu a {
    display:block;
   }

2) Добавьте левое изображение в качестве фонового изображения <li>, после чего вы сможете центрировать изображение и текст по горизонтали.