I’m trying to figure out how to reposition the entire <ul> element to the center of the screen, yet every time I try a new method the drop-down items get jumbled up by either shifting slightly to the right or they lay on top of one another.
Can someone lend a hand, let me know what I’m doing wrong and give me some tips to make it a bit easier?
Here’s what I’m working with.
html,
body {
margin: 0px;
padding: 0px;
}
.menu ul {
/*This is blank because nothing I tried works*/
}
ul {
list-style: none;
font-family: cursive;
margin: 0;
padding: 0;
}
ul li {
float: left;
display: block;
height: 50px;
width: 200px;
background-color: lightgray;
}
ul li a {
display: block;
color: black;
text-decoration: none;
line-height: 50px;
text-align: center;
}
ul li a:hover {
background-color: lightblue;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<title>Test</title>
</head>
<body>
<div class="menu">
<ul>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>About</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</body>
</html>
ul {
display: flex;
justify-content: center;
}
Add this code to your UL tag, it should center the whole thing
Related
Still learning css...
I've just got one major issue..
My nav-bar is currently squished. I'm not sure how to space out the text away from each other to go wider, so it takes up more space.
I have tried using the following (got it from similar post as mine):
justify-content: space-between
but that didn't work.
Lastly, (just a random trick Id like to learn )if you know how to do it..
How would I separate the two sides from the logo to be pushed away to left and right? As an example..
All content from the left side of the logo, is showing from the edge of the left screen and vice versa for the right side. But the logo remains in the middle. And all text remains horizontal.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav a{
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="styling.css" type="text/css">
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
</body>
<script src="app.js" charset="utf-8"></script>
</html>
In order to use justify-content, you need to set display: flex on the parent element first. I'd also suggest not to use justify-content: space-between but justify-content: space-around while resetting the default left padding of the <ul> to get even spacing. Alternatively, set the right padding to an equal value while using justify-content: space-between.
In order to have the logo take up more space and the menu items to be "pushed" to the sides, just set the logo's <li> to something like 50% width, flex layout will take care of the rest. I added a class "logo" to the element in order to achieve that.
Update: About keeping the menu items centered horizontally, you can achieve that by using align-items: center on the flex container.
Update2: I've also added in an example pushing the items as far to the sides as possible by setting the logo width to 100% and a margin of 10px between the elements, as well as a 15px padding to the menu bar itself.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px 0 20px 0;
}
.nav ul {
display: flex;
justify-content: space-around;
padding: 0;
}
.nav li{
list-style: none;
display: inline-block;
}
.nav2 .logo {
width: 50%;
}
.nav3 {
padding: 15px;
}
.nav3 .logo {
width: 100%;
}
.nav3 li {
margin-left: 10px;
}
.nav3 li:first-child {
margin-left: 0px;
}
.nav4 ul {
align-items: center;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the menu items aside:</p>
<div class="nav nav2">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Pushing the items as far aside as possible, with a fixed-width spacing:</p>
<div class="nav nav3">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
<p>Nav items centered horizontally:</p>
<div class="nav nav4">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class="logo"><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</div>
In this case .nav ul has been set as a flex-container with display:flex;
Rather than using space-around, I have added a class to the logo and set the flex property to 1 (flex: 1). This pushes the left/right nav items apart and the logo expands to take up the remaining space.
.nav li items has been given a bit of padding so they aren't squished together.
body {
margin: 0;
padding: 0;
font-family: "Arial", serif;
}
img{
height: 30px;
}
.nav {
background-color: rgb(235, 235, 235);
list-style: none;
text-align: center;
padding: 20px;
}
.nav ul {
display:flex;
align-items:center;
margin:0;
padding:0;
}
.nav li{
list-style: none;
display: inline-block;
padding:0 10px;
}
.logo {
flex:1;
}
.nav a{
text-decoration: none;
}
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li class='logo'><img src="logo.png"></li>
<li>Services</li>
<li>News</li>
<li>Contact</li>
</ul>
</ul>
</div>
I tried placing two nav bars under each other but I am facing difficulty in aligning the second nav bar in respect to the first one. I didn't quite understand why the second nav bar does'nt float right.
Below are my html and css codes.
.header_nav1 {
display: block;
float: right;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width: 1024px;
}
.header_nav1 ul li {
padding-top: 10px;
padding-right: 10px;
list-style-type: none;
display: inline;
}
.header_nav2 {
display: block;
padding: 50px;
}
.header_nav2 ul li {
display: inline;
list-style-type: none;
float: right;
padding-right: 15px;
max-width: 1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
Thank you.
I found out that it is caused by the container class.
You can either remove the container or change float: right to display: inline-block
Don't use float:right instead use display:inline
why inline? inline - basically it starts with new line and occupy the whole parent size
I also combine both header_nav1 and header_nav2 on 1 CSS since both of it has the same layout
Here, check the snippet codes below and try seeing it also in full page. Hope it helps.
.header_nav1, .header_nav2 {
display: inline;
color: #000;
font-family: verdana;
text-transform: uppercase;
max-width:1024px;
}
.header_nav1 ul li{
padding-top: 10px;
padding-right:10px;
list-style-type: none;
display: inline;
}
.header_nav2 ul li{
display: inline;
list-style-type: none;
padding-right:15px;
max-width:1024px;
}
<header class="header_navigation">
<div class="container">
<nav class="header_nav1">
<ul>
<li>Contact</li>
<li>Search</li>
</ul>
</nav>
<nav class="header_nav2">
<ul>
<li>INVESTORS</li>
<li>CAREER</li>
<li>OUR PORTFOLIO</li>
<li>RETAIL SOLUTIONS</li>
</ul>
</nav>
</div>
</header>
I'm trying to create a dropdown menu that drops down from a link in a navigation bar when hovered over. I'm not sure how to hide the list of links in the dropdown and then have them appear when the proper link is hovered over. Any help would be appreciated.
My HTML thus far
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products <!-- link that creates dropdown menu -->
<ul class="dropdown"> <!-- dropdown menu list -->
<li>Engineering</li>
<li>Technical</li>
<li>Other</li>
</ul>
</li>
<li>Something</li>
<li>Last</li>
</ul>
</nav>
</body>
</html>
My CSS thus far
body {
margin: 0;
}
nav {
background-color: green;
}
a {
text-decoration: none;
color: white;
}
ul {
list-style: none;
text-align: center;
}
li {
display: inline-block;
padding-right: 10px;
}
a:hover {
color: yellow;
}
.dropdown {
display: none;
}
The general idea is to assign a CSS class to the hover event of the main nav elements, so that if a nav element is hovered and that nav element has a nested menu, display the nested menu on hover.
Here is a working demo.
* {margin:0;padding:0;}
body {
margin: 0;
}
nav {
background-color: green;
}
a {
text-decoration: none;
color: white;
display: block;
}
ul {
list-style: none;
text-align: center;
}
li {
display: inline-block;
padding-right: 10px;
position: relative;
}
a:hover {
color: yellow;
}
.dropdown {
display: none;
}
li:hover .dropdown {
display: block;
position: absolute;
}
ul ul a {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Dropdown Menu</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products <!-- link that creates dropdown menu -->
<ul class="dropdown"> <!-- dropdown menu list -->
<li>Engineering</li>
<li>Technical</li>
<li>Other</li>
</ul>
</li>
<li>Something</li>
<li>Last</li>
</ul>
</nav>
</body>
</html>
Try use this:
ul{
padding: 0;
list-style: none;
background: green;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #fff;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #000;
}
ul li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
background: green;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;}
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾ <!-- link that creates dropdown menu -->
<ul class="dropdown"> <!-- dropdown menu list -->
<li>Engineering</li>
<li>Technical</li>
<li>Other</li>
</ul>
</li>
<li>Something</li>
<li>Last</li>
</ul>
</nav>
I'm a total newbie to CSS and HTML but I'm slowly constructing a website for uni. One thing that's bugging me: I can't figure out how to align the dropdown options. They're slightly off-centre, as shown in the screenshot
here. I'll paste the actual CSS below too (the preview doesn't work so don't bother with that. The code actually does work when run in Brackets, however):
ul {
list-style: none;
padding: 0px;
margin: 0px;
position: absolute;
padding-left: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #ed85c4;
text-align:center;
}
li ul {
display: none;
}
ul li a {
display: block;
background: #ffeff8;
padding: 4px 20px 2px 25px;
text-decoration: none;
white-space: nowrap;
color: #ed85c4;
font-family: Luna;
font-size: 14px;
}
ul li a:hover {
background: #f1dae8;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #ffeff8;
color: #ed85c4
}
li:hover li a:hover {
background: #f1dae8;
color: #d771ae
}
li:hover li {
color:#d771ae
}
#drop-nav li ul li {
border-top: 0px;
}
ul {
display:table;
margin:auto;}
}
And here's the html (ignore that the links are currently empty):
<!DOCTYPE html>
<html>
<head><meta charset="UF-8">
<title>Happea Organic Restaurant</title>
<link href="style.css" rel ="stylesheet" type ="text/css">
</head>
<body>
<center><img src="images/eskimoo.png" width="600"></center>
<ul id="drop-nav">
<li>home</li>
<li>about
<ul>
<li>history</li>
<li>values</li>
<li>the truck</li>
<li>produce info.</li>
</ul>
</li>
<li>menus
<li>events
<ul>
<li>upcoming</li>
<li>past</li>
<li>booking/hiring</li>
</ul>
</li>
<li>find us
<ul>
<li>truck tracker</li>
<li>offices</li>
</ul>
</li>
<li>contact
<ul>
<li>message us</li>
<li>newsletter</li>
</ul>
</li>
<li>extras
<ul>
<li>gallery</li>
<li>competitions</li>
<li>mascot</li>
</ul>
</li>
</ul>
<br><br>
<c><img src="images/pad.png" width=1000></c>
</body>
<br><br><br>
</html>
Thanks in advance!
I have a menu. I need to show the submenus when I mouse hover on them. I have some code as follows. But the submenus overlaps with existing menu.
Following is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: 30px;
}
#menu a {
display: block;
width: 140px;
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I need some effect like this.
How can I make it.
You've set left: -10px on #menu ul.sub-menu, which is why it's overlapping #menu. You should set that to a value that'll move it far enough to the right for your purposes, perhaps left: 140px since that's the width of the menu div.
I think you're looking for something called a "navigation rollover with dropdowns".
This is one of the best implementations that you can find - adapt and use as necessary:
http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170
And, to see if it's worth what trying, this is the end result:
http://jorenrapini.com/posts/css-rollovers/post2.html
Good luck!