I'm confused, why it collapses when the window shrinks horizontally? I've tried to set the width of the div and tried setting display:block. I'm using Bootstrap 3, but I don't think it is relevant.
h1 {
font-family: 'LatoBold';
color: #ff990f;
}
/*---------------------------------- Header ----------------------------*/
#header {
position: relative;
margin-bottom: 1em;
min-width: 100ex;
white-space: nowrap;
}
#header > .inner {
height: 95px;
}
/* njnavbar
************************************/
#header .njnavbar {
position: absolute;
bottom: 0px;
right: 0px;
height: 42px;
min-width: 90ex;
white-space: nowrap;
}
#header .njnavbar * {
font-family: 'LatoBlack', Arial, Verdana, sans-serif;
font-size: 16px;
color: #FFF;
text-transform: uppercase;
text-shadow: #08121b 0px 1px 1px;
}
#header .njnavbar ul {
margin-right: 15ex;
}
#header .njnavbar ul li {
float: left;
line-height: 42px;
margin: 0 10px;
list-style: none;
}
#header .njnavbar ul li.last {
margin-right: 0!important;
}
#header .njnavbar > ul > li > a:hover {
color: #e5ca38;
}
/* Phone Number
************************************/
#header .phone {
position: absolute;
top: 1ex;
margin-top: .5ex;
right: 10px;
padding-left: 30px;
height: 26px;
line-height: 26px;
font-size: 18px;
}
#header .phone strong {
font-family: 'LatoBlack';
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>example.COM</title>
<!-- Bootstrap -->
<link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/fonts.css" type="text/css" />
<link rel="stylesheet" href="assets/css/login.css" type="text/css" />
</head>
<body>
<div id="header"><div class="inner">
<h1>example.COM</h1>
<div class="phone">
For reservations call <strong>888-555-1212</strong> | <strong>888-555-1213</strong>
</div>
<div class="njnavbar" style="min-width:90ex">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>longer choiceasdf</li>
<li>Customers</li>
<li class="last">Contact</li>
</ul>
</div> <!-- /njnavbar -->
</div></div> <!-- /inner /#header -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Problem seems to be related to the float property.
#header .njnavbar ul li {
float: left; /*remove this*/
display: inline-block; /*add this*/
}
Then the white-space: nowrap; on the parent container will start to work properly.
Also be aware of the ex units, it's rarely used, unless you know what you're doing.
Related
I am currently making my first mockup website, fiddled around with making a navbar and having a logo on it. I've managed to do it, but now when I try to add the 'name' onto the navbar it won't show up.
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
height: 70px;
}
.navigation-bar {
background-color: #333;
height: 70px;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
float: right;
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I've tried moving the text around to different places, but it ends up moving the navbar to be under the text.
You have set .navigation-bar ul to be float: right. float removes items from the normal flow of the page, which is why it is leaving your navbar.
You can fix this using flexbox, by adding the following rules to .navigation-bar ul:
.navigation-bar ul{
...
display: flex;
justify-content: right;
}
Here are some extra observations on your code, that are unrelated to the main problem
There are several places where you have hardcoded the height of the navbar - this could instead be replaced with a CSS variable - i.e.
:root{
--navbar-height: 70px;
}
.logo {
height: calc(var(--navbar-height) - 10px);
}
#navigation-container {
height: var(--navbar-height);
}
.navigation-bar {
height: var(--navbar-height);
}
/* etc */
You should try to avoid pixel units where possible as these are not responsive - instead, the preferred unit is rems.
However, in this case I don't actually think you need to set the height - the content inside (i.e. the header, logo and navbar) should instead make the header resize. This is particularly important for responsive pages.
Adapted code:
body {
margin: 0;
padding: 0;
}
.logo {
float: left;
height: 60px;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: auto;
margin: 0 auto;
}
.navigation-bar {
background-color: #333;
width: 100%;
text-align: center;
}
.navigation-bar img {
float: left;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: center;
display: inline-block;
vertical-align: top;
display: flex;
justify-content: right;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
border-right: 1px solid #bbb;
}
.navigation-bar li:last-child {
border-right: none;
}
.navigation-bar li a {
color: whitesmoke;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 5px 15px;
opacity: 0.7;
}
.navigation-bar title {
color: red;
}
#menu {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<title>The Fox Den</title>
</head>
<body>
<!-- logo -->
<img class="logo" src="images/logo.png">
<!-- buttons -->
<div class="navigation-bar">
<div id=navigation-container>
<h1 class="title">The<span>Coffee</span>shop</h1>
<ul>
<li>Home</li>
<li>Menu</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- end of buttons -->
</body>
</html>
I'm having issues trying to align these 2 divs (background and home-card). I changed the html nesting but I can't find the right way to make them stack on top of each other (home-card under background div).
I want the home-card to sit under background, both filling the remaining viewport.
flex-direction: column has no effect and I feel a bit lost to be honest. It is my first time using flexbox from scratch even though I've read about it, I still have troubles when practicing.
As you can see on fullscreen snippet run, these 2 divs are next to each other. I guess flex-grow is causing me layout issues, but I couldn't find a better way to make the background div fill the whole remaining space.
Any help is appriciated. Sorry for posting the whole code but I had to provide you the right context.
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.page-container {
display: flex;
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 25vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 25%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Home Card */
section.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* div.home-card {
background: url(/img/final.svg) no-repeat;
flex-grow: 1;
} */
div.background {
background: url(/img/final.svg) no-repeat;
flex-grow: 1;
background-color: crimson;
}
div.home-card {
display: flex;
}
.author {
background-color: blueviolet;
}
.author h3 {
font-size: 1.5em;
}
#media (orientation: portrait) {
body {
background-size: auto 100vh;
}
}
/* Home Card */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<main class="page-container">
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<div class="background"></div>
<div class="home-card">
<section class="author">
<h3>My name</h3>
</section>
</div>
<!-- Content -->
</main>
</body>
</div>
</body>
</html>
If you just put your background and card in a separate div you can get the desired effect.
<!-- Content -->
<div class="content">
<div class="background"></div>
<div class="home-card">
<section class="author">
<h3>My name</h3>
</section>
</div>
</div>
<!-- Content -->
CSS:
.content{
display: flex;
flex-direction: column;
}
After I defined my side menu, I came over this wall that I find hard to break. Thinking back, I should have use css grid instead.
I couldn't find a way to position my main element to the right side of the nav element. I just want to see that H3 in the middle of the remaining body space, to the right. I'm struggling for 2 hours by now so I came to ask for some help.
You have to open fullscreen to really see the page, I haven't created any media queries yet so the style gets stretchy.
Hope you guys have a few minutes to spend with a CSS noob :).
#import url(https://fonts.googleapis.com/css?family=Montserrat:00,500,600,700|Open+Sans:400,400i,600);
#import url(https://cdn.jsdelivr.net/npm/et-line#1.0.1/style.css);
/* Global Tweaks */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
outline: 0
}
body {
font-size: 1.2em;
color: #777;
line-height: 1.7em;
font-weight: 400;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-family: 'Open Sans', sans-serif
}
.main-menu, h1, h2, h3, h4, h5, h6 {
font-family: Montserrat, sans-serif
}
a {
text-decoration: none;
cursor: pointer;
color: #212121;
display: block;
height: 100%;
}
a:focus, a:hover, a:visited {
text-decoration: none;
outline: 0
}
/* Global Tweaks */
/* Side Menu*/
a:active {
background-color: #333;
}
.logo {
padding-top: 25%;
}
nav {
height: 100vh;
width: 30vh;
box-sizing: border-box;
}
nav ul li {
position: relative;
width: 100%;
}
nav ul li a:before {
position: absolute;
content: '';
background-color: #e2e2e2;
height: 2px;
width: 100%;
left: 0px;
}
nav ul li:first-child a::before {
display: none
}
.main-menu {
height: 100%;
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.main-menu li {
height: 100%;
text-align: center;
background-color: #f7f7f7;
}
nav ul li a i {
width: 100%;
padding-top: 15%;
padding-bottom: 5%;
color: #838383;
font-size: 2em;
}
a[href^="#"] {
font-size: 1.05em;
color: #212121;
}
/* Side Menu*/
/* Content Wrapper */
.author h3 {
text-transform: uppercase;
font-weight: normal;
color: #222;
}
/* Content Wrapper */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofoliu</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/main-mobile.css" media="print"/>
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!--Favicon-->
<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<!-- Side Menu -->
<nav>
<ul class="main-menu">
<li class="home active"><a class="logo" href="#home"><img src="img/logo.png" alt=""></a></li>
<li class=""><i class="icon-profile-male"></i>Cine sunt</li>
<li><i class="icon-briefcase"></i>Proiecte</li>
<li><i class="icon-adjustments"></i>Servicii</li>
<li><i class="icon-envelope"></i>Contact</li>
</ul>
</nav>
<!-- Side Menu -->
<!-- Content -->
<main class="home-card">
<section class="author">
<h3>My Name</h3>
</section>
</main>
<!-- Content -->
</body>
</div>
</body>
</html>
Wrap the nav and main tags to a wrapper like .nav_wrapper then use flex display to the wrapper as follows to show them side-by-side.
.nav_wrapper {
display: flex;
}
More information about the flex style can be found here.
Before anything heres the html and css
HTML:
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li> Page 1 </li>
<li> Page 2 </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
CSS:
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
#titlebar {
width: 80%;
margin: 0;
padding: 0;
background-color: #414a4c;
overflow: hidden;
}
SO as u can see the navigation bar uses an inline unordered list and so to put a space inbetween the anchor texts ive used two nbsp entities on either side of the anchor text but when the hover state is active and the underline is applied it underlines the nbsp as well
NBSP Underline
Any help would be much appreciated thank you
You can remove the , and replace with CSS padding on the <a> tags:
#navbar a {
padding: 0 .5em;
}
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
padding: 0 .5em; /* Padding can replace spaces*/
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
margin-top: 5px;
margin-right: 10px;
}
#titlebar {
width: 80%;
margin: 0;
padding: 0;
background-color: #414a4c;
overflow: hidden;
}
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
Remove "nbsp" and add a margin,
See below example
#logotext {
font-family: 'Doppio one';
font-size: 25px;
margin-left: 20px;
float: left;
width: 45%;
position: relative;
top: 25.5px;
}
.cf {
clear: both;
}
#navbar {
list-style-type: none;
float: right;
}
#navbar a {
text-decoration: none;
color: white;
}
#navbar a:hover {
color: rgb(204, 153, 0);
text-decoration: underline;
}
#navbar li {
display: inline;
}
#clock {
font-family: Rajdhani;
font-size: 30px;
position: absolute;
}
/*MARGIN ADDED HERE*/
.cf li {
margin-left: 3px;
margin-right: 3px;
}
<!DOCTYPE html>
<!-- Language And Resource Imports -->
<html lang="en">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Doppio+One|Rajdhani|Quicksand|Raleway&effect=shadow-mutliple|outline">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/script.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JF Web | Page 1</title>
</head>
<header>
<div id="titlebar">
<div id="logotext">
<h1>JF Web ©</h1>
</div>
<nav>
<ul id="navbar" class="cf">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</div>
</header>
<body onload="mainClock()">
<span id="clock"></span>
</body>
</html>
Below is a JSFiddle link of some of my code. I was trying to achieve a slick looking pure html/css drop-down menu without the use of bootstrap or other plug-in sorts. However I can't seem to get the 'Creative' drop-down elements to appear below the navigation bar, they instead appear in-line and I have tried to change other parts of the code to make it work but I can't seem to do it without compromising the rest of the nav-bar.
Please if someone could give it a look at get it so when you hover 'Creative' it's children list elements appear below it. Preferably without just styling padding and margins.
https://jsfiddle.net/nytnfvmq/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
Home
</li>
<li>
Development
</li>
<li>
Creative
<ul>
<li>
Film
</li>
<li>
Design
</li>
<li>
Music
</li>
</ul>
</li>
<li>
Information
</li>
<li>
Contact Me
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li a {
width: 20%;
display: inline;
text-align: center;
float: left;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: relative;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li a {
background-color: red;
color: green;
}
You have a few things wrong. Don't float and assign widths to the anchor tags. Instead float the list items. You'll also need to add position: relative to the li and then add position: absolute; left: 0; top: 100%; to the child ul. That should about do it I think.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
nav {
width: 100%;
height: 40px;
margin: 0 auto;
background-color: #ffffff;
box-shadow: 0px 2px 5px #6E6E6E;
position: fixed;
}
nav ul {
width: 1200px;
margin: 0 auto;
position: relative;
list-style: none;
color: #00b6ed;
}
nav ul li {
width: 20%;
float: left;
position: relative;
}
nav ul li a {
display: block;
text-align: center;
padding-top: 11px;
padding-bottom: 11px;
color: #00b6ed;
text-decoration: none;
}
nav ul li a:hover {
background-color: #00b6ed;
color: #ffffff;
}
nav ul li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
}
nav ul li:hover ul {
display: block;
position: relative;
}
#banner {
width: 100%;
height: 400px;
background-color: #00b6ed;
float: left;
text-align: center;
}
#banner img {
margin: 0 auto;
background-color: #00b6ed;
}
nav ul li ul li {
float: none;
}
nav ul li ul li a {
background-color: red;
color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Udemy Project</title>
<link type="text/css" href="styles.css" rel="stylesheet">
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<!--<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>-->
</head>
<body>
<nav>
<ul>
<li>
Home
</li>
<li>
Development
</li>
<li>
Creative
<ul>
<li>
Film
</li>
<li>
Design
</li>
<li>
Music
</li>
</ul>
</li>
<li>
Information
</li>
<li>
Contact Me
</li>
</ul>
</nav>
<div id="banner">
<img src="images/banner.png" alt="Banner image did not load." ;>
</div>
</body>
</html>