ホバーすると、メニュー項目の下に線が表示されます。これはドロップダウン メニューであり、サブメニューにカーソルを合わせたときに行を保持したいと考えています。
これが私のコードです:
<nav id="primary_navigation">
<h1>Primary Navigation Menu</h1>
<ul>
<li class="active"><a href="<?php echo home_url('/'); ?>">Home</a></li>
<li><a href="about-us/">About Us</a></li>
<li class="has-sub"><a href=""><span>Services</span></a>
<ul>
<li><a href=""><span>Service 1</span></a></li>
<li><a href=""><span>Service 2</span></a></li>
</ul>
</li>
<li><a href="">Fees and Process</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
CSSは次のとおりです。
nav#primary_navigation h1{
display: none;
text-align: center;
}
nav#primary_navigation {
margin-top: 15px;
margin-left: 100px;
font-family: 'Eraslght';
font-size: 18pt;
line-height: 20pt;
}
nav#primary_navigation ul {
list-style:none;
}
nav#primary_navigation ul li {
display: block;
float: left;
position: relative;
margin-left: 25px;
}
nav#primary_navigation ul li a:link, nav#primary_navigation ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*1*/
nav#primary_navigation ul li:hover a{
display: block;
text-align: center;
text-decoration: none;
color: black;
}
nav#primary_navigation ul li a:hover, nav#primary_navigation ul li a:visited{
display: block;
text-align: center;
text-decoration: none;
color: black;
padding-bottom: 10px;
border-bottom: solid #000000;
}
nav#primary_navigation ul li a:active {
display: block;
text-align: center;
text-decoration: none;
color: black;
}
/*fin 1*/
nav#primary_navigation ul li:hover ul {
display: block;
background-color: #04E1BE;
}
nav#primary_navigation ul li ul {
margin: 0px;
list-style: none;
display: none;
position: absolute;
top: 40px;
left: -2px;
}
nav#primary_navigation ul li ul li {
width: 100px;
clear: left;
margin-left: -5px;
margin-top: 0px;
}
nav#primary_navigation ul li ul li a:link{
clear:left;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
nav#primary_navigation ul li ul li:hover a, nav#primary_navigation ul li ul li a:active, nav#primary_navigation ul li ul li a:hover {
clear:left;
color: white;
padding:4px 0px 0px 4px;
border:none;
position:relative;
z-index:1000;
}
誰かヒントを教えてくれませんか?どこに何をコーディングすればよいかわかりません。どうもありがとう。