0
最近、私はタッチデバイスをサポートするためにメニューバーに対応するドロップダウンを追加しましたが、興味深い問題に遭遇し、根本原因を突き止めることができません。基本的にドロップダウンは透過的で、コンテンツセクションのバックグラウンドフィードポストのテキストの影響を受けます。ドロップダウンは背景テキストのタイトルを読み取るように見えます。なぜなら、そのテキストの上にカーソルを置くと、タイトルにフォーカスを移そうとしているようにドロップダウンが閉じられるからです。Menubarドロップダウングラウンドテキスト背景から
Click to see the image and it will all make sense.
#nav {
\t display: block;
\t cursor: pointer;
\t background-color: #4085C6;
\t padding: 6px;
\t color: #000;
\t text-decoration: none;
\t border-top-color: #4085C6;
\t border-right-color: #4085C6;
\t border-bottom-color: #4085C6;
\t border-left-color: #4085C6;
\t margin: 0px;
\t width: 960px;
}
#nav > a {
display: none;
} \t
#nav li {
position: relative;
}
#nav li a
{
\t color: #fff;
\t display: block;
}
#nav li a:active
{
\t background-color: #c00 !important;
}
#nav span:after
{
\t width: 0;
\t height: 0;
\t border: 0.313em solid transparent; /* 5 */
\t border-bottom: none;
\t border-top-color: #4086C4;
\t content: '';
\t vertical-align: middle;
\t display: inline-block;
\t position: relative;
\t right: -0.313em; /* 5 */
}
/* first level */
#nav > ul {
\t height: 3.75em;
\t background-color: #4086C4;
\t list-style-type: none;
}
#nav > ul > li {
\t width: 157px;
\t float: left;
}
#nav > ul > li > a {
\t height: 100%;
\t font-size: 1.5em;
\t line-height: 2.5em;
\t text-align: center;
\t text-decoration: none;
}
#nav > ul > li:not(:last-child) > a {
\t border-right-width: 8px;
\t border-right-color: #3779b3;
\t border-right-style: solid;
}
#nav > ul > li:hover > a,
#nav > ul:not(:hover) > li.active > a {
\t background-color: #3779b3;
\t color: #FFF;
\t list-style-type: none;
}
/* second level */
#nav li ul {
\t background-color: #3779b3;
\t display: none;
\t position: absolute;
\t top: 100%;
\t width: 20em;
\t list-style-type: none;
}
#nav li:hover ul {
display: block;
\t left: 0;
\t right: 0;
}
#nav li:not(:first-child):hover ul {
\t left: -1px;
}
#nav li ul a {
\t font-size: 1.25em;
\t border-top: 1px solid #4086C4;
\t padding: 0.75em;
\t text-decoration: none;
}
#nav li ul li a:hover,
#nav li ul:not(:hover) li.active a {
\t background-color: #4086C4;
\t list-style-type: none;
}
@media only screen and (max-width: 62.5em) /* 1000 */
{
\t #nav {
\t width: 100%;
\t position: static;
\t box-shadow: 6px 6px #4785C6;
\t margin-top: 0px;
\t margin-right: 0px;
\t margin-bottom: 0px;
\t margin-left: 0px;
\t outline-color: #4086C4;
\t outline-style: solid;
\t background-color: #4086C4;
\t color: #4086C4;
\t padding: 0px;
\t border-top-color: #4086C4;
\t border-right-color: #4086C4;
\t border-bottom-color: #4086C4;
\t border-left-color: #4086C4;
\t }
}
@media only screen and (max-width: 40em) /* 640 */
{
\t html {
\t \t font-size: 75%; /* 12 */
\t }
#nav {
position: relative;
\t \t top: auto;
\t \t left: auto;
}
\t #nav > a {
\t \t width: 3.125em;
\t \t height: 3.125em;
\t \t text-align: left;
\t \t text-indent: -9999px;
\t \t background-color: #4086C4;
\t \t position: relative;
\t }
\t #nav > a:before,
\t #nav > a:after {
\t \t position: absolute;
\t \t border: 2px solid #fff;
\t \t top: 35%;
\t \t left: 25%;
\t \t right: 25%;
\t \t content: '';
\t }
\t #nav > a:after {
\t \t top: 60%;
\t }
#nav:not(:target) > a:first-of-type,
#nav:target > a:last-of-type {
\t \t display: block;
}
\t /* first level */
#nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav:target > ul {
display: block;
}
#nav > ul > li {
width: 100%;
float: none;
}
\t #nav > ul > li > a {
\t \t height: auto;
\t \t text-align: left;
\t \t padding: 0 0.833em;
\t }
\t #nav > ul > li:not(:last-child) > a {
\t \t border-right: none;
\t \t border-bottom: 1px solid #3779b3;
\t }
\t /* second level */
#nav li ul {
position: static;
\t \t padding: 1.25em;
\t \t padding-top: 0;
}
} <nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul>
<li><a href="home.html">Home</a></li>
<li>
<a href="#" aria-haspopup="true"><span>Adult</span></a>
<ul>
<li><a href="adult/indoor_soccer.html">Indoor</a></li>
<li><a href="adult/indoor_league.html">Indoor League</a></li>
<li><a href="adult/outdoor_soccer.html">Outdoor</a></li>
<li><a href="adult/wsl_schedules.html">WSL Schedule</a></li>
<li><a href="adult/srbijada2014.html">Srbijada 2014</a></li>
<li><a href="adult/contact_us.html">Contact</a></li>
</ul>
</li>
<li>
<a href="#" aria-haspopup="true"><span>Youth</span></a>
<ul>
<li><a href="youth/code_of_ethics.html">Code of Ethics</a></li>
<li><a href="youth/team_tryouts.html">Team Tryouts</a></li>
<li><a href="youth/team_camp.html">Team Camp</a></li>
<li><a href="youth/team_registration.html">Team Registration and Payments</a></li>
<li><a href="youth/mikro_soccer.html">MiKro Soccer</a></li>
<li><a href="youth/tournaments.html">Tournaments</a></li>
<li><a href="youth/contact_us.html">Contact</a></li>
</ul>
</li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="board_members.html">Board</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</nav>
あなたは男です@grillcsirke！それは完璧に働いた。 – slavisam87