I am attempting to create a drop down menu bar for the "Our Collections" but my attempts are not working. Can anyone lend me a hand please. Below is my html and the css for it. I have removed my random trial and errors for it, and kept .menu ul ul {display:none}
* html .clearfix {
height: 1%;
overflow: visible;
}
* + html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
body {
margin: 0;
padding: 0;
}
.menu {
text-align: center;
background-color: #222;
}
.menu ul {
list-style: none;
height: auto;
padding: 40px;
width: 500px;
float: right;
}
.menu ul li {
float: left;
padding: 0 20px;
font-size: 20px;
font-family: Impact;
}
.menu ul ul {
display: none;
}
.menu ul li a {
color: white;
text-decoration: none;
transition: 350ms;
}
.menu ul li a:hover {
color: #ed702b
}
.title {
float: left;
font-size: 40px;
margin-left: -173px;
margin-top: 37px;
}
.title a {
text-decoration: none;
color: white;
}
.center {
width: 980px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" type="text/css" href="includes/site.css">
<title>Home</title>
</head>
<body>
<div class="menu">
<div class="center clearfix" style="height: 124px">
<h1 class="title">My first web</h1>
<ul class="clearfix">
<li>Home
</li>
<li>Our Collections
</li>
<ul>
<li>First Collection
</li>
<li>Second Collection
</li>
</ul>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</body>
</html>
I got an old menu I made a long time ago.
I think you can work from this: Fiddle
Link 3 is the dropdown menu. Just look at the Fiddle
<div id="mainnav">
<nav>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>2011</li>
<li>2012</li>
<li>2013</li>
</ul>
</li>
<li>link4</li>
<li class="end">link5</li>
</ul>
</nav>
</div>
If you need more help just say so.
I threw this together really quick for you as well. It's nothing elegant, but it's a great starting point and uses your original skeleton for your menu
Link to the fiddle:
http://jsfiddle.net/Lgpapw2p/
<ul class='menu'>
<li>
Home
</li>
<li>
Our Collections
<ul>
<li>First Collection</li>
<li>Second Collection</li>
</ul>
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
</ul>
.menu{
list-style:none;
font-weight:bold;
margin-bottom:10px;
float:left;
width:100%;
}
.menu li{
float:left;
margin-right:10px;
position:relative;
}
.menu a{
display:block;
padding:5px;
color:#fff;
background:#333;
text-decoration:none;
}
.menu a:hover{
color:#fff;
background:#6b0c36;
text-decoration:underline;
}
.menu ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
.menu ul li{
padding-top:1px;
float:none;
}
.menu ul a{
white-space:nowrap;
}
.menu li:hover ul{
left:0;
}
.menu li:hover a{
background:#008;
text-decoration:underline;
}
.menu li:hover ul a{
text-decoration:none;
}
.menu li:hover ul li a:hover{
background:#333;
}
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'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!
Screenshot of the header that's needing this work:
As you can see, the menu is below the logo. I was wanting the menu beside it, to the right of the logo. I don't know if it's possible, but if it is, I could use some help, please.
Here's the code for everything, separated for your convenience.
The menu and logo in their divs:
<div id="wrapper">
<div id="body-wrapper">
<div class="head">
<div class="head-wrapper">
<div class="logo">
<img src="http://i.imgur.com/sDnntOE.png">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
</ul>
</li>
<li>Products
<ul>
<li>Chaotix Browser</li>
<li>Useful Beta 1.7.5</li>
<li>Chaotix Cleaner 1.4</li>
<li>Forum</li>
<li>CDev</li>
<li>Infinite-PVP</li>
<li>Ulta-Craft</li>
</ul>
</li>
<li>Contact Us
<ul>
<li>E-Mail</li>
<li>News Letter</li>
<li>Social Mediar</li>
</ul>
</li>
<li>Divisions
<ul>
<li>Gaming</li>
<li>Films</li>
</ul>
</li>
<li>Chaotix! Forum</li>
<li>Partnerships
<ul>
<li>GameFanShop</li>
<li>Forumotion</li>
</ul>
</li>
</ul>
The CSS:
<style>
*{
background-image:url('http://i.imgur.com/0u7sBsT.png');
background-color:#999999;
font-family:Tahoma;color:white;
}
div.head{
text-align:Center;
padding-top:10px;
}
div.body{
padding-top:100px;
padding-left:300px;
padding-right:300px;
text-align:center;
}
div.logo{
float:left;
}
a{
color:white;
}
a:hover{
color:gray;
}
/* Main menu
------------------------------------------*/
ul{
font-family: Lato,Tahoma,Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
padding-left:25px;
}
ul li{
display: block;
position: relative;
float: left;
}
li ul{
display: none;
}
ul li a{
display: block;
text-decoration: none;
color: #FFFFFF;
border-top: 1px solid #000000;
padding: 5px 15px 5px 15px;
background: #000000;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover{
background: #999999;
}
li:hover ul{
display: block;
position: absolute;
}
li:hover li{
float: none;
font-size: 11px;
}
li:hover a{
background: #000000;
}
li:hover li a:hover{
background: #999999;
}
</style>
Add your css
.logo img
{
float:left;
}
.logo ul
{
float:left;
}
It working ok. Hope this help!
I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...
<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
<li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink" id="second"> Second
<div class= "secondsubmenu">
<ul>
..and so on
</ul>
</div>
Right now, my css is looking like
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink:hover
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited
{
background-color:#ADD8E6;
color:#FFFFFF;
}
Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is
.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red;
width : 930px;
height : 25px;
z-index : 10;
}
But now that I added the links (made every list element within an block), firstsubmenu no longer appears.
The css for each link looked something like this
.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.
You can use the below css and create pure css based menu.
Css:
body { padding: 3em; }
#navbar * { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}
#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul {
display:block;
}
#navbar:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
Structure:
<div id="navbar">
<ul>
<li>Home</li>
<li>Abous Us »
<ul>
<li>About us 1</li>
<li>About us 2 »
<ul>
<li>XXX
<li>XXX
<li>XXX
</ul>
</li>
</ul>
</li>
<li>Download</li>
<li>Menus »
<ul>
<li>Menus 1</li>
<li>Menus 2 »
<ul>
<li>Menus 2-1
<li>Menus 2-2
<li>Menus 2-3
</ul>
</li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
jsBin live demo
I had to fix lot of errors in your HTML. Here is the css:
#navbar ul{
list-style:none;
margin:0; padding:0;
display:table;
}
#navbar li{
top:0px;
background:#bbf;
display:inline-block;
width:100px;
}
#navbar li ul li{
display:none;
}
#navbar li:hover li{
display:block;
}
And the fixed HTML:
<div id="navbar">
<ul>
<li>
First
<ul class="firstsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
<li>
Second
<ul class="secondsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
</ul>
</div>
Now, after it works, do with colors whatever you want.
Use also alt tags in your links and images, it improves your SEO and compilance.
I have a website with a drop down navigation bar at the top, I would like to centre the navigation bar, but I can't get it to work, it seems to be stuck to the left side. You can view the website here and I've pasted the code below.
I've been trying to get this to work all day, but I can't see where the problem is. I don't know what more to write, any help would be greatly appreciated.
My style.css:
#menu{
position: absolute;
z-index: 1;
padding:0;
margin: auto;
}
#menu ul{
padding:0;
margin:0;
margin: auto;
text-align: center;
display: inherit;
}
#menu li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#menu li a{
width:100px;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: white;
color: #7B99FF;
font-size: 16px;
}
#menu li a:hover{
color: #000;
}
#menu li .subnav a {
color: #7B99FF;
font-size: 13px;
}
#menu li .subnav a:hover{
color: #000;
font-size: 13px;
}
#menu ul ul{
position: absolute;
top: 30px;
visibility: hidden;
}
#menu ul li:hover ul{
visibility:visible;
}
.subnav {
font-size: 13px;
}
My index.php:
<div id="menu">
<ul>
<li>About me
</li>
<li>Categories
<ul class="subnav">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Archive
<ul class="subnav">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
Remove the 'absolute' position of #menu and give it some width:
#menu{
width:400px;
z-index: 1;
padding:0;
margin: auto;}
If you don't want to set width manually you can wrap your root in a div with style:
text-align:center