CODEWITHSUNDEEP
htmlcss
Will Peckham
Will Peckham

Reputation: 594

How to get Sub Menu to right align using CSS

I've been struggling with this for a while, I have a menu for my website however I am having trouble with getting it to right align. I can get the main part of the menu to align but am having problems with getting the Sub menu to do the same.

This gives me this effect:

Screenshot of menu

The HTML is:

<div id="nav">
<ul>
  <li><a >Home</a></li>
  <li><a >Stuff</a></li>
  <li><a >More Stuff</a></li>
  <li><a >Suff with Sub stuff</a>
  <ul>
    <li><a >Sub thing 1</a></li>
    <li><a >Sub thing 2</a></li>
  </ul>
  </li>
</ul>

and the CSS is: ( I realise it may be a little messy due to me messing around to try to get it to right align)

    #nav{
    height:30px;
    width:100%;
    position:relative;
    top:-60px;
    background:#5D2C2C;

}

#nav a{
    font:"Lucida Sans Unicode", "Lucida Grande",  sans-serif;
    color:#CCC;
    text-decoration:none;
}

#nav ul{
    height:20px;
    top: 5px;
    margin:0px;
    list-style:none;
    position: relative;
    text-align:right;
}

#nav ul li{
    margin:5px;
    display: inline;
    position:relative;
    height:20px;
    height:20px;
    padding-left:10px;
    overflow:hidden;

}

#nav ul li ul li{ 
    list-style: none;       
    position:relative;
    float:left;
    width: 200px;
    height:20px;
    margin:0;
    background:#5D2C2C;

}

#nav ul li ul{ 
    height:20px;
    padding: 0 0px 0 0px;
    position:relative;
    margin: 0 0 0 0;
    width: 200px;   
}

#nav ul li:hover{ 
background:#900;
overflow:visible;
}

#nav ul li ul li:hover{ 
background:#000;
overflow:visible;
}

any help will be appreciated

Upvotes: 0

Views: 5071

Answers (4)

user2682863
user2682863

Reputation: 3217

This is what worked for me

.dropdown-submenu {
    position: relative;
    z-index: 1100;
    padding: 0 1em;
}

.dropdown-submenu > .dropdown-menu {
    position:absolute;
    top:0;
    left: 100%;
    width:200px;
}

Upvotes: 0

Joseph
Joseph

Reputation: 1086

...or you can try using absolute positioning for the sub element like:

#nav ul li ul{
     position:absolute;
     right:0px;
     top:25px;
 }

Upvotes: 1

James King
James King

Reputation: 1917

Without seeing a fiddle, i'd probably make the following changes:

#nav ul li ul {
    position:absolute;
    top:100%;
    left: 0;
    width:200px;
}

Upvotes: 1

Waqas A.M. Siddiqui
Waqas A.M. Siddiqui

Reputation: 53

Try using float:right in #nav ul li ul

Upvotes: 0

Related Questions