2015-11-16 2 views
0

Я пытаюсь добавить подменю в свою тему. Но теперь он появляется. Я использую WordPress на своем веб-сайте.Подменю не отображается.

Я не знаю, почему CSS не работает.

Для получения более подробной информации, пожалуйста, ознакомьтесь с кодом ниже.

Спасибо за помощь.

header nav { 
 
    
 
    position: absolute; 
 
    top: 92px; 
 
    right: 20px; 
 
} 
 

 
header nav ul { 
 
    
 
    margin: 0; 
 
    padding: 0; 
 

 
} 
 

 
header nav ul li { 
 
    
 
    margin: 0; 
 
    padding: 0; 
 
    font: 400 18px 'PT Sans Narrow'; 
 
    color: #6d6d6d; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
header nav ul li a { 
 
    
 
    padding: 2px 12px 5px 12px; 
 
    font: 400 18px 'PT Sans Narrow'; 
 
    color: #6d6d6d; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
header nav ul li a:hover, header nav ul li.current-menu-item a, header nav li.current-page-ancestor a { 
 
    
 
    background: #202020; 
 
    color: #ffffff; 
 
} 
 

 
header ul.sub-menu { 
 
    
 
    height: auto; 
 
    width: 210px; 
 
    text-align: left; 
 
    position: absolute; 
 
    left: 0;z-index: 9999; 
 
    display: none; 
 

 
} 
 

 
header ul.sub-menu li { 
 
    
 
    height: auto; 
 
    width: 210px; 
 
    font: 400 18px 'PT Sans Narrow'; 
 
    color: #6d6d6d; 
 
    display: block; 
 
    float: none !important; 
 
    position: relative !important; 
 

 
} 
 

 
header ul.sub-menu a { 
 
    
 
    padding: 2px 12px 5px 12px; 
 
    background: #202020; 
 
    color: #ffffff; 
 
    display: block; 
 
    text-decoration: none; 
 
    position: relative !important; 
 

 
}
<header> 
 
<nav class="menu-primary-container"><ul id="menu-primary" class=""><li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20"><a href="http://www.asbestosremovalprofessionals.com.au/">Home</a></li> 
 
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://www.asbestosremovalprofessionals.com.au/about-ab-asrem/">About Us</a></li> 
 
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-69"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-testing-melbourne/">Asbestos Testing</a> 
 
<ul class="sub-menu"> 
 
\t <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-roof-removal-cost/">Asbestos Roofing</a></li> 
 
</ul> 
 
</li> 
 
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.asbestosremovalprofessionals.com.au/testimonials/">Testimonials</a></li> 
 
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.asbestosremovalprofessionals.com.au/contact/">Contact</a></li> 
 
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.asbestosremovalprofessionals.com.au/blog/">Blog</a></li> 
 
</ul></nav></header>

+0

Я не могу воспроизвести вашу проблему, используя только код, указанный выше. Можете ли вы предоставить дополнительную информацию, например тему и настройки? Отсутствует скриншот, показывающий меню. – FelisCatus

+0

Вот ссылка на скриншот: https://qsnapnet.com/snaps/60hp4ih93ma38fr –

ответ

1

HI теперь используется для этого

header nav ul > li:hover ul{display:block;} 

--- Demo здесь

header nav { 
 
    
 
    position: absolute; 
 
    top: 92px; 
 
    right: 20px; 
 
} 
 
header nav ul > li:hover ul{display:block;} 
 
header nav ul { 
 
    
 
    margin: 0; 
 
    padding: 0; 
 

 
} 
 

 
header nav ul li { 
 
    
 
    margin: 0; 
 
    padding: 0; 
 
    font: 400 18px 'PT Sans Narrow'; 
 
    color: #6d6d6d; 
 
    list-style: none; 
 
    position: relative; 
 
    float: left; 
 
} 
 

 
header nav ul li a { 
 
    
 
    padding: 2px 12px 5px 12px; 
 
    font: 400 18px 'PT Sans Narrow'; 
 
    color: #6d6d6d; 
 
    display: block; 
 
    text-decoration: none; 
 
} 
 

 
header nav ul li a:hover, header nav ul li.current-menu-item a, header nav li.current-page-ancestor a { 
 
    
 
    background: #202020; 
 
    color: #ffffff; 
 
} 
 

 
header ul.sub-menu { 
 
    
 
    height: auto; 
 
    width: 210px; 
 
    text-align: left; 
 
    position: absolute; 
 
    left: 0;z-index: 9999; 
 
    display: none; 
 

 
} 
 

 
header ul.sub-menu li { 
 
    
 
    height: auto; 
 
    width: 210px; 
 
    font: 400 18px 'PT Sans Narrow'; 
 
    color: #6d6d6d; 
 
    display: block; 
 
    float: none !important; 
 
    position: relative !important; 
 

 
} 
 

 
header ul.sub-menu a { 
 
    
 
    padding: 2px 12px 5px 12px; 
 
    background: #202020; 
 
    color: #ffffff; 
 
    display: block; 
 
    text-decoration: none; 
 
    position: relative !important; 
 

 
}
<header> 
 
<nav class="menu-primary-container"><ul id="menu-primary" class=""><li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-20"><a href="http://www.asbestosremovalprofessionals.com.au/">Home</a></li> 
 
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://www.asbestosremovalprofessionals.com.au/about-ab-asrem/">About Us</a></li> 
 
<li id="menu-item-69" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-69"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-testing-melbourne/">Asbestos Testing</a> 
 
<ul class="sub-menu"> 
 
\t <li id="menu-item-71" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-71"><a href="http://www.asbestosremovalprofessionals.com.au/asbestos-roof-removal-cost/">Asbestos Roofing</a></li> 
 
</ul> 
 
</li> 
 
<li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"><a href="http://www.asbestosremovalprofessionals.com.au/testimonials/">Testimonials</a></li> 
 
<li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"><a href="http://www.asbestosremovalprofessionals.com.au/contact/">Contact</a></li> 
 
<li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"><a href="http://www.asbestosremovalprofessionals.com.au/blog/">Blog</a></li> 
 
</ul></nav></header>

0

вы можете попробовать это:

header nav { 

    position: absolute; 
    top: 92px; 
    right: 20px; 
} 

header nav ul li:hover ul{ 

    margin: 0; 
    padding: 0; 
    display:block; 

} 

header nav ul li { 

    margin: 0; 
    padding: 0; 
    font: 400 18px 'PT Sans Narrow'; 
    color: #6d6d6d; 
    list-style: none; 
    position: relative; 
    float: left; 
} 

header nav ul li a { 

    padding: 2px 12px 5px 12px; 
    font: 400 18px 'PT Sans Narrow'; 
    color: #6d6d6d; 
    display: block; 
    text-decoration: none; 

} 

header nav ul li a:hover, header nav ul li.current-menu-item a, header nav li.current-page-ancestor a { 

    background: #202020; 
    color: #ffffff; 

} 

header ul.sub-menu { 

    height: auto; 
    width: 210px; 
    text-align: left; 
    position: absolute; 
    left: 0;z-index: 9999; 
    display: none; 

} 

header ul.sub-menu li { 

    height: auto; 
    width: 210px; 
    font: 400 18px 'PT Sans Narrow'; 
    color: #6d6d6d; 
    display: block; 
    float: none !important; 
    position: relative !important; 

} 

header ul.sub-menu a { 

    padding: 2px 12px 5px 12px; 
    background: #202020; 
    color: #ffffff; 
    display: block; 
    text-decoration: none; 
    position: relative !important; 

} 

DEMO HERE

Смежные вопросы