CODEWITHSUNDEEP
htmlcss
user2710234
user2710234

Reputation: 3225

CSS Menu to display vertically with sub menus to the right

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

Upvotes: 6

Views: 30902

Answers (7)

Andrey Ciclicci
Andrey Ciclicci

Reputation: 41

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>

Upvotes: 4

Sven
Sven

Reputation: 252

I change a few styles to make it work, no rocketsince involved :)

Check out the fiddle: jsfiddle.net/GLORIEN/gWFeW/

I changed the main list-element from inline-block to block, removed the float:left and added position: relative:

.vertical-nav li {
    height: 25px;
    margin: 0;
    padding: 5px 0;
    background-color: #666;
    border: none;
    text-align: center;
    display: block;
    position: relative;
    width: 100px;  /******* MODIFIED ********/
}

Removed the display: table-row:

.sub-menu li {
    width: 100%;
    min-width: 180px;
    white-space: nowrap;  
    z-index:1;
    position:relative;
}

The list sub-navigation becomes the position: absolute and top: 0 and left: 100%:

.vertical-nav li ul {
    display: none;
    padding: 0;
    display: none;
    padding: 0;
    position: absolute;
    top: 0;
    left: 100%;
}

There a more changes in the fiddle but they not importend to what you want.

-Sven

Upvotes: 3

Zword
Zword

Reputation: 6793

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;
}

Demo

Upvotes: 4

Filip Huysmans
Filip Huysmans

Reputation: 1341

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

Upvotes: 7

Anima-t3d
Anima-t3d

Reputation: 3565

This is my version of it fiddle

This is what I've added:

.sub-menu{/* added */
   position:absolute;
    right:-95px;/* dependent on button size of main nav */
    top:0;
}

Further more I removed the float:left; and the display:inline-block; on the li as you can see in commented code on the fiddle.

Upvotes: 1

RononDex
RononDex

Reputation: 4173

You can simply add 

clear:both;

to your .vertical-nav li style. This will make it vertical.

I also moved your submenu to the correct position. For this I have added

top: -37px;
left: -20px;

to your .sub-menu li style

Check this fiddle: http://jsfiddle.net/QdDmL/3/

Upvotes: 2

Anup
Anup

Reputation: 9738

DEMO

nav ul li {
    position: relative;
}
nav ul li:hover > ul {
    position: absolute;
    display: block;
    top: 0;
    left: 100%;
    background: #aaa;
}

Upvotes: 2

Related Questions