CODEWITHSUNDEEP
htmlcssmenusubmenu
J Spring
J Spring

Reputation: 492

CSS Dropdown menu (to the right)

I am trying to create a sub menu that floats out to the right. However, I have hit a brick wall and can only get it to float inline.

http://jsfiddle.net/jspring/yD9N4/

You can see here (although it is a bit wider than normal) that the sub menu just displays inside the parent list item. If someone could help me to get it floating out to the right that would be great!

<ul class="cl-menu">
    <li>Link 1
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
    <li>Link 2
        <ul>
            <li><a href="#">Sub Link 1</a>
            </li>
            <li><a href="#">Sub Link 2</a>
            </li>
        </ul>
    </li>
</ul>

.cl-menu{
    list-style:none outside none;
    display:inline-table;
    position:relative;
    width:100%;
}
.cl-menu li{
    list-style:none outside none;
    border-bottom:1px solid #cccccc;
    padding:5px 1px;
    text-align:center;  

}
.cl-menu > li:hover{

    /*background-color:#303030;*/
    background-color:#66819C;
    color:#FFF;
    font-weight:bold;
    text-decoration:underline;
    opacity:1;
}

.cl-menu li ul{
    display:none;
}

.cl-menu li:hover ul{
    display:block;
    opacity:0.8;
    background-color:#FFF;
    margin-top:4px;
    font-weight:normal !important;
}

.cl-menu li ul li{
    border-bottom:1px solid #cccccc !important;
    border-top:none !important;
    border-left:none !important;
    border-right:none !important;
}

.cl-menu li ul li a{
    color:#000;
    text-decoration:none;
}

.cl-menu li ul li a:hover{
    color:#390;
    text-decoration:underline;
}

.cl-menu ul:after{
    content:"";
    clear:both;
    display:block;
}

Upvotes: 5

Views: 16533

Answers (1)

aBhijit
aBhijit

Reputation: 5391

Use position:absolute property for submenu. Use right css property for positioning the submenu properly.

    .cl-menu li ul
     { 
         display:none; 
         position:absolute;
         right:20%; 
     }

Upvotes: 3

Related Questions