2014-11-30 9 views
0

Wordpress에서 웹 사이트를 만들고 있는데 드롭 다운 메뉴를 사용하여 다른 옵션을 선택해야하는 곳이 하나 있습니다. 내가 잘못하고 솔직하게 뭘했는지 모르겠다. 나는 내가하는 일을 정말로 모른다. 문제의 사이트입니다 : 당신이 볼 수 있듯이Wordpress에서 깨진 드롭 다운 메뉴

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

, 당신은 실제로 클릭 할 수없는 드롭 다운 메뉴가있다. 그러나 몇 번 Tab 키를 누르고 스페이스 바를 누르면 메뉴가 열립니다. 아래 페이지에 대한 내 소스 코드에 링크 할 것입니다.

<?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(); ?>> 
 

 
\t <div id="page"> 
 

 
\t \t <header id="header"> 
 
\t \t \t <nav id="site-navigation" class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
\t \t \t \t <h3 class="sr-only"><?php _e('Main menu', 'arcade'); ?></h3> 
 
\t \t \t \t <a class="sr-only" href="#primary" title="<?php esc_attr_e('Skip to content', 'arcade'); ?>"><?php _e('Skip to content', 'arcade'); ?></a> 
 

 
\t \t \t \t <div class="navbar-header"> 
 
\t \t \t \t \t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
\t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t   <span class="icon-bar"></span> 
 
\t \t \t \t  </button> 
 
\t \t \t \t </div> 
 

 
\t \t \t \t <div class="collapse navbar-collapse"> 
 
\t \t \t \t \t <?php 
 
\t \t \t \t \t $menu_class = (is_rtl()) ? ' navbar-right' : ''; 
 
\t \t \t \t \t wp_nav_menu(array('theme_location' => 'primary', 'container' => '', 'menu_class' => 'nav navbar-nav' . $menu_class, 'fallback_cb' => 'bavotasan_default_menu', 'depth' => 2)); 
 
\t \t \t \t \t ?> 
 
\t \t \t \t </div> 
 
\t \t \t </nav><!-- #site-navigation --> 
 

 
\t \t \t <div class="title-card-wrapper"> 
 
       <div class="title-card"> 
 
    \t \t \t \t <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;"> \t // 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"> 
 
    \t <option value="#">-</option> 
 
    \t <option value="http://www.lukegartland.com/final/map">Maynooth</option> 
 
    \t <option value="http://www.lukegartland.com/final/map">Celbridge</option> 
 
\t <option value="http://www.lukegartland.com/final/map">Leixlip</option> 
 
\t <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> 
 

 
    \t \t \t \t \t <h1 id="site-title"> 
 
    \t \t \t \t \t \t <a href="<?php echo esc_url(home_url()); ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>" rel="home"><?php bloginfo('name'); ?></a> 
 
    \t \t \t \t \t </h1> 
 

 
    \t \t \t <?php if ($bavotasan_theme_options['header_icon']) { ?> 
 
    \t \t \t \t \t <i class="fa <?php echo $bavotasan_theme_options['header_icon']; ?>"></i> 
 
    \t \t \t \t \t <?php } else { 
 
    \t \t \t \t \t \t $space_class = ' class="margin-top"'; 
 
    \t \t \t \t \t } ?> 
 

 
    \t \t \t \t \t <div id="sitedescript"<?php echo $space_class; ?>> 
 
    \t \t \t \t \t \t <?php bloginfo('description'); ?> 
 
    \t \t \t \t \t </div> 
 

 
    \t \t \t \t \t 
 
    \t \t \t \t </div> 
 

 
    \t \t \t \t <?php 
 
    \t \t \t \t // Header image section 
 
    \t \t \t \t bavotasan_header_images(); 
 
    \t \t \t \t ?> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 

 
\t \t </header> 
 

 
\t \t <main>

+0

안녕하세요있다. 우리는 모든 성별의 사람들이 여기에 응답 할 수 있기 때문에 귀하의 게시물에서 "감사합니다"를 정리했습니다. – halfer

답변

0

너의 H1 태그는 거대한 패딩 바닥이 있고 그것은이

+0

이 문제는 일반적으로 해결되지 않습니다. 일부 화면 해상도에서만 도움이됩니다. 문제는 모든 뷰포트 크기에 표시되지 않습니다. – JHoffmann

0

있는 style.css 파일에 그 패딩

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

제거를 선택 박스를 덮고 h1 엘리먼트는 내용이 없지만 여전히 선택 상자를 덮고 있습니다. 이는 h1이 음수 여백 및 상대 위치 지정을 가지므로 선택보다 스태킹 순서가 높아지기 때문에 발생합니다.

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

또는 선택 높은 스택 수준을 제공 :

하나는 H1에서 다음 위치 규칙을 제거

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

About CSS Stacking