I have a CSS menu with a submenu. Everything works fine, but the submenu on my right menu item goes outside the container. I'm wondering if there is a way to prevent this.
Here is what it's doing:
http://s28.postimg.org/dbl1vmtql/dropdown.png
Here is my code:
<body>
<div class="container">
<div class="header">
</div>
<div class="nav">
<ul id="nav">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-css3"></i> CSS</li>
<li><i class="fa fa-list-ul"></i> XML</li>
<li><i class="fa fa-pencil-square-o"></i> Form</li>
<li><i class="fa fa-globe"></i> Connected Media
<ul>
<li><i class="fa fa-comments"></i> Discussion</li>
<li><i class="fa fa-street-view"></i> Google Maps</li>
<li><i class="fa fa-wordpress"></i> WordPress</li>
</ul>
</li>
<li><i class="fa fa-html5"></i> HTML 5</li>
<li><i class="fa fa-search"></i> Research
<ul>
<li><i class="fa fa-th-large"></i> Web Page Layout</li>
<li><i class="fa fa-copyright"></i> Copyright & Privacy</li>
<li><i class="fa fa-list-alt"></i> References</li>
</ul>
</li>
</ul>
</div>
<div class="content">
</div>
</div>
</body>
And here is my CSS;
body {
background: -webkit-linear-gradient(#E1E1E1, #D6D6D6); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#E1E1E1, #D6D6D6); /* For Firefox 3.6 to 15 */
background: linear-gradient(#E1E1E1, #D6D6D6); /* Standard syntax */
background-attachment: fixed;
margin: 0px 0px 0px 0px;
font-family: Verdana;
font-size: 14px;
color: #000000;
}
.container {
width:920px;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}
.content {
background-color: #F6F6F6;
padding: 5px;
height: 910px;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #F6F6F6;
padding: 5px;
margin-left: auto;
margin-right: auto;
height: 200px;
border-bottom: 1px solid #454545;
}
.nav {
background-color: #CCC;
width: 920px;
height: 30px;
border-bottom: 1px solid #454545;
}
.nav ul {
list-style:none;
display: inline;
-webkit-padding-start: 0px;
line-height: 30px;
}
.nav ul li {
float:left;
}
.nav ul li a {
padding: 6px 28px 6px 28px;
text-decoration: none;
font-weight: bold ;
color: #000;
letter-spacing: -0.5px;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
transition: background-color 1s;
}
.nav ul li a:hover {
background-color:#DFDFDF;
color: #272727;
padding: 6px 28px 6px 28px;
}
.nav ul li a.active {
background: #DFDFDF;
padding: 6px 28px 6px 28px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
display: block;
height: 30px;
background-color: #CCC;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
ul#nav li:hover > ul li a {
float: right;
line-height: 30px;
color: #000000;
text-decoration: none;
padding: 0 30px 0 0;
}
ul#nav li:hover > ul li a:hover {
color: #000000;
text-decoration: none;
}
You need to set the main content container with:
position: relative;
And then style this last submenu with:
position: absolute;
right: 0;
Related
I am working on a school project and am building a nice looking multi level dropdown menu for my page. I have not been able to get the display of the sub-menu to change on hover when targeting the parent li element. I think it might be an inheritance issue but am unsure.
I am still pretty new to this so I could have royally botched the classes/ids and levels of inheritance I am using in the css.
So far I have also tried different combinations of inheritance and using the classes and ids in different elements, I have tried using >, I have tried different display modes, I have tried using visibility instead of display, I have tried different position.
If there is a better way to set this up to make this work? Am I missing something obvious, as usual?
Here is a snippit
/*====================================MAIN=================================*/
body {
background-color: #d5d3d5;
font-family: 'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
margin: 0px;
padding: 0px;
}
.flex_body {
background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,1) 20%);
display: flex;
margin: 0px;
padding: 0px;
height: 800px;
}
.page_body {
background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,1) 15%);
margin: 0px 0px 0px 30px;
padding: 0px 0px 0px 20px;
height: 800px;
overflow: hidden;
}
/*=============================MAIN=NAVIGATION=================================*/
#header {
background-color: #ffffff;
box-shadow: inset 0px -15px 18px -6px rgba(121, 104, 124, 0.678);
text-align: right;
}
#navBar {
list-style-type: none;
display: inline-flex;
padding: 80px 0px 0px 0px
}
#navBar li {
font-size: 18px;
padding: 10px 0px 0px 0px;
margin: 0px 0px -10px 0px;
}
#navBar li:not(:last-child){
border-right: 1px solid #8f85a1dc;
}
#headNAV ul li a {
position: relative;
padding: 10px 40px 20px 40px;
text-decoration: none;
color: #353138;
}
#navBar li a:hover{
background-color: #50328ddc;
color: white;
text-decoration: underline;
}
#headNAV ul li input{
margin: 5px 35px 10px 35px;
}
/*======================news-dropdown============================*/
#news-dropdown {
display: none;
position: absolute;
padding: 5px;
margin: 21px 0px 0px 0px;
width: 140px;
background-color: #ffffff;
}
#navBar #news-dropdown li {
padding: 10px 0px 10px 0px;
margin: 0px 5px 0px -35px;
border: none;
text-align: left;
list-style: none;
}
#navBar #news-dropdown li:not(:last-child){
border-bottom: 1px solid #aea7bb8c;
}
#navBar #news-dropdown ul li a{
padding: 0px;
margin: 0px 25px;
}
#navBar li:hover #news-dropdown {
display: block;
}
#news-dropdown li:hover a{
background-color: #ffffff;
color: #50328d;
text-decoration: underline;
}
/*======================myPage-Nav============================*/
#myPage_button:hover > #myPage{
color: white;
}
#myPage_button {
text-decoration: underline;
}
#myPage {
color: #50328ddc;
font-size: 22px;
font-weight: bold;
text-decoration: underline;
}
#dropdown-btn {
padding: 0px 0px 0px 15px;
}
#myPage-menu {
display: none;
position: absolute;
padding: 0px;
margin: 17px 0px 0px 0px;
width: 182px;
background-color: #ffffff;
}
#navBar li:hover #myPage-menu {
display: block;
}
#navBar #myPage-menu li {
padding: 10px;
margin: 0px 5px 0px -30px;
border: none;
text-align: left;
list-style: none;
}
.fa-angle-right {
float: right;
}
#navBar #myPage-menu li:not(:last-child){
border-bottom: 1px solid #aea7bb8c;
}
#navBar #myPage-menu ul li a{
padding: 10px 40px 10px 20px;
margin: 0px -15px;
}
#myPage-menu li:hover a{
background-color: #ffffff;
color: #50328d;
text-decoration: underline;
font-weight: bold;
}
.sub-dropdown {
display: none;
position: absolute;
margin-top: -42px;
margin-left: 140px;
background-color: #ffffff;
}
#navBar #myPage-menu ul li:hover .sub-dropdown{
display: block;
}
<body>
<header id="header">
<nav id="headNAV">
<ul id="navBar">
<li><a href= "#" >Mission</a></li>
<li></span>
<div id="news-dropdown">
<ul>
<li>Politcs</li>
<li>Science</li>
<li>Community</li>
</ul>
</div>
</li>
<li><a href= "#" >Events</a></li>
<li><a href= "#" >Forums</a></li>
<li><a id= 'myPage_button' href= "#" >My<span id='myPage'>Page</span><span id = "dropdown-btn" class="fas fa-caret-down"></span></a>
<div id="myPage-menu">
<ul>
<li>Main Feed</li>
<li class="hover-menu">Projects<i class="fa fa-angle-right"></i></li>
<div class="sub-dropdown">
<ul>
<li>Politcal</li>
<li>Research</li>
<li>Creative</li>
<li>Collaborations</li>
</ul>
</div>
<li>Messages<i class="fa fa-angle-right"></i></li>
<div class="sub-dropdown">
<ul>
<li>Collaborations</li>
<li>Community</li>
<li>Private</li>
</ul>
</div>
<li>Profile</li>
</ul>
</div>
</li>
<li><input type="text" name="search" placeholder="Search..."></li>
<li><a id="header_login" href= "#" >Login/SignUp</a></li>
</ul>
</nav>
</header>
</body>
Might be a little much at this point but take a look at this menu it helps with the problem you are having the hover effect on takes over on desktop but you can still use the click functionality. Hope this helps and good luck
https://jsfiddle.net/fLvk091e/1/
<nav>
<ul>
<li>mission</li>
<li class="dropdown-container">
<button class="dropdown-btn">news +</button>
<ul class="dropdown">
<li>latest news</li>
<li>politcs</li>
<li>science</li>
<li>community</li>
</ul>
</li>
<li>events</li>
<li>forums</li>
<li class="dropdown-container">
<button class="dropdown-btn">myPage +</button>
<ul class="dropdown">
<li>see myPage</li>
<li>politcal</li>
<li>research</li>
<li>creative</li>
<li>collaborations</li>
</ul>
</li>
<li><input type="text" name="search" placeholder="Search..." /></li>
<li>login</li>
</ul>
</nav>
I want to set height of navbar to auto so when someone resizes it height to increase or decrease depends on screen or browser resize but it doesn't work i meant when i resize the ul li a goes down of navbar
#navbar {
width:100%;
height:45px;
background: black;
box-shadow: 2px 5px rgb(252,227,0,.5);
text-align: center;
position: fixed;
top:0;
z-index: 100;
float:top;
}
#navbar ul li {
display: inline;
}
#navbar ul {
margin-top:7px;
display: inline-block;
color:rgb(252,227,0);
font-size:1.2rem;
right:0;
position: fixed;
}
#navbar ul li .a2,.a3,.a4 {
padding-left:105px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
<div id="navbar">
<ul>
<li><i class="fas fa-bars"></i>Menu</li>
<li><i class="fas fa-shopping-cart"></i>Merchandise</li>
<li><i class="fas fa-info-circle"></i>About band</li>
<li class="drop"><i class="fas fa-music"></i>Listen now...</li>
</ul>
</div>
Solution: -
If you want to set height of navbar auto...So you have to remove height and background from #navbar..
*#navbar {
height:45px;
background: black;
}*
- > Add Background and some padding on ul also set the width 100%.
#navbar ul{
background: black;
padding: 12px 10px;
width: 100%;
}
#navbar {
width: 100%;
min-height: 45px;
background: black;
box-shadow: 2px 5px rgb(252, 227, 0, .5);
text-align: center;
position: fixed;
top: 0;
z-index: 100;
}
#navbar ul li {
display: inline;
}
#navbar ul {
display: block;
margin-top: 7px;
margin-bottom: 7px;
color: rgb(252, 227, 0);
font-size: 1.2rem;
}
#navbar ul li .a2,
#navbar ul li .a3,
#navbar ul li .a4 {
display: inline-block;
padding-left: 105px;
cursor: pointer;
color: rgb(252, 227, 0);
font-size: 1.2rem;
text-decoration: none;
transition: .5s;
}
<div id="navbar">
<ul>
<li><i class="fas fa-bars"></i>Menu</li>
<li><i class="fas fa-shopping-cart"></i>Merchandise</li>
<li><i class="fas fa-info-circle"></i>About band</li>
<li class="drop"><i class="fas fa-music"></i>Listen now...</li>
</ul>
</div>
I have two elements menu and header/ribbon with user information. menu looks good but ribbon with username not fit into a page very well. Please see my code:
JSFiddle
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body{
width:100%;
margin: 0 auto;
}
.menu {
width: 100%;
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
position:absolute;
top:90%;
left:0px;
padding:10px 10em 0em 2em; /* menu width */
border-radius:7px;
background:#4CAF50;
}
.menu ul:after { /* black triangle position */
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px -100px 5px 0px; /* text inside menu width */
float:none;
display:block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px; /* squere element size */
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:25px;
transition:color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#FFFFFF;
}
.band {
position:relative;
top:-72px;
right:-70px;
padding:14px; /* element size */
width: 100%;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:17px;
transition:color linear 0.15s;
font-weight: bold;
}
.ribbon:before {
content: "";
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>
<li>
<i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></li>
<li>
<i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></li>
<li>
<i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>
When a screen is wide you can see a big white gap on the right-hand side but when I'm looking this code on a small screen then ribbon overlap. How I can show always 100% width of ribbon menu square need to be in same position and same width
You can change the width of .band to:
width: calc(100% - 97px);
as the width of the menu is fixed to 97px, including the paddings and margins. We can get the left space for the right part by getting the full width - 97px (100% - 97px) by using calc().
Wish that this helped you.
You could do it with CSS flex:
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
display: flex;
}
.menu {
position: relative;
}
.menu ul.active {
display: none;
}
.menu ul {
position: absolute;
top: 90%;
left: 0;
padding: 10px 10em 0em 2em; /* menu width */
border-radius: 7px;
background: #4CAF50;
}
.menu ul:after { /* black triangle position */
width: 0;
height: 0;
position: absolute;
top: 0;
left: 22px;
content: '';
transform: translate(0%, -100%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #303030;
}
.menu li {
margin: 5px -100px 5px 0px; /* text inside menu width */
float: none;
display: block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display: block;
}
.toggle-nav {
padding: 20px; /* squere element size */
float: left;
display: inline-block;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: #4CAF50;
color: #FFFFFF;
font-size: 25px;
transition: color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration: none;
color: #FFFFFF;
}
.band {
flex: 0 1 100%;
padding: 14px; /* element size */
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background:#4CAF50;
color: #FFFFFF;
font-size: 17px;
transition: color linear 0.15s;
font-weight: bold;
margin-left: 10px;
}
.ribbon:before {
content: '';
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>
<li>
<i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></li>
<li>
<i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></li>
<li>
<i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>
JSFiddle
try this one:
body{
width:100%;
margin: 0 auto;
}
.menu {
width: 100%;
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
position:absolute;
top:90%;
left:0px;
padding:10px 10em 0em 2em; /* menu width */
border-radius:7px;
background:#4CAF50;
}
.menu ul:after { /* black triangle position */
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px -100px 5px 0px; /* text inside menu width */
float:none;
display:block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px; /* squere element size */
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:25px;
transition:color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#FFFFFF;
}
.band {
position:relative;
top:-72px;
right:-70px;
padding:14px; /* element size */
width: 100%;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:17px;
transition:color linear 0.15s;
font-weight: bold;
}
.ribbon:before {
content: "";
display: block;
}
DEMO HERE
When I click on the links in the dropdown menu, it doesn't go any where. It just hided the drop down menu.
What am I doing wrong?
demo
.profile {
float: right;
margin-top: 50px;
margin-right: 20px;
}
.nav- {
/*margin: 0;
padding: 0;*/
list-style-type: none;
}
.nav- li a {
color: #f00;
}
profile .dropdown > a {
line-height: 80px;
}
.dropdown a:focus {
color: #00f;
}
.dropdown-container {
position: absolute;
top: 130px;
right: 0px;
max-height: 0;
overflow: hidden;
background: #FFFFFF;
color: #fff;
box-shadow: 0px 0px 2px #FFFFFF;
}
.dropdown a:focus ~ .dropdown-container {
max-height: 500px;
transition: max-height 0.5s ease-in;
-webkit-transition: max-height 0.5s ease-in;
-moz-transition: max-height 0.5s ease-in;
}
.dropdown-menu li a {
display: inline-block;
min-width: 200px;
padding: 15px 20px;
border-bottom: 1px solid #333333;
color: #CCCCCC;
background-color: #171717;
}
.dropdown-menu li a:hover {
color: #FFFFFF;
background: #030303;
}
<body>
<div class="profile">
<ul class="nav-">
<li class="dropdown">Dropdown Menu <i class="fa fa-angle-down"></i>
<div class="dropdown-container">
<ul class="dropdown-menu">
<li>Help <i class="fa fa-question-circle pull-right"></i>
</li>
<li>Log out <i class="fa fa-sign-out pull-right"></i>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
I have been trying everything I can think of, (not very good at this)
Im trying to center the text in those buttons vertically, here is the code:
<div id="menu">
<ul class="clearfix">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-hdd-o"></i> Services</li>
<li><i class="fa fa-area-chart"></i> Pricings & plans</li>
<li><i class="fa fa-envelope"></i> Contact</li>
<li><i class="fa fa-users"></i> The Team</li>
<!-- <li><i class="fa fa-sign-in"></i> Login</li>
<li><a href="#"><i class="fa fa-user"></i> Register</li>-->
</ul>
and the CSS:
#menu {
margin: 20px auto 0 auto;
width: 60%
}
#menu ul {
padding:0px;
list-style-type:none;
}
#menu a {
background-color: #EBEBEB;
font-size: 15px;
line-height: 10px;
height: 60px;
width: 100px;
position: relative;
padding: 0 20px;
float: left;
margin-top: 5px;
display: block;
color: #385c5b;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
border-radius: 3px 3px 0 0;
border-color:#eaeaea;
box-shadow:1px 1px 5px rgba(0,0,0,0.7);
margin-bottom: 5px;
}
#menu a:hover {
background-color:#5ba4b5;
}
#menu li {
float:left;
display:block;
margin-right:5px;
}
Thanks for any replies or other techniques.
You can use line-height see this http://jsfiddle.net/sfnxkav5/
#menu ul li a{
line-height:50px;
}
This won't center it exactly but it is suitable for the height you have given
You can use display:table-cell on the anchor tags
JSfiddle Demo
#menu {
margin: 20px auto 0 auto;
width: 60%
}
#menu ul {
padding: 0px;
list-style-type: none;
}
#menu a {
background-color: #EBEBEB;
font-size: 15px;
height: 60px;
width: 100px;
position: relative;
padding: 0 20px;
margin-top: 5px;
color: #385c5b;
letter-spacing: 0.5px;
text-transform: uppercase;
font-weight: bold;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
border-radius: 3px 3px 0 0;
border-color: #eaeaea;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
display: table-cell;
vertical-align: middle;
}
#menu a:hover {
background-color: #5ba4b5;
}
#menu li {
float: left;
display: block;
margin-right: 5px;
margin-bottom: 5px;
}
<div id="menu">
<ul class="clearfix">
<li><i class="fa fa-home"></i> Home
</li>
<li><i class="fa fa-hdd-o"></i> Services
</li>
<li><a id="a" href="#"><i class="fa fa-area-chart" ></i> Pricings & plans</a>
</li>
<li><i class="fa fa-envelope"></i> Contact
</li>
<li><i class="fa fa-users"></i> The Team
</li>
<!-- <li><i class="fa fa-sign-in"></i> Login</li>
<li><a href="#"><i class="fa fa-user"></i> Register</li>-->
</ul>