[英]How can I add drop down Sub menu code to this menu
This is the html code of my menu.这是我的菜单的html代码。 I would like to add the page "Inspection" as a dropdown sub menu of the page "Services".
我想将“检查”页面添加为“服务”页面的下拉子菜单。 Could you please help me how can I add dropdown sub menu code to the "Our Services"?
您能帮我如何将下拉子菜单代码添加到“我们的服务”吗?
<nav class="main-navigation">
<ul>
<li <?php if (is_page('about-us') or wp_get_post_parent_id(0) == 117) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>
<li <?php if (is_page('our-services') or wp_get_post_parent_id(0) == 266) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/our-services') ?>">Our Services</a>
<ul class="submenu">
<li><a href="<?php echo site_url('/our-services/inspection') ?>">Inspection</a></li>
</ul>
</li>
<li <?php if (get_post_type() == 'trainingcourses') echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/trainingcourses') ?>">Training Courses</a></li>
<li <?php if (is_page('our-career') or wp_get_post_parent_id(0) == 141) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/our-career') ?>">Career</a></li>
<li <?php if (is_page('contact') or wp_get_post_parent_id(0) == 144) echo 'class="current-menu-item"' ?>><a href="<?php echo site_url('/contact') ?>">Contact Us</a></li>
</ul>
</nav>
set the "our services" postion:"realtive"
and the submenu position: "absolute"
in css.在 css 中设置“我们的服务”
postion:"realtive"
和子菜单position: "absolute"
。 Then set the display:"none"
of submenu.然后设置子菜单
the display:"none"
。 Once the user hovers or clicks the "our services" element then the menu will have display:"block"
.一旦用户悬停或单击“我们的服务”元素,菜单将
display:"block"
。 ie add a pseudo class hover or focus as per your choice and set the submenu div to display: "block"
.即根据您的选择添加伪类悬停或焦点,并将子菜单 div 设置为
display: "block"
。 I am also adding the doc link for further reference https://developer.mozilla.org/en-US/docs/Web/CSS/position
我还添加了文档链接以供进一步参考
https://developer.mozilla.org/en-US/docs/Web/CSS/position
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.