0
私のナビゲーションにはドロップダウンメニューがあります。現在、各ドロップダウンメニューは親要素の下にドロップされています。しかし、それぞれのドロップダウンメニューを同じ場所にドロップしたい。 （このメニューのように - https://themify.me/demo/#theme=peak）。誰もがどんなソリューションを手伝ってもらえますか？前もって感謝します。 https://jsfiddle.net/5vedgn95/ドロップダウンメニューを取得して同じ場所に固定する方法
私のheader.phpの
<?php
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="ht-page">
\t <header id="ht-masthead" class="ht-site-header">
\t \t <div class="ht-container ht-clearfix">
\t \t \t <div id="ht-site-branding">
\t \t \t \t <?php
\t \t \t \t if (function_exists('has_custom_logo') && has_custom_logo()) :
\t \t \t \t \t the_custom_logo();
\t \t \t \t else :
\t \t \t \t \t if (is_front_page()) : ?>
\t \t \t \t \t \t <h1 class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
\t \t \t \t \t <?php else : ?>
\t \t \t \t \t \t <p class="ht-site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></p>
\t \t \t \t \t <?php endif; ?>
\t \t \t \t \t <p class="ht-site-description"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('description'); ?></a></p>
\t \t \t \t <?php endif; ?>
\t \t \t </div><!-- .site-branding -->
\t \t \t <nav id="ht-site-navigation" class="ht-main-navigation">
\t \t \t \t <div class="toggle-bar"><span></span></div>
\t \t \t \t <?php
\t \t \t \t wp_nav_menu(array(
\t \t \t \t \t 'theme_location' => 'primary',
\t \t \t \t \t 'container_class' => 'ht-menu ht-clearfix' ,
\t \t \t \t \t 'menu_class' => 'ht-clearfix',
\t \t \t \t \t 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
\t \t \t \t));
\t \t \t \t ?>
\t \t \t </nav><!-- #ht-site-navigation -->
\t \t </div>
\t </header><!-- #ht-masthead -->
\t <div id="ht-content" class="ht-site-content ht-clearfix">私のcss
/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/
#ht-masthead{
background: #FFF;
height: 70px;
border-bottom: 1px solid #eee;
z-index: 99;
transition: height 0.3s ease;
-moz-transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
position: fixed;
text-align: center;
width: 0 auto;
margin-right:38px;
width:100%;
}
.ht-sticky-header #ht-masthead{
position: fixed;
left: 0;
right: 0;
}
.ht-sticky#ht-masthead{
height: 74px;
}
.ht-sticky-header #ht-content{
position: relative;
z-index: 9;
padding-top: 94px;
}
#ht-site-branding{
float: left;
width: 30%;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
}
.ht-sticky #ht-site-branding{
padding: 5px 0;
}
#ht-site-branding img{
max-height: 60px;
width: auto;
}
.ht-main-header{
background: #f9f9f9;
padding: 45px 0;
margin-bottom: 25px;
}
.ht-main-title{
margin: 0 0 15px;
letter-spacing: 1px;
font-weight: 400;
text-transform: uppercase;
}
.ht-main-title:last-child{
margin-bottom: 0;
}
.ht-site-title{
font-family: 'futura_tbold';
font-size: 24px;
text-align: left;
text-transform: uppercase;
letter-spacing: 6px;
margin-left:20px;
}
.ht-site-title a{
text-decoration: none;
color: #000;
}
.ht-site-title a:hover {
text-decoration: none;
color: #000;
}
.ht-site-description{
color: #EEE;
margin: 0;
font-size: 15px;
font-style: italic;
line-height: 1;
}
.ht-site-description a{
color: #333;
}
#total-breadcrumbs,
.woocommerce .woocommerce-breadcrumb{
font-size: 15px;
margin: 0;
color: inherit;
}
.woocommerce .woocommerce-breadcrumb a,
#total-breadcrumbs a{
color: #000;
}
.woocommerce .woocommerce-breadcrumb a:hover,
#total-breadcrumbs a:hover{
color: #000;
}
.taxonomy-description,
.term-description{
margin-bottom: 15px;
}
.taxonomy-description p:last-child,
.term-description p:last-child{
margin-bottom: 0;
}
/*--------------------------------------------------------------
## General
--------------------------------------------------------------*/
.ht-section{
padding: 60px 0;
background: #FFF;
}
.ht-section-title-tagline{
margin-bottom: 60px;
text-align: center;
}
.ht-section-title{
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 36px;
width: 60%;
margin: 0 auto 15px;
}
.ht-section-title:last-child{
margin-bottom: 0;
}
.ht-section-tagline{
font-size: 20px;
width: 70%;
margin: 0 auto;
}
#ht-page {
width: 100% !important;
margin: 0 auto;
max-width: 100% !important;
overflow: hidden !important;
}
/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
#ht-site-navigation{
position: absolute;
width: 100%;
padding: 15px 0;
transition: padding 0.3s ease;
-moz-transition: padding 0.3s ease;
-webkit-transition: padding 0.3s ease;
float: right;
}
.ht-sticky #ht-site-navigation{
padding: 17px 0;
}
.ht-main-navigation .ht-menu{
}
.ht-main-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
display: inline-block;
}
.ht-main-navigation li {
float: left;
position: relative;
margin-left: 30px;
}
.ht-main-navigation a {
display: block;
text-decoration: none;
color: #000;
text-transform: uppercase;
font-size: 15px;
font-family: 'Raleway', sans-serif;
line-height: 36px;
padding: 0 15px;
font-weight: 600;
letter-spacing: 2px;
padding-bottom: 40px;
}
.ht-main-navigation ul ul {
display: none;
position: absolute;
left: 0;
top: 100% ;
background: #FFF;
min-width: 200px;
width:900px;
z-index: 999;
padding: 8px;
margin-top: 0px;
box-shadow: 2px 2px 8px rgba(0,0,0,0.05);
}
.ht-sticky .ht-main-navigation ul ul{
margin-top: 17px;
}
.ht-main-navigation .ht-menu > ul > li:last-child > ul{
left: auto;
right: 0;
}
.ht-main-navigation ul ul ul {
left: 100%;
top: 0;
margin: 0 0 0 8px;
border-top: 0;
}
.ht-sticky .ht-main-navigation ul ul ul{
margin-top: 0
}
.ht-main-navigation ul ul a {
text-transform: none;
font-weight: 400;
color: #444;
line-height: 1.5;
padding: 10px 15px;
font-size: 14px;
}
.ht-main-navigation ul ul li {
float: none;
margin: 0 0 5px;
}
.ht-main-navigation ul ul li:last-child{
margin-bottom: 0;
}
.ht-main-navigation ul li:hover > ul {
display: block;
}
.page-template-home-template .ht-main-navigation .current_page_item > a,
.page-template-home-template .ht-main-navigation .current-menu-item > a,
.page-template-home-template .ht-main-navigation .current_page_ancestor > a,
.home.blog .ht-main-navigation .current_page_item > a,
.home.blog .ht-main-navigation .current-menu-item > a,
.home.blog .ht-main-navigation .current_page_ancestor > a{
background: none;
color: inherit;
}
.ht-main-navigation li:hover > a,
.page-template-home-template .ht-main-navigation li:hover > a,
.home.blog .ht-main-navigation li:hover > a,
.ht-main-navigation .current_page_item > a,
.ht-main-navigation .current-menu-item > a,
.ht-main-navigation .current_page_ancestor > a,
.page-template-home-template .ht-main-navigation .current > a,
.home.blog .ht-main-navigation .current > a {
color: #000;
text-decoration: none;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 15px;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}は、サンプルjsfiddleです210
これはほとんどの部分で機能しますが、フィドルが表示されている場合、項目8のサブメニューは残りのサブメニューとは完全に異なりますか？ - https://jsfiddle.net/rkmpwj3L/ – user6738171
@ user6738171これはどうですか？ https://jsfiddle.net/rkmpwj3L/1/ –