Question

我在Wordpress中创建一个网站，我需要使用下拉菜单选择不同的选项。我不知道自己做错了什么，说实话，我真的不知道自己在做什么。有问题的网站是：

http://www.lukegartland.com/final/

正如您所看到的，有一个您无法实际点击的下拉菜单。但是当您按下TAB键几次并点击空格键时，它会打开菜单。我将链接到下面页面的源代码。

＆＃13;

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <main>
 * and the left sidebar conditional
 *
 * @since 1.0.0
 */
?><!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" <?php language_attributes(); ?>><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" <?php language_attributes(); ?>><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" <?php language_attributes(); ?>><!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title( '|', true, 'right' ); ?></title>

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if IE]><script src="<?php echo BAVOTASAN_THEME_URL; ?>/library/js/html5.js"></script><![endif]-->
<?php wp_head(); ?>
</head>
<?php
$bavotasan_theme_options = bavotasan_theme_options();
$space_class = '';
?>
<body <?php body_class(); ?>>

	<div id="page">

		<header id="header">
			<nav id="site-navigation" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
				<h3 class="sr-only"><?php _e( 'Main menu', 'arcade' ); ?></h3>
				<a class="sr-only" href="#primary" title="<?php esc_attr_e( 'Skip to content', 'arcade' ); ?>"><?php _e( 'Skip to content', 'arcade' ); ?></a>

				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				    </button>
				</div>

				<div class="collapse navbar-collapse">
					<?php
					$menu_class = ( is_rtl() ) ? ' navbar-right' : '';
					wp_nav_menu( array( 'theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar-nav' . $menu_class, 'fallback_cb' => 'bavotasan_default_menu', 'depth' => 2 ) );
					?>
				</div>
			</nav><!-- #site-navigation -->

			 <div class="title-card-wrapper">
                <div class="title-card">
    				<div id="site-meta">
<p style="display: inline-block; color: #fff; background-color: #fff; width: 45%; height: 200px; border-radius: 5px; margin: 1em; box-shadow: 0px 4px 11px #000; font-size: font-family: 'Roboto Condensed'; font-size: 22px;
color: #464549;">	// Start of Box

</br></br></br></br>Please select your location: 
<h1 style="margin-top: -42%;"><img src="http://lukegartland.com/mykids/wp-content/uploads/2014/11/LogoImagesmall.png"></h1>


// The following is the dropdown in question
      
<select id="foo">
    	<option value="#">-</option>
    	<option value="http://www.lukegartland.com/final/map">Maynooth</option>
    	<option value="http://www.lukegartland.com/final/map">Celbridge</option>
	 <option value="http://www.lukegartland.com/final/map">Leixlip</option>
	 <option value="http://www.lukegartland.com/final/map">Dublin</option>
</select>

<script>
    document.getElementById("foo").onchange = function() {
        if (this.selectedIndex!==0) {
            window.location.href = this.value;
        }        
    };
</script>
</p>

    					<h1 id="site-title">
    						<a href="<?php echo esc_url( home_url() ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    					</h1>

    			<?php if ( $bavotasan_theme_options['header_icon'] ) { ?>
    					<i class="fa <?php echo $bavotasan_theme_options['header_icon']; ?>"></i>
    					<?php } else {
    						$space_class = ' class="margin-top"';
    					} ?>

    					<div id="sitedescript"<?php echo $space_class; ?>>
    						<?php bloginfo( 'description' ); ?>
    					</div>

    					
    				</div>

    				<?php
    				// Header image section
    				bavotasan_header_images();
    				?>
				</div>
			</div>

		</header>

		<main>

＆＃13;

Answer 1

你的h1标签有巨大的填充底部，它覆盖选择框删除填充

h1#site-title {padding-bottom:13%;}

在style.css文件中

Answer 2

有一个没有内容但仍覆盖选择框的h1元素。这是因为h1具有负边距和相对定位，因此获得比选择更高的堆叠顺序。

从h1中删除以下定位规则：

#site-title {
    position: relative;
    margin: -19%;
}

或选择更高的堆叠级别：

#foo {
    position: relative;
    z-index: 100;
}

About CSS Stacking

在Wordpress中打破下拉菜单

2 个答案: