How can I create a vertical menu bar with submenus on the right side? The first submenu appears correctly, but the second one is narrower than the first. It seems like they have the same code, yet they look different.
Below is the HTML code:
<div class="left_col">
<div class="menue_left">
<div class="menu">
<ul class="ja">
<li class="ja" id="Welcome"><a href="'.WB_URL.'/index.php">Welcome</a></li>
<li class="ja SuI" id="SuI"><a href="'.WB_URL.'/Historical/">Service & Info</a>
<ul class="ja">
<li class="ja" id="Historical"><a href="'.WB_URL.'/Historical">Historical</a></li>
<li class="ja" id="Hours"><a href="'.WB_URL.'/Hours">Opening Hours</a></li>
<li class="ja" id="Offer"><a href="'.WB_URL.'/Offer">Offer</a></li>
<li class="ja" id="User-Rules"><a href="'.WB_URL.'/User-Rules">User Rules</a></li>
<li class="ja" id="Contact"><a href="'.WB_URL.'/Contact">Contact</a></li>
</ul>
</li>
<li class="ja MuK" id="Media"><a href="'.WB_URL.'/Online-Catalog">Media & Account</a>
<ul class="ja">
<li class="ja" id="Online-Catalog"><a href="'.WB_URL.'/Online-Catalog">Online Catalog</a></li>
<li class="ja" id="eBook-Lending"><a href="'.WB_URL.'/eBook-Lending">eBook Lending</a></li>
</ul>
</li>
<li class="ja" id="Legal-Notice"><a href="'.WB_URL.'/Legal-Notice">Legal Notice</a></li>
</ul>
</div>
</div>
</div>
And here is the 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;
}
I eagerly await your feedback!
Warm regards
Ascawath