Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 with Unsorted list

CSS3 with Unsorted list

Problem

As you can see in the image above, the menu (left) does not display correctly. I would like to make the menu on the (right)

I have made float: right, right: 0px;, margin-right:0px;. All of these do not work and float:right will display off the screen (the page was extended to the right)

Code: (HTML)


Code: (CSS)

#navwrap    { 
    width:100%; 
    height:30px;    
    margin:0;
    z-index:999;
    position:relative;
    background-color:#4c4e5a;
}

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { 
margin: 0;  padding: 0; border: none;   outline: none;  border: 0px;
}

.rightmenu { background-color: #4c4e5a;float: right; }
.rightmenu li { position: relative; list-style: none; float: left; display: block;}

.rightmenu li a {
    display: block; padding: 0 14px;
    margin: 6px 0;  color: #f3f3f3;
    background-color: #4c4e5a;  text-decoration: none;
    border-left: 1px solid #393942; border-right: 1px solid #393942;
}

.rightmenu li:first-child a { border-left: none; }
.rightmenu li:last-child a{ border-right: none; }  
.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu ul li:last-child a { border: none; } 

.rightmenu ul {
    position: absolute;  top: 30px; left: 0;   
    opacity: 0;  background-color: #4c4e5a;
}

.rightmenu li:hover > ul {  opacity: 1; }  
.rightmenu ul li {height:0; overflow:hidden; padding: 0;   }   
.rightmenu li:hover > ul li {  height: 30px;  overflow: visible;padding: 0;} 
.rightmenu ul li a {  width: 200px;   padding: 4px 0 4px 0px;   border: none; }  
Problem courtesy of: K.W.

Solution

You can try the following CSS. What you need to do is right aligning the last sub-menu.

#navwrap    { 
    width:100%; 
    height:30px;    
    margin:0;
    z-index:999;
    position:relative;
    background-color:#4c4e5a;
}

.rightmenu, .rightmenu ul, .rightmenu li, .rightmenu a { 
margin: 0;  padding: 0; border: none;   outline: none;  border: 0px;
}

.rightmenu { background-color: #4c4e5a;float: right; }
.rightmenu li { position: relative; list-style: none; float: left; display: block;}

.rightmenu li a {
    display: block; padding: 0 14px;
    margin: 6px 0;  color: #f3f3f3;
    background-color: #4c4e5a;  text-decoration: none;
    border-left: 1px solid #393942; border-right: 1px solid #393942;
}

.rightmenu li:first-child a { border-left: none; }
.rightmenu li:last-child a{ border-right: none; }  
.rightmenu li:hover > a { color: #8fde62; } 
.rightmenu ul li:last-child a { border: none; } 

.rightmenu ul {
    position: absolute;  top: 30px; left: 0;   
    opacity: 0;  background-color: #4c4e5a;
}

.rightmenu li:last-child ul
{
  left: auto;
  right: 0
}


.rightmenu li:hover > ul {  opacity: 1; }  
.rightmenu ul li {height:0; overflow:hidden; padding: 0;   }   
.rightmenu li:hover > ul li {  height: 30px;  overflow: visible;padding: 0;} 
.rightmenu ul li a {  white-space: nowrap;   border: none; }  

The changes are:

.rightmenu li:last-child ul
{
  left: auto;
  right: 0
}

.rightmenu ul li a {  white-space: nowrap;   border: none; } 
Solution courtesy of: dereli

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 with Unsorted list

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×