わかりましたので、ここに私の問題の jsfiddle があります: http://jsfiddle.net/WF3QX/1/
フルスクリーンの結果はこちら: http://jsfiddle.net/WF3QX/1/embedded/result/
メニュー 2 アイテムの上にカーソルを置いたときにポップアップするサブメニューのボックス シャドウ インセットを取り除こうとしていますa:hoverが、これでまったく運がありません。<ul> <li> <a>要素ではなく、最初の要素だけをターゲットにしたいと思い<ul> <li> <ul> <li> <a>ます。シンボルを使用して直接の子を取得することで、考えられるあらゆる方法でこれを試しまし>たが、これはまったく役に立たないようです。
HTMLは次のとおりです（bodyタグ内）：
<nav id="main_menu" class="nav center">
<ul class="menu">
<li><a accesskey="1" href="#">Menu 1</a></li>
<li class="current">
<a accesskey="2" href="#">Menu 2</a>
<ul class="sub_menu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
</ul>
</li>
<li><a accesskey="3" href="#">Menu 3</a></li>
<li><a accesskey="4" href="#">Menu 4</a></li>
<li><a accesskey="5" href="#">Menu 5</a></li>
<li><a accesskey="6" href="#">Menu 6</a></li>
<li><a accesskey="7" href="#">Menu 7</a></li>
</ul>
</nav>
CSS は次のとおりです。
nav#main_menu {
height: 3em;
width: 100%;
background: #A92A23;
font-size: .8em;
font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
position: relative;
margin-top: -.3em;
border-bottom: .15em solid #7c211c;
border-top: .15em solid #7c211c;
z-index: 1001;
}
ul.menu {
padding: 0;
width: 100%;
height: 3em;
margin: 0px;
}
nav#main_menu li {
display: inline;
margin-left: -.2em;
}
nav#main_menu ul.menu li a {
display: inline-block;
width: 13.2%;
text-align: center;
text-decoration: none !important;
}
nav#main_menu ul.menu li > a {
border-right: 1px solid #576979;
color: #f2efe9;
background: #A92A23;
line-height: 3em;
/* text-shadow: 1px 1px 0px #7c211c; */
-o-transition: color .2s ease-out, background .5s ease-in;
-ms-transition: color .2s ease-out, background .5s ease-in;
-moz-transition: color .2s ease-out, background .5s ease-in;
-webkit-transition: color .2s ease-out, background .5s ease-in;
/* ...and now override with proper CSS property */
transition:color .2s ease-out, background .5s ease-in;
}
nav#main_menu ul.menu li a {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-transform: uppercase;
}
nav#main_menu:first-child li {
margin-left: 0px !important;
}
nav#main_menu ul.menu li:last-child a {
border-right: 0;
}
nav#main_menu ul.menu li > a:hover, nav#main_menu ul.menu li > a:active, nav#main_menu ul.menu li.current > a {
background-color: #f2efe9;
color: #A92A23;
-webkit-box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
-moz-box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
box-shadow: -0.2em 0px 0.15em -0.2em rgba(0, 0, 0, 0.8), inset 0px 0.7em 0.7em -0.5em rgba(0, 0, 0, 0.5);
}
nav#main_menu ul.menu li.current > a {
height: 3.15em;
border-left: none;
border-right: none;
z-index: 2;
}
nav#main_menu a#pull {
display: none;
}
.desc, .h4_desc, .desc_bold {
line-height: 1.5em;
}
li ul.sub_menu {
display: none;
position: absolute;
left: 0;
top: 3.1em;
width: 100%;
height: 0;
background-color: #f2efe9 !important;
border-bottom: .15em solid #605953;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
li.current ul.sub_menu li {
overflow: hidden;
padding: 0;
float: none;
}
li.current:hover ul.sub_menu {
height: auto;
display: block;
}
li.current:hover ul.sub_menu li {
overflow: hidden;
}
nav#main_menu ul.menu ul.sub_menu a {
padding: .5em .8em;
border-left: none;
border-right: none;
width: auto !important;
color: #A92A23 !important;
background: none !important;
border: none !important;
height: 0;
}
これらの CSS ルールがページの他の要素に影響を与えたくないulので、それらの宣言はかなり厳密に行いました。
基本的に、私が実際にやろうとしているのは、ユーザーが の上にマウスを置いたときに css コードを高さにドロップダウンすることですがul.sub_menu、transitionこれMenu 2は機能していません。しかし、私が抱えている他の問題は、の子要素では なく、要素a:hoverのみを取得する方法ですか?nav#main_menu ul.menu li a:hovera:hoverul.sub_menu li