I'm building a dropdown menu and I've got an issue showed on this img:
I want the "2.1" text to be displayed next to the "Item" text. For some reaason, every new word gets a new line.
Here's the html:
<ul id='nav'>
<li><a href='/'>Item 1</a></li>
<li><a href='/'>Item 2</a>
<ul>
<li><a href='/'>Item 2.1</a></li>
</ul>
</li>
<li><a href='/'>Item 3</a></li>
<li><a href='/'>Item 4</a></li>
<li><a href='/'>Item 5</a></li>
</ul>
And here's the CSS:
#nav {
list-style: none;
}
#nav li {
float: left;
position: relative;
}
#nav li a {
display: block;
text-decoration: none;
text-align: center;
background: #ccc;
margin-right: 5px;
}
#nav li ul {
position: absolute;
}
#nav li ul li {
display: block;
}
#nav li ul li a {
padding: 0px 10px;
height: 20px;
text-align: left;
background: #999;
}
Thanks for any help, Mike.
An easy way to fix this is adding a nowrap property to #nav li ul li a:
#nav li ul li a {
padding: 0px 10px;
height: 20px;
text-align: left;
background: #999;
white-space: nowrap; /* Forbids text wrapping */
}
Related
I am learning HTML5 and CSS. So my question is probably very basic and very naive. My apology for that.
To practice I am developing a header menu with drop down sub menu. The problem that I am experiencing is that even though I set up the display value of the sub-menu to block so that the sub-menu drops down vertically but now it drops horizontally.
html file :
<nav>
<ul>
<li>Home</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>Woman</li>
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
<li>
<li>Contact Us</li>
</ul>
</nav>
here is the css code:
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover + ul li{
display: block;
}
nav ul li:hover{
background-color: #223433;
color:#f0f1f5;
}
I was wondering if some body could help me out what is wrong with my code? It is really appreciated.
The corrections are.
The issue was because the li tag were all float:left, this caused even the dropdown elements to be horizontal. So I created a class .dropdown to reset the float to none.
CSS:
.dropdown li {
float: none;
}
The dropdown ul tag, will still cause issues with the layout because you are not setting it to absolute position which will keep it separate from the navbar and show it as a floating (not CSS float) kind of element. Then the ul.dropdown needs to be placed inside the parent li element. This will allow us to position the absolute element according to the parent li element.
CSS:
nav ul li {
float: left;
position:relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left:0px;
}
On hovering the a tags were also in black which made the label dissapear. I recommend adding the CSS below, which will set the a tag to white color, on hover alone.
CSS:
nav ul li:hover > a {
color: white;
}
Finally below is a working example of the code.
nav {
height: 40px;
width: 960px;
display: block;
margin: 0, auto;
text-align: center;
text-transform: uppercase;
}
nav a {
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
position: relative;
width: 140px;
height: 40px;
line-height: 40px;
background: #fc575e;
}
nav ul li ul li {
position: relative;
display: none;
}
nav ul li:hover>a {
color: white;
}
nav ul li:hover ul li {
display: block;
}
nav ul li:hover {
background-color: #223433;
color: #f0f1f5;
}
.dropdown {
position: absolute;
top: 100%;
left: 0px;
padding-left: 0px;
}
.dropdown li {
float: none;
}
<nav>
<ul>
<li>
Home
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
Woman
<ul class="dropdown">
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
1.Avoid the plus (+) sign in nav ul li:hover + ul li{display: block;} style.
2.Add one more style nav ul li ul {padding-left: 0px;}
3.li tag of Home and Woman close after dropdown list items. i.e,
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
Corrupted code:
<html>
<head>
<style>
nav{
height:40px;
width: 960px;
display: block;
margin: 0,auto;
text-align: center;
text-transform: uppercase;
}
nav a{
display: block;
text-decoration: none;
font-size: 13px;
color: #112233;
}
nav ul{
list-style: none;
}
nav ul li{
float:left;
width:140px;
height:40px;
line-height: 40px;
background: #fc575e;
}
nav ul ul li{
position: relative;
display: none;
}
nav ul li:hover ul li{
display: block;
}
nav ul li:hover{
background-color: #e3b0b2;
color:#f0f1f5;
}
nav ul li ul{
padding-left: 0px;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Home
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>Woman
<ul>
<li>All</li>
<li>New Arrival</li>
<li>Casual</li>
<li>Gown</li>
<li>Bridesmade</li>
</ul>
</li>
<li>
<li>Contact Us</li>
</ul>
</nav>
</body>
</html>
I want move objects to the right but don't know how!? Any idea?
. Please help me. Here is the code in HTML and CSS
/*=====================================
= Top Bar
=====================================*/
#top-bar {
height: 42px;
line-height: 40px;
background: #f9f9f9;
color: #888;
font-size: .857em;
border-bottom: 1px solid #f5f5f5;
}
.top-nav ul li {
display: block;
float: left;
}
.top-nav ul {
margin: 0;
padding: 0;
}
.top-nav {
font-family: "Montserrat",Open Sans,Sans-serif;
}
.top-nav ul li a {
color: #111;
text-decoration: none;
display: inline-block;
padding: 0 15px;
line-height: .917em;
color: #888;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .5px;
font-size: .917em;
border-right: 1px solid #eee;
}
.top-notification {
float: right;
}
.top-notification p {
margin: 0;
float: left;
font-size: 13px;
}
.top-notification a {
color: #111;
text-decoration: none;
/* display: inline-block; */
padding: 5px 9px;
line-height: .917em;
color: #888;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .5px;
font-size: .917em;
border: 1px solid #D1D1D1;
margin-left: 22px;
background:#fff;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
}
nav ul li a:link {
display: inline-block;
padding: 15px 25px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
text-decoration: none!important;
color: #fff;
width:100%;
}
nav ul li a {
color: #fff!important;
}
nav a:hover {
background-color: #2da399;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
z-index: 1000;
background: #494949;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width:170px;
float:none;
display:list-item;
position: relative;
}
nav ul ul a:hover {
background-color: #656565;
}
/* Change this in order to change the Dropdown symbol */
nav li > a:after { content: ' +'; }
nav li > a:only-child:after { content: ''; }
.menu {
width: 1200px;
margin: auto;
z-index: 99999;
background: #2da399;
}
.menu.cloned {
width: 100%!important;
left: 0!important;
}
.menu.cloned nav {
width: 1200px;
margin: auto;
}
Here is HTML codes for my website. I think every thing in is fine here and the problem is in CSS codes.
<!--Main Navigation-->
<div class='menu-wrapper'>
<div class='menu'>
<nav>
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/kontakta-mig.html'>Hem</a></li>
<li><a href='#'>Nyheter </a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/afghanistan.html'>Afghanistan</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/sverige-och-e.html'>Sverige</a></li>
<li><a href='#'>Världen</a></li>
</ul>
</li>
<li><a href='#'>Vetenskap
</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://www.facebook.com/thevoiceofafghanistan/'>Kemi
</a></li>
<li><a href='#'>Fysik </a></li>
<li><a href='#'>Matte</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href=''>Matte 1</a></li>
<li><a href='#'>Matte 2</a></li>
<li><a href='#'>Matte 3</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href='#'>Matte 4</a></li>
<li><a href='#'>Hjälpmedel
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>فناوری </a></li>
<li><a href='#'>اجتمائی </a></li>
<li><a href='#'> سیاست</a></li>
<li><a href='#'>تاریخ </a></li>
<li><a href=''>کلاس ها</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/'>صفحه اصلی </a></li>
</ul>
</nav>
</div>
</div>
This is menu bar
You should add some margin-left to your css. As you have not provided your full HTML I cannot say which attribute exactly needs the stylling.
I think you should add margin-left to your menus to increase space between them or to the parent div for shifting the whole navbar to the right. Hope this helps!
I'm going to assume that when you ask how to move them to the right that the ultimate goal is to center the navigation elements inside the blue-green field that is <nav>.
You might also be asking to align the navigation items to the right side of the blue-green field, I've addressed that in my second code snippet.
Center Nav Items
A common way to center something is to move it to the left by 50% and then pull it back 50% of it's width with transform. In order for this to work you'll need to make your <ul> not take up 100% of its parent element. You can do this a number of ways, for simplicity I have set it to display: inline-block;.
This solution will allow you to add/remove <li> and still be centered in <nav>.
nav ul {
display: inline-block;
position: relative;
left: 50%;
padding: 0;
margin: 0;
transform: translateX( -50%);
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a:link {
display: inline-block;
padding: 15px 25px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
text-decoration: none !important;
color: #fff;
}
nav ul li a {
color: #fff !important;
}
nav a:hover {
background-color: #2da399;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
z-index: 1000;
background: #494949;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul a:hover {
background-color: #656565;
}
/* Change this in order to change the Dropdown symbol */
nav li>a:after {
content: ' +';
}
nav li>a:only-child:after {
content: '';
}
.menu {
width: 1200px;
margin: auto;
z-index: 99999;
background: #2da399;
}
<!--Main Navigation-->
<div class='menu-wrapper'>
<div class='menu'>
<nav>
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/kontakta-mig.html'>Hem</a></li>
<li><a href='#'>Nyheter </a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/afghanistan.html'>Afghanistan</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/sverige-och-e.html'>Sverige</a></li>
<li><a href='#'>Världen</a></li>
</ul>
</li>
<li><a href='#'>Vetenskap
</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://www.facebook.com/thevoiceofafghanistan/'>Kemi
</a></li>
<li><a href='#'>Fysik </a></li>
<li><a href='#'>Matte</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href=''>Matte 1</a></li>
<li><a href='#'>Matte 2</a></li>
<li><a href='#'>Matte 3</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href='#'>Matte 4</a></li>
<li><a href='#'>Hjälpmedel
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>فناوری </a></li>
<li><a href='#'>اجتمائی </a></li>
<li><a href='#'> سیاست</a></li>
<li><a href='#'>تاریخ </a></li>
<li><a href=''>کلاس ها</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/'>صفحه اصلی </a></li>
</ul>
</nav>
</div>
</div>
I noticed you included a little more CSS than what was being used by your markup so I removed it.
Align Nav Items to Right
If you are looking to align the navigation to the right side instead of the left side you can float the <ul> to the right. The only catch here is that you will need to clear the float so you can see the background color of .menu. I used the poor man's clearfix, overflow: hidden; but you could use the more modern option of the Micro Clearfix.
nav ul {
float: right;
display: inline;
position: relative;
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a:link {
display: inline-block;
padding: 15px 25px;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
text-decoration: none !important;
color: #fff;
}
nav ul li a {
color: #fff !important;
}
nav a:hover {
background-color: #2da399;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
z-index: 1000;
background: #494949;
}
/* Display Dropdowns on Hover */
nav ul li:hover>ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
min-width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul a:hover {
background-color: #656565;
}
/* Change this in order to change the Dropdown symbol */
nav li>a:after {
content: ' +';
}
nav li>a:only-child:after {
content: '';
}
.menu {
width: 1200px;
margin: auto;
z-index: 99999;
background: #2da399;
overflow: hidden; /* Clearfix that allows the background of <nav> to be seen with floated child elements. */
}
<!--Main Navigation-->
<div class='menu-wrapper'>
<div class='menu'>
<nav>
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/kontakta-mig.html'>Hem</a></li>
<li><a href='#'>Nyheter </a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/afghanistan.html'>Afghanistan</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/p/sverige-och-e.html'>Sverige</a></li>
<li><a href='#'>Världen</a></li>
</ul>
</li>
<li><a href='#'>Vetenskap
</a>
<!-- First Tier Drop Down -->
<ul>
<li><a href='https://www.facebook.com/thevoiceofafghanistan/'>Kemi
</a></li>
<li><a href='#'>Fysik </a></li>
<li><a href='#'>Matte</a>
<!-- Second Tier Drop Down -->
<ul>
<li><a href=''>Matte 1</a></li>
<li><a href='#'>Matte 2</a></li>
<li><a href='#'>Matte 3</a>
<!-- Third Tier Drop Down -->
<ul>
<li><a href='#'>Matte 4</a></li>
<li><a href='#'>Hjälpmedel
</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>فناوری </a></li>
<li><a href='#'>اجتمائی </a></li>
<li><a href='#'> سیاست</a></li>
<li><a href='#'>تاریخ </a></li>
<li><a href=''>کلاس ها</a></li>
<li><a href='https://thevoiceofafghanistan.blogspot.se/'>صفحه اصلی </a></li>
</ul>
</nav>
</div>
</div>
Just set your nav ul li width to 100/number of items. and it will spread your menu items equally across the bar, removing the gap on the right as much as possible.
You can remove the space between inline block elements as you like by setting margin-right property accordingly.
Replace old nav ul li with this code:
nav ul li {
display:inline-block;
background-color: #2da399;
width:11%;
margin-right: -4px;
}
Doing the menu this way will allow your menu to wrap into various screen widths fully.
I am trying to create a horizontal navigation that when you rollover the root items the sub pages and their sub pages are shown below but in a 3 or 4 column layout. I have experimented with the css "column count" but it is not giving me consistent results. I am wondering if anyone has come across this before or could point me in the right direction.
<ul id="nav">
<li class="nonActive rootNav" id="rootNav1">
for Residents
<ul>
<li><a href="/for-residents/history-of-smithville/">History of
Smithville</a></li>
<li>Mission and Vision</li>
<li>Alerts</li>
<li>FAQs</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav2">
for Business
<ul>
<li>Film Commission</li>
<li>Comprehensive Plan</li>
<li>Chamber of Commerce</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav3">
our Community
<ul>
<li>Calendar</li>
<li>News</li>
<li><a href="/our-community/memorial-park-project/">Memorial Park
Project</a></li>
<li>City Maps</li>
<li>Airport</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav4">
city Departments
<ul>
<li>Police Department</li>
<li>Fire Department</li>
<li>Parks and Rec</li>
<li>Public Library</li>
<li>
Utilities
<ul>
<li>Pay online</li>
</ul>
</li>
<li>Public Works</li>
</ul>
</li>
<li class="nonActive rootNav" id="rootNav5">
city Government
<ul>
<li>
City Council
<ul>
<li><a href=
"/city-government/city-council/city-council-meeting-minutes/">City Council
meeting minutes</a></li>
</ul>
</li>
<li>City Manager</li>
<li>City Staff</li>
<li>
Municipal Court
<ul>
<li><a href="/city-government/municipal-court/municipal-judges/">Municipal
Judges</a></li>
<li><a href="/city-government/municipal-court/open-warrants/">Open
Warrants</a></li>
</ul>
</li>
</ul>
</li>
</ul>
body {
margin: 0px;
}
ul#nav {
margin: 0px;
padding: 0px;
}
ul#nav li {
list-style-type: none;
display: inline;
position: relative;
float: left;
}
ul#nav li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
}
ul#nav li ul {
display: none;
position: absolute;
width: 750px;
margin: 0px 0px 0px -40px;
clear: both;
columns:200px 3;
-webkit-columns:200px 3; /* Safari and Chrome */
-moz-columns:200px 3; /* Firefox */
}
ul#nav li:hover ul {
display: block;
}
ul#nav li ul li {
clear: left;
display: block;
float: none;
}
ul#nav li ul li ul {
margin: 0px;
padding: 0px 0px 0px 10px;
position: relative;
}
ul#nav li ul li ul li {
clear: both;
display: block;
}
Here is my fiddle
fiddle
Here are a few examples of what I am trying to achieve.
Hm, based on your JSFiddle, I'm assuming the problem you're facing right now is that all of the submenus are lined up with the menu item that causes them to appear, and you want them aligned to only the left. You could achieve this through removing the relative positioning on <li> elements, and using left:0 on the submenus to put them where you want them.
So, your CSS adjustments would look like:
ul#nav li {
/* position:relative; */
}
ul#nav li ul {
left:0;
}
Here's a JSFiddle to show you how that look. Hope this helps! Let me know if you have any questions.
I'm sure there are plenty of ways to tackle this with a ton of different options - but here's one approach I worked with
#nav {
position: relative;
float: left;
}
#nav > li {
width: 20%;
}
ul, li {
margin: 0px;
padding: 0px;
list-style-type: none;
width: 100%;
float: left;
}
ul li a {
display: block;
padding: 10px;
background-color: #EAEAEA;
border: 1px solid #000000;
text-decoration: none;
}
ul li ul {
position: absolute;
top: 40px;
left: 0;
display: none;
}
ul li:hover > ul {
display: block;
}
/* The Rest for example purposes */
ul li ul li {
width: 25%;
}
ul li ul li a {
background: #ddd;
border: none;
}
With skipping the relative positioning on the first li children, the second level of ul's can inherit the width of the top level ul.
# http://jsfiddle.net/PqhEs/
Organized it a little differently - It all depends on how you'd want to group items in your sub sub pages, right now in the fiddle they just inherit the sub navigation's styles, but you could remove the float and adjust the width to have them list like the example.
I'm using float: right for my horizontal menu (.drop_menu li) as I want the menu to be aligned to the right side of the screen (and logo to the left side). It works OK, the only issue is that my menu items are now in the wrong order (Link 3 then Link 3 then Link 1 instead of the opposite). Is there a way to fix that?
Many thanks
http://jsfiddle.net/eLSbq/
<div class="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
.header {
width: 100%;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
height: 120px;
display: table;
position: fixed;
z-index: 999999;
opacity: 0.7;
background: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}
.drop_menu {
padding:0;
margin:0;
list-style-type:none;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
.drop_menu li { display: table-cell;
vertical-align: middle; float: right;}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
Remove float:right from li which prevent the reverse order.
Add float:right to the ul's .dropdown class which put your entire menu at right side.
Add float:left to the li which helps your sub-menu to stay align.
.drop_menu {
float: right;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
float:left;
}
Js Fiddle Demo
flex solution:-
This is what worked for me:
ul {
display: flex;
justify-content: flex-end;
}
ul li {
outline: 2px violet solid;
display: list-item;
list-style: none;
padding: 10px;
margin: 0 5px;
}
ul li:hover {
outline: 2px deeppink solid;
cursor: pointer;
}
<div>
<h1>Hello World....</h1>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Baz</li>
</ul>
</div>
Here is the fiddle: https://jsfiddle.net/appsparkler/emjst7f3/4/
Good Luck...
Add one more div around menu items and set float to right
<div style='float:right'>
<!-- put menu controls here -->
</div>
Remove float right from following class
.drop_menu li { display: table-cell;
vertical-align: middle;}
for demo click on jsfiddle link
Try this...
.drop_menu li { display: table-cell;
vertical-align: middle; float: left;
}
It results in LINK 1 LINK 2 LINK 3 order and reduce the width of submenu links.
It works.
Float the <ul> to the right, then float its <li> elements to the left.
I have this site here http://surfthecurve.ca/ and I have a navigation for each nav item there is a drop down menu, the menu works fine, I just cant seem to get it to go vertically.
Here is the CSS for the navigation
.navigation{
width:100%;
background-color:#353636;
font-size:18px;
float:left;
}
.navigation ul {
list-style-type: none;
margin: 0 auto;
width:825px;
}
.navigation li {
float: left;
}
.navigation ul a {
color: #ffffff;
display: block;
padding: 0 105px 0 0;
text-decoration: none;
width:100%;
text-align:center;
text-transform:uppercase;
}
and the CSS for the drop-down
.submenu {
display: none;
}
.submenu li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap;
}
.navigation li:hover .submenu {
display: block;
position: absolute;
}
.navigation li:hover .submenu li {
float: left;
font-size: 13px;
}
ul li a:hover {
background: #353636;
}
li:hover a {
background: #353636;
}
li:hover li a:hover {
background: #353636;
}
.navigation ul li ul li a{
padding-left:10px !important;
padding-right:10px !important;
padding-top:0px !important;
padding-bottom:0px !important;
}
and here is the HTML
<div class="navigation">
<ul>
<li>tutoring
<ul class="submenu">
<li>Our Approach</li>
<li>Pricing</li>
</ul>
</li>
<li>the cause
<ul class="submenu">
<li>How It Works</li>
<li>How We Give</li>
<li>Why We Give</li>
</ul>
</li>
<li>company
<ul class="submenu">
<li>About Us</li>
<li>Let's Get In Touch</li>
</ul>
</li>
<li>get involved
<ul class="submenu">
<li>Students</li>
<li>Work For Us</li>
</ul>
</li>
</ul>
</div><!--navigation-->
How would I fix this for my menu goes vertically?
Thanks in advanced,
J
This should be easy enough to get it to display vertically:
.submenu li {
clear: both;
}
What you have to do now is style it, as the individual li elements are different sizes (the element shrink wraps to the size of the text).