Question

我想在右侧网站上写一个带有子菜单的垂直菜单栏。它适用于第一个子，但第二个甚至比第一个更好。显然他们有相同的代码，但他们甚至似乎不同。

这里的HTML

<div class="left_col">
    <div class="menue_left">
        <div class="menu">
        <ul class="ja">
            <li class="ja" id="Willkommen"><a href="'.WB_URL.'/index.php">Willkommen</a></li>
            <li class="ja SuI" id="SuI"><a href="'.WB_URL.'/Historisches/">Service &amp; Info</a>
                <ul class="ja">
                    <li class="ja" id="Historisches"><a href="'.WB_URL.'/Historisches">Historisches</a></li>
                    <li class="ja" id="Oeffnungszeiten"><a href="'.WB_URL.'/Oeffnungszeiten">&Ouml;ffnungszeiten</a></li>
                    <li class="ja" id="Angebot"><a href="'.WB_URL.'/Angebot">Angebot</a></li>
                    <li class="ja" id="Benutzerordnung"><a href="'.WB_URL.'/Benutzerordnung">Benutzerordnung</a></li>
                    <li class="ja" id="Kontakt"><a href="'.WB_URL.'/Kontakt">Kontakt</a></li>
                </ul>
            </li>
            <li class="ja MuK" id="Medien"><a href="'.WB_URL.'/Online-Katalog">Medien &amp; Konto</a>
                <ul class="ja">
                    <li class="ja" id="Online-Katalog"><a href="'.WB_URL.'/Online-Katalog">Online-Katalog</a></li>
                    <li class="ja" id="eBook-Ausleihe"><a href="'.WB_URL.'/eBook-Ausleihe">eBook-Ausleihe</a></li>
                </ul>
            </li>
            <li class="ja" id="Impressum"><a href="'.WB_URL.'/Impressum">Impressum</a></li>
        </ul>
        </div>
    </div>
</div>

这里是CSS：

.left_col {
position: relative;
margin: 0;
margin-top: 50px;
width: 242px;
height: 820px;
background: yellow;
}

.menue_left {
position: relative;
width:198px;
height: 195px;
top: 50px;
margin-left: auto;
margin-right: auto;
background: black;
}

.menu {
margin: 0;
padding: 0;
position: absolute;
margin-left: auto;
margin-right: auto;
width: 100%;
}

.menu ul {
margin: 0;
padding: 0;
line-height: 40px;
padding: 0;
}

.menu li {
position: relative;
margin: 0;
margin-right: auto;
margin-left: auto;
margin-top: 5px;
padding: 0;
list-style: none;
width: 186px;
width: 200px;
background: #C40012;
z-index: 100;
}

.menu ul li a {
text-align: center;
font-family: "Share", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 16px;
height: 40px;
text-transform: uppercase;
text-decoration: none;
display: block;
color: white;
border: 1px solid white;
z-index: 100;
}

.menu ul ul li a {
border: 1px solid white;
background: #C40012;
z-index: 100;
}

.menu ul li a.ja {
text-decoration: none;
}

.menu ul ul li {
margin-top: 0;
width: 100%;
z-index: 100;
}

.menu ul ul {
position: absolute;
visibility: hidden;
top: 0px;
left: 100%;
z-index: 100;
}

.menu ul li:hover ul {
visibility: visible;
z-index: 100;
}

.menu li:hover {
z-index: 100;
}

.menu a:hover {
color: #333333;
z-index: 100;
}

我期待着您的回复。

亲切的问候

Ascawath

Answer 1

添加此CSS：

.menu ul ul{
    width:100%
}

Jsfiddle

垂直菜单不同宽度但子菜单中的CSS代码相同

1 个答案: