0
Geçtiğimiz günlerde dokunmatik cihazları desteklemek için menü çubuğu için duyarlı bir açılır menü ekledim ancak ilginç bir soruna rastladım ve bunun nedenini anlayamadım. Temel olarak, açılır menü şeffaf görünmektedir ve içerik bölümündeki arka plan feed'indeki metinden etkilenmiştir. Görünüşe göre bu arka plan metni başlığını okur, çünkü eğer bu metnin üzerine gelirsem açılır kapanır, sanki başlığa odaklanmaya çalıştığımı sanıyormuş gibi kapanır. Menubar açılır kapanış metni arka plandan yakalama
#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>
Man @grillcsirke! Bu mükemmel çalıştı. – slavisam87