Как показать содержимое подменю с более низкими шрифтами?

Question

У меня есть этот сайт: http://ehealth4u.cs.ucy.ac.cy/

В меню у нас есть «Партнеры». Когда мы наводим курсор на «Партнеры», нам нужно показать каждого партнера в одной строке, возможно, с меньшими шрифтами.

Код html:

 <ul class="sub-menu">
    	<li id="menu-item-836" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-836"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/university-of-cyprus/">University of Cyprus</a></li>
    	<li id="menu-item-942" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-942"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/state-health-services-organisation-shso/">State Health Services Organisation (SHSO)</a></li>
    	<li id="menu-item-831" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-831"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/cyta/">Cyprus Telecommunications Authority (CYTA)</a></li>
    	<li id="menu-item-816" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-816"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/3aehealth-ltd/">3AeHealth LTD</a></li>
    	<li id="menu-item-826" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-826"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/ubitech-ltd/">UBITECH LTD</a></li>
    	<li id="menu-item-808" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-808"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/international-institute-for-compassionate-care/">International Institute for Compassionate Care</a></li>
    	<li id="menu-item-811" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-811"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/hippocrateon-private-hospital/">HIPPOCRATEON Private Hospital</a></li>
    	<li id="menu-item-941" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-941"><a href="http://ehealth4u.cs.ucy.ac.cy/index.php/partners/iron-mountain-cyprus-ltd/">Iron Mountain Cyprus LTD</a></li>
    </ul>

Мы безуспешно попробовали следующее:

ul.sub-menu li a{
    font-size:4px;
}

Можете ли вы мне помочь, пожалуйста?

Answer 1

Добавить сюда

#menu-custom-menu li ul li a {
    font-size: 4px;
}

Расширить ширину

.main-navigation ul li ul{
   width: 260px;
}

Answer 2

У вас есть стиль

#menu-custom-menu a {
   font-size: 18px;
}

Он не позволяет вашему стилю работать.

Попробуйте написать с! Важным свойством. Примерно так:

#menu-custom-menu li ul li a {
    font-size: 4px !important;
}

Answer 3

Это правило не применяется, потому что вы установили селектор с более высокой специфичностью в строке 66 исходного кода

#menu-custom-menu a {
    font-size: 18px;
}

, так что вы либо уменьшаете специфичность этого селектора или вы увеличиваете специфичность селектора подменю

#menu-custom-menu ul.sub-menu li a{
    font-size:4px;
}

Если вам также нужно иметь подменю большего размера, измените width, определенный из строки 509 стиля. css file