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!
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've been trying to work on this with no success, for some reason the sub list is just not showing up! I've tried: nav > ul > li:hover > ul{} but that seems to break functionality of the code. I'm sure this is a pretty simple issue I'm having.
nav > ul {
list-style: none;
}
nav > ul > li {
padding: 20px;
float: left;
}
nav > ul > li {
background-color: #fff;
}
nav > ul > ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav > ul > ul > li {
float: none;
width: 200px;
}
nav > ul > li:hover {
color: #4169E1;
display: block;
visibility: visible;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure</li>
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
<li>Mad</li>
</ul>
</nav>
Simplify your selectors (nav ul ul) is fine
Make the parent li's position: relative so that the position: absolute dropdowns are positioned in relation to them. Use an appropriate top value
In your example, visibility: visible is not doing anything. display: none and display: block are used to hide / show
Nest your lists properly. This is the correct way:
<ul>
<li>Top Menu Item
<ul>
<li>Sub-menu Item</li>
</ul>
</li>
</ul>
Read more: Nested lists on w3.org
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
padding: 20px;
float: left;
background-color: #fff;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
}
nav ul ul li {
width: 200px;
background: #FFF;
padding: 10px;
}
nav ul li:hover ul {
color: #4169E1;
display: block;
}
body {
background: black;
}
<nav>
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
<li>This is us!</li>
</ul>
</li>
<li>Secure
<ul>
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
</nav>
To Point out one of the Mistakes you have
<ul>
<li>Home</li>
<li>About Us</li>
<li>Secure
<ul> **--> this should be inside li**
<li>How secure are we?</li>
<li>We are not secure enough!!</li>
</ul>
</li>
<li>Mad</li>
</ul>
and your css
add this
nav > ul > li:hover > ul{
display: block;
opacity: 1;
visibility: visible;
}
check the fiddle
http://jsfiddle.net/ruchan/4fk6y2wu/
Use some more css3 power!
See Demo here
See Fullscreen
<nav>
<ul id="menu">
<li class="category top_level"><a class="selected" href="#">Home</a></li>
<li class="category top_level">About</li>
<li class="category top_level">Secure
<ul class="dropdown">
<li class="item">How secure are we?</li>
<li class="item">We are not secure enough!!</li>
</ul>
</li>
<li class="category top_level last">Mad
</li>
</ul>
</nav>
css
body {
font-family:'Montserrat', sans-serif;
background:#000;
}
ul {
list-style-type: none;
}
#menu a {
text-decoration: none;
white-space: nowrap;
color: #222;
background-color: #fff;
}
#menu li.top_level {
vertical-align: top;
zoom: 1;
display: block;
float: left;
width: 16.5%;
margin-right: 0.2%;
position: relative;
text-align:center;
}
#menu li.last {
margin-right: 0px;
}
#menu .dropdown {
float: none;
z-index: 100;
position: absolute;
width: 100%;
height: 0;
overflow: hidden;
}
#menu .category:hover .dropdown, #menu .category:focus .dropdown {
height:auto;
}
#menu .item a, #menu .category a, #menu .category a:visited, #menu .item a:visited {
line-height:2em;
display:block;
padding:.6em;
border-top: #ffffff 2px solid;
}
#menu .item a:hover, #menu .category a:hover, #menu .item a:focus, #menu .category a:focus {
background:#007dac;
-webkit-transition: background-color 940ms;
-moz-transition: background-color 940ms;
}
#menu a.selected {
color: #ffffff;
background-color: #007dac;
}
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!
Check out the JSFiddel Here
I have a CSS Based dropdown menu that drops down on hover but all lists displayed on hover are in the same location, not under the menu item they are associated with. I believe the problem lies with this part of the code...
#menu ul li {
}
but even when I edit this and take away the float I can't seem to figure it out. Maybe someone can point out the mistake I've made. Thanks in advance for the help.
CSS
#menu ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu ul li {
display: block;
position: relative;
float: left;
}
#menu li ul {
display: none;
}
#menu ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
#menu ul li a:hover {
background: #3b3b3b;
}
#menu li:hover ul {
display: block;
position: absolute;
}
#menu li:hover li {
float: none;
font-size: 11px;
}
#menu li:hover a { background: #3b3b3b; }
#menu li:hover li a:hover {
background: #1e7c9a;
}
HTML
<ul id="menu">
<li>Find Us
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Our Menu
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Our Story
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
http://jsfiddle.net/UfpCm/1/
Use inline-block on #menu li.
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).