0

3 つのサブレベルを持つナビゲーション メニューがあります。左揃えにするには第 3 レベルのリストが必要ですが、動作させることができません。レベル 2 と 3 をメイン メニューと相対的に揃えることができますが、2 番目のレベルを相対的に揃え、3 番目のレベルを完全に左側に揃えたいと考えています。ヘルプ/アドバイスをいただければ幸いです。これが私が持っているものです。

ここでJSFIDDLE

HTML:

<ul class="nav">
<li><a href="#">LINK1</a></li>
<li><a href="#">LINK2</a>
    <ul class="#">
        <li><a href="#">LINK2a</a>
            <ul class="#">
            <li><a href="#">LINK2b</a></li>
            <li><a href="#">LINK2c</a></li>
            <li><a href="#">LINK2d</a></li>
            <li><a href="#">LINK2e</a></li>
            <li><a href="#">LINK2f</a></li>
            </ul>
        </li>
    </ul>
</li>
    <li><a href="#">LINK3</a></li>
    <li><a href="#">LINK4</a></li>
    <li><a href="#">LINK5</a></li>
</ul>

CSS:

a, img { border:none; }
* { margin:0; padding:0; }
.nav{
display:block;
list-style:none;
text-align: left;
position: relative;
height: 30px;
}
.nav li { 
display: block;
position: relative;
float: left;    
border: 1px solid #FFF;
}
.nav li a { 
width: 125px;
height: 30px;
display: table-cell;
vertical-align: middle;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
color: #000;
z-index: 2000;      
background-color: #999;
}
li.active {
background-color: #999 ;
color: #000;
}
.nav li a:hover {
top: 30px;  
}
.nav li:hover > a {
color:#fff;
background-color:#333;  
}
.nav li ul { 
width: 125px;
height: 25px;
position: absolute;
left: -9999px;  
border: 1px solid #FFF;
}
.nav li:hover ul {
left: -2px;
}
.nav li li:hover > a {
color:#000;
background-color:#999;  
}
.nav li li{ 
position: relative;
border: 1px solid #FFF;
height: 25px;
}
.nav li li a {
height: 25px;
top: 25px;
text-decoration: none;
font-size: 9px;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-align: center;
display: table-cell;
vertical-align: middle;
color: #000;
z-index: 2000;      
background-color: #999;
}
li li.active {
background-color: #a9d9d9 ;
color: #007f7b;
}
.nav li li:hover ul {
left: -2px;
top: 25px; 
}
ul.nav li > ul {
width: 700px;
height: 25px;
background-color:blue;
}
ul.nav li > ul > li > ul {
background-color:red;
height: 25px; 
}
ul.nav li > ul > li { display: none; }
ul.nav li:hover li { display: block; }
4

1 に答える 1

1

CSS を適切に機能させるための簡単な変更が欠けています。機能させるためにここで行った変更を投稿します。

.nav li ulなりました.nav li > ul

.nav li:hover ulなりました.nav > li:hover > ul

.nav li li:hover ulなりました.nav li > li:hover ul

ul.nav li > ul > li { display: none; }なりましたul.nav li ul ul { display: none; }

ul.nav li:hover li { display: block; }なりましたul.nav li:hover > ul { display: block; }

追加した：

ul.nav li ul ul {
    position: absolute;
    top:25px;
    left: -129px;
}
ul.nav li li:hover > a {
    color: white;
    background-color: #333
}
于 2013-10-07T21:58:40.823 に答える