CODEWITHSUNDEEP
csscss-floatcss-position
Tünde Matócza
Tünde Matócza

Reputation: 13

Double sided horizontal css menu

I'm trying to make a menu with definitions on the left and links on the right - but I can't get all the box to be a link. I could solve it with table I guess, but I hope there is a smoother solution.

So I want to float left one side of the line and right the other.

Here's my CSS: 

li {
    margin: 0px 10px 0px 100px;  
    padding: 30px 5px 0px 5px;  
    border-bottom: 2px solid black;  
    border-bottom-right-radius: 5px;  
    border-bottom-left-radius: 5px;  
    display: block;  
        -moz-transition: background-color .3s ease-in;  
        -webkit-transition: background-color .3s ease-in;  
        -o-transition: background-color .3s ease-in;  
        transition: background-color .3s ease-in;  
    }  
    li:hover {  
         background-color: #CCC;  
        -moz-transition: background-color 0.01s;  
        -webkit-transition: background-color 0.01s;  
        -o-transition: background-color 0.01s;  
        transition: background-color 0.01s;  
    }  

a {  
    float: right;  
    color: black;  
    text-decoration: none;  
}

And the HTML:

<ul>  
    <li>Blog<a href="#">#.blogspot.com</a></li>  
    <li>Twitter<a href="https://twitter.com/#">@#</a></li>  
    <li>Google+<a href="https://plus.google.com/u/0/#/posts">Google+</a></li>  
    <li>Contact me<a href="mailto:#@gmail.com">#@gmail.com</a></li>  
</ul>

Or much better, here: http://jsfiddle.net/hJRdN/

Upvotes: 1

Views: 255

Answers (2)

Love Trivedi
Love Trivedi

Reputation: 4046

It is done here on jsfiddle

just replace html and css as in js fiddle

<ul>  
    <li><a href="#">Blog<span>#.blogspot.com</span></a></li>  
    <li><a href="https://twitter.com/#"><span>Twitter</span>@#</a></li>  
    <li><a href="https://plus.google.com/u/0/#/posts">Google+<span>Google+</span></a></li>  
    <li><a href="mailto:#@gmail.com">Contact me<span>#@gmail.com</span></a></li>  
</ul>

CSS

li {
    float:left;
    width:400px;
    margin: 0px 10px 0px 100px;  

    border-bottom: 2px solid black;  
    border-bottom-right-radius: 5px;  
    border-bottom-left-radius: 5px;  
    display: block;  
        -moz-transition: background-color .3s ease-in;  
        -webkit-transition: background-color .3s ease-in;  
        -o-transition: background-color .3s ease-in;  
        transition: background-color .3s ease-in;  
    }  
    li:hover {  
         background-color: #CCC;  
        -moz-transition: background-color 0.01s;  
        -webkit-transition: background-color 0.01s;  
        -o-transition: background-color 0.01s;  
        transition: background-color 0.01s;  
    }  

a {  
    display:block; 
    padding: 30px 5px 0px 5px;  
    color: black;  
    text-decoration: none;  
    width:390px;
} 
a span{ float:right}

Upvotes: 1

David Pucko
David Pucko

Reputation: 81

Is it necesary to have unordered list? If not you could easily achieve that with just using floated divs.

<a href="#">
    <div class="row">
       <div class="left">blog</div><div class="right">blogspot.com</div>
    </div>
</a>
<a href="#">
   <div class="row">
       <div class="left">twitter</div><div class="right">twitter.com</div>
   </div>
</a>

And css:

.row { width: 100%; float: left; }
.row:hover { background-color: #e3e3e3; }
.left { float: left; }
.right { float: right; }
.row .left { color: #000; }
.row .right { color: #000; }

Check out this fiddle: http://jsfiddle.net/dejvidpi/7a6mp/

Upvotes: 0

Related Questions