1
私はドロップダウンメニューを使用していますが、親の下に中心を置く必要があります。このドロップダウンを中心にして親を強調表示できますか？
あなたは上記の例に具体的なhttp://jsfiddle.net/mayurj/a3TS9/
でオーバーアクションでこれを見ることができ、2つのドロップダウン「私たちについて」の下のメニューと「サービス」親メニュー項目の下に自動センタリングではありません。ちなみに、2番目のドロップダウンメニュー（Services - > Media Services）はうまく機能します（右に開きます）。
第2に、上記の2つのドロップダウンの下で強調表示（青色）のままにする必要もあります。私は、CSSセレクタと呼ばれるものがあることを知っていますが、それを動作させる方法はわかりません。
どちらの問題も純粋なCSSで行うことはできますか？
BELOW ------------- HTML CODE --------------------
<body>
<div id="navcontainer">
<nav id="access" role="navigation">
<div class="menu-primary-container"><ul id="menu-primary" class="menu"><li id="menu-item-64" class="current-menu-item page_item page-item-4 current_page_item menu-item-64"><a href="http:///">Home</a></li>
<li id="menu-item-72" class="menu-item-72"><a href="http:///about-us/">About us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item-71"><a href="http:///about-us/why-123-capital/">Why 123 Street Capital?</a></li>
<li id="menu-item-67" class="menu-item-67"><a href="http:///about-us/what-is-investor-relations/">What is Investor Relations?</a></li>
<li id="menu-item-74" class="menu-item-74"><a href="http:///about-us/our-values/">Our Values</a></li>
<li id="menu-item-77" class="menu-item-77"><a href="http:///about-us/our-team/">Our Team</a></li>
<li id="menu-item-81" class="menu-item-81"><a href="http:///about-us/our-partners/">Our Partners</a></li>
</ul>
</li>
<li id="menu-item-133" class="menu-item-133"><a href="http:///services/">Services</a>
<ul class="sub-menu">
<li id="menu-item-134" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-134"><a href="/services">Overview</a></li>
<li id="menu-item-68" class="menu-item-68"><a href="http:///services/customer-relationship-management-database-management/">Customer Relationship Management/Database Management</a></li>
<li id="menu-item-73" class="menu-item-73"><a href="http:///services/investor-relations/">Investor Relations</a></li>
<li id="menu-item-76" class="menu-item-76"><a href="http:///services/media-services/">Media Services</a>
<ul class="sub-menu">
<li id="menu-item-66" class="menu-item-66"><a href="http:///services/media-services/publications/">Publications</a></li>
<li id="menu-item-70" class="menu-item-70"><a href="http:///services/media-services/press-releases/">Press Releases</a></li>
<li id="menu-item-75" class="menu-item-75"><a href="http:///services/media-services/t-v-interviews/">T.V. Interviews</a></li>
</ul>
</li>
<li id="menu-item-80" class="menu-item-80"><a href="http:///services/marketing-branding/">Marketing/Branding</a></li>
</ul>
</li>
<li id="menu-item-79" class="menu-item-79"><a href="http:///clients/">Clients</a></li>
<li id="menu-item-82" class="menu-item-82"><a href="http:///updates-and-events/">Updates & Events</a></li>
<li id="menu-item-83" class="menu-item-83"><a href="http:///contact-us/">Contact Us</a></li>
</ul>
</div>
</nav><!-- #access -->
</div>
</body>
</html>
------------- CSSコード--------------------ここ
a, a:link, a:active, a:hover {
color:#0085c5;
text-decoration:none;
}
#access {
display: block;
float: right;
margin-right:30px;
margin-top:7px;
}
#access ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: white;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: white;
}
#access ul ul a:hover {
background: white;
}
#access ul li:hover > ul {
display: block;
}
body
{
background-image:url('/images/bg.png');
background-repeat:repeat-x;
font-family: 'Open Sans', 'Arial', 'Verdana', 'Tahoma', sans-serif;
font-size:13px;
color:#3e3e3e;
}
#access li {
text-align:center;
}
#access li a {
color:#5a5a5a;
font-size:13px;
font-weight:bold;
}
#access ul ul{
top:26px;
}
#access ul li a {
border-right:1px solid #0085c4;
}
#access ul li:last-child a {
border-right:none;
}
#access ul ul li a, #access ul ul ul li a {
border-right:none;
}
#access ul li a:hover {
background:#0085c4;
color:white;
}
#access ul ul li a {
border-bottom:1px solid white;
}
#access ul ul li {
margin-right:10px;
margin-left:10px;
border-bottom:1px solid #58595b;
}
#access ul ul li a {
width:145px;
}
#access ul ul ul li a {
width:100px;
}
#access ul ul li:last-child {
border-bottom:none;
}
#access ul ul li a:hover {
background:white;
color:#0085c4;
}
#access ul ul li:last-item a:hover {
border-bottom:1px solid white;
}
#access ul.sub-menu {
background:white;
}
#navcontainer {
width:960px;
height:39px;
background-image:url('/images/menushadow.png');
background-repeat:repeat-x;
}
あなたのフィドルはパスワードを要求します。 –
サイト上のコードブロックに厄介なHTML/CSSを投稿する方が良いかもしれません。 –
http://www.fldtrace.com/css/center-a-dropdown-menu-using-css-and-jquery –