Menu
I am using this CSS Code:
.vertical-nav {
height:auto;
list-style:none;
width: 100%; /******* MODIFIED ********/
margin: 20px 0 0 0;
}
.vertical-nav li {
height: 25px;
margin: 0;
padding: 5px 0;
background-color: #666;
border: none;
text-align: center;
display: inline-block;
float: left;
width: 100px; /******* MODIFIED ********/
}
.vertical-nav li:hover {
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav li a {
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.vertical-nav li.current {
background-color:#F36F25;
}
.vertical-nav li.current a {
color:#FFFFFF;
}
vertical-nav ul li ul {
display:none;
list-style-type:none;
width:125px;
padding:0px;
margin-top:3px;
margin-left:-5px;
}
vertical-nav ul li:hover ul {
display:block;
}
vertical-nav ul li:hover ul li {
background-color:#555555;
width:125px;
height:30px;
display:inline-block;
}
vertical-nav ul li ul li:hover {
background-color:#333333;
}
vertical-nav ul li ul li a {
color:#FFF;
text-decoration:underline;
}
vertical-nav ul li ul li a:hover {
text-decoration:none;
}
.vertical-nav li ul {
display: none;
margin-top: 10px;
padding: 0;
}
.vertical-nav li:hover ul {
display: block;
}
.vertical-nav li:hover .sub-menu
{
display: table;
}
.sub-menu li
{
width: 100%;
min-width: 180px;
white-space: nowrap;
display:table-row;
z-index:1;
position:relative;
}
.sub-menu li a
{
display:inline-block;
padding: 0 10px;
}
For my horizontal menu, How can I make the menu display vertically but also have the sub menus display out to the right of each link on hover?
Please check Fiddle here
531
Create A SubnavUse any element to open the subnav/dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the subnav menu and add the subnav links inside it. Wrap a <div> element around the button and the <div> to position the subnav menu correctly with CSS.
In order to create a vertical navigation bar, you have to style the <a> elements inside the list.
Try the code in this fiddle:
http://jsfiddle.net/QdDmL/5/
I Changed:
.vertical-nav li:hover .sub-menu
{
position: relative;
margin-top: -27px;
}
.sub-menu li
{
position: relative;
display: block;
top: 0;
left: 100%;
width: 100%;
min-width: 180px;
white-space: nowrap;
z-index:1;
}
this makes the submenu float to right of the menu. Making the position relative is a crucial part. With the margin-top it is aligned to the correct menu item.
Cheers
100
Use the following:
HTML
<ul class="vertical-nav">
<li><a href="">Link 1</a></li><br/>
<li class="second"><a href="">Link 2</a></li>
<ul class="sub-menu">
<li><a herf="">Sub Link 1</a></li><br/>
<li><a href="">Sub Link 2</a></li>
</ul>
</ul>
CSS
.vertical-nav{
list-style:none;
margin:0px;
padding:0px;
}
.vertical-nav li{
padding-top:15px;
padding-bottom:15px;
display:inline-block;
vertical-align:top;
}
.vertical-nav li a{
background-color: #666;
padding:15px;
color:#ffffff;
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
text-decoration:none;
}
.vertical-nav ul{
padding:1px;
display:none;
}
.vertical-nav li:hover a{
background-color:#f36f25;
color:#FFFFFF;
}
.vertical-nav .second:hover ~ .sub-menu{
display:inline-block;
}
It is possible to create vertical menu with any deep using single universal style class for each level:
https://jsfiddle.net/k8gy79tv/1/
CSS:
nav ul {list-style-type: none; margin:0; padding:0; width: 200px; background-color: #f1f1f1; position: fixed;}
nav ul li {min-width: 200px; font-size:14px;}
nav ul li a {display: block; color: #000; text-decoration: none; padding: 16px 0 16px 16px;}
ul li:hover > a {color: white; background-color: #555;}
.dropdown-content {
min-width: 150px;
display: none;
left: 200px;
float:left;
position: absolute;
font-size:14px;
margin-top: -48px;
}
.dropdown-content a {
background-color: #fbfbfb;
color: black;
text-decoration: none;
display: block;
text-align: left;
padding: 16px 0 16px 16px;
}
.dropdown:hover > .dropdown-content {
display: inline-block;
}
HTML:
<body>
<nav>
<ul>
<li class="dropdown"><a href="">Menu item 1</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 11</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 111</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 1111</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 11111</a>
</li>
<li>
<a href="">Menu item 11112</a>
</li>
<li>
<a href="">Menu item 11113</a>
</li>
<li>
<a href="">Menu item 11114</a>
</li>
</ul>
</li>
<li>
<a href="">Menu item 1112</a>
</li>
</ul>
</li>
<li>
<a href="">Menu item 112</a>
</li>
<li>
<a href="">Menu item 113</a>
</li>
</ul>
</li>
<li>
<a href="">Menu item 12</a>
</li>
<li>
<a href="">Menu item 13</a>
</li>
<li>
<a href="">Menu item 14</a>
</li>
</ul>
</li>
<li><a href="">Menu item 2</a></li>
<li class="dropdown"><a href="">Menu item 3</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 31</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 311</a>
<ul class="dropdown-content">
<li class="dropdown"><a href="">Menu item 3111</a>
<ul class="dropdown-content">
<li><a href="">Menu item 31111</a></li>
<li><a href="">Menu item 31112</a></li>
<li><a href="">Menu item 31113</a></li>
<li><a href="">Menu item 31114</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Menu item 312</a></li>
<li><a href="">Menu item 313</a></li>
<li><a href="">Menu item 314</a></li>
</ul>
</li>
<li><a href="">Menu item 32</a></li>
<li><a href="">Menu item 33</a></li>
<li><a href="">Menu item 34</a></li>
</ul>
</li>
<li><a href="">Menu item 4</a></li>
</ul>
</nav>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
