Having a lot of trouble with this, I think i'm almost there. This is what it looks like so far however its now uneven (the image logo is more to the right and not in the center anymore. I'm trying to get it so that the image is in the center and 2 links on either side of it. Click here for image
HTML:
Current code:
<div id="navbar">
<ul>
<li>Home</li>
<li>The Collective</li>
<img src="images/jc.jpg">
<li>About</li>
<li>Store</li>
</ul>
</div>
CSS:
#navbar li {
display: inline;
padding-right: 40px;
}
Sorry I'm fairly new to all of this and any help would be greatly appreciated!
#container{
background-color:white;
width: 1250px;
margin-left: auto;
margin-right: auto;
}
#header{
background-color: black;
color: white;
text-align:center;
width: 1250px;
height:200px;
}
body {
background-color:#EEE;
}
#navbar li {
display: inline;
padding-right: 40px;
}
#content {
padding: 10px;
}
#main1 {
width: 400px;
float:left;
border-style:solid;
border-width:2px;
padding:10px;
margin-left:150px;
}
#main2 {
width:400px;
float: right;
border-style:solid;
border-width:2px;
padding:10px;
margin-right:150px;
}
#footer {
clear:both;
text-align:center;
padding:10px;
}
<html>
<head>
<title> JC4ME Homepage </title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="navbar">
<ul>
<li>Home</li>
<li>The Collective</li>
<li><img src="http://s33.postimg.org/xc68nnswf/image.jpg"></li>
<li>About</li>
<li>Store</li>
</ul>
</div>
</div>
<div id="content">
<div id="main1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="main2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">
Copyright © 2016 Ibz
</div>
</div>
</body>
</html>
Put image inside <li> tag
<div id="navbar">
<ul>
<li>Home</li>
<li>The Collective</li>
<li><img src="images/jc.jpg"></li>
<li>About</li>
<li>Store</li>
</ul>
</div>
You can do something with display:table:
#navbar {
display: table;
}
#navbar ul, #navbar img {
display: table-cell;
margin: 0;
padding: 0;
}
#navbar .left, #navbar .right {
width: 50%;
vertical-align: middle;
}
#navbar li {
display: inline;
list-style: none;
}
.right {
text-align: right;
}
<div id="navbar">
<ul class="right">
<li>Home</li>
<li>The Collective</li>
</ul>
<img src="http://placehold.it/100x100?text=LOGO">
<ul class="left">
<li>About</li>
<li>Store</li>
</ul>
</div>
Give your li element an inline-block with vertical-align:bottom and your center ul
#navbar {
width: 100%;
max-width: 700px;
margin: 0 auto;
}
#navbar li {
display: inline-block;
vertical-align: bottom;
padding: 0 10px;
}
<div id="navbar">
<ul>
<li>Home</li>
<li>The Collective</li>
<li><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></li>
<li>About</li>
<li>Store</li>
</ul>
</div>
Related
I'm trying to learn some basic CSS. I'm having trouble styling a list to look like what my instructor has provided for a small practice exercise.
ul#menu li {
display: block;
border-block-end: 0px;
background-color: #66c;
margin: 2px;
list-style-type: none;
padding-left: 5px;
padding-top: 2px;
}
#menu {
background-color: #64a;
}
#menu a {
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample Menu Page</title>
<link rel="stylesheet" title="Q1" href="style2.css" />
</head>
<body>
<h1>Sample Menu Page</h1>
<ul id="menu">
<li>Page One</li>
<li class="current">Page Two</li>
<li>Page Three</li>
<li>Page Four</li>
<li>Page Five</li>
</ul>
<div id="main">
<h2 id="first">First Section</h2>
<p>This is the first part of the real content of the page.</p>
<p>This exercise is mostly about:</p>
<ul>
<li><abbr title="Cascading StyleSheets">CSS</abbr></li>
<li>geese</li>
</ul>
<p>Actually, there isn't so much about geese. I just wanted to use a <code><ul></code> there.</p>
<h2 id="next">Next Section</h2>
<p>I'm really running out of stuff to say here. Oh well, fall back to old standards, I guess…</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</body>
</html>
I've tried googling people with similar questions and looking at CSS guides but I still can't quite get it.
ul#menu li {
display: block;
border-block-end: 0px;
background-color: #66c;
margin: 2px;
list-style-type: none;
padding-left: 5px;
padding-top: 2px;
}
#menu {
background-color: #64a;
}
#menu a {
color: white;
text-decoration: none;
}
Expected result:
Basically, make the ul a floated element which you place to the right, like this:
ul#menu {
float: right;
}
In addition you might want to add width to make it look better, and you might want to move it up in the HTML above the h1 tag to have it floated right at the top like in your example:
https://jsfiddle.net/shpeuo8m/
https://jsfiddle.net/drqjmssy/
From the jsfiddle link, I am trying to have "div class='main_content'" be the same vertical height as the "div class='sidebar'". How does one accomplish that? If you can't load the fiddle or it's awful formatting, here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My project</title>
<style>
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav > ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
</style>
</head>
<body>
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<footer>
© Yazen 2018.
</footer>
</div>
</body>
</html>
Sorry if any of this is confusing./////////////////////////////////////////////////////////////////////////////////
You could wrap the elements in a new tag (I've used section) and add display: flex.
body {
background-color: #5A4E3C;
color: #E9EBBF;
}
header {
background-color: #D8E472;
padding: 2%;
}
nav {
background-color: #D8E472;
}
footer {
background-color: #D8E472;
padding: 2%;
color: #5A4E3C;
}
h1 {
color: #5A4E3C;
}
li {
display: inline-block;
}
nav>ul {
margin-top: 0;
margin-bottom: 0;
}
.wrapper {
width: 85%;
background-color: #418E8E;
margin: 0 auto;
}
.main_content {
width: 56%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
margin: 0;
}
.sidebar {
width: 36%;
padding: 2%;
column-count: 1;
float: left;
background-color: #418E8E;
}
section {
display: flex;
}
<div class='wrapper'>
<header>
<h1>Main Heading</h1>
</header>
<nav>
<ul>
<li><a href='1.html'>Page 1</a></li>
<li><a href='2.html'>Page 2</a></li>
</ul>
</nav>
<section>
<div class='main_content'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
<div class='sidebar'>
<article>
<h2>Subhead</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</div>
</section>
<footer>
© Yazen 2018.
</footer>
</div>
I know it's much to read but I hope anybody takes the time to help me. Thanks!!!
This is a pice of my code from my responsive website.
<!DOCTYPE html>
<html>
<head>
<style>
#media (max-width:1227px) and (min-width:769px) {
html {
background-color:rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left:7px;
padding-right:4px;
list-style-type:none;
}
main {
margin-left:210px;
}
nav {
width:200px;
min-height:600px;
position:absolute;
border-style:solid;
border-width:1px;
border-color:black;
margin-right:10px;
background-color:white;
}
#book_cover {
width:100%;
}
#book_informations {
display:table;
width:100%;
}
#book_left {
margin-right:20px;
float:left;
width:300px;
display:table-header-group;
}
#book_middle {
margin-right:20px;
width:500px;
float:left;
display:table-footer-group;
}
#book_right {
float:left;
width:300px;
border-style:solid;
border-width:1px;
padding:5px;
display:table-row-group;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li><br>
<li class="li_navigation_left">Test2</li><br>
<li class="li_navigation_left">Test3</li><br>
<li class="li_navigation_left">Test4</li><br>
<li class="li_navigation_left">Test5</li><br>
<li class="li_navigation_left">Test6</li><br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="http://lorempixel.com/g/400/200/">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein Test-Text.</p></div>
</div>
</div>
</main>
</body>
</html>
The CSS is for the layout between 769px and 1227px. Within this dimensions I want the layout look like this:
The left "column" in the main (excluding the navigation on the left side) should be fixed size, ca. 250 px. The right "column" (the big Lorem-ipsum-placeholder-text) should be variable (perhaps width in %) and fill the space between left "column" and right browser border.
The problem is, I'll have to do it without changing the HTML code. I only can change the CSS code.
I tried this with display:table;, display:table-row-group;… But that doesn't work.
Does anybody know what I'm doing wrong?
What you need to use is #Media ruling in your css in order to maintain both resolutions and to make sure that your html will adapt depending on what resolution the user is using.
please check this code
<!DOCTYPE html>
<html>
<head>
<style>
html {
background-color: rgba(228, 40, 40, 0.66);
}
#navigation_ul_left {
padding-left: 7px;
padding-right: 4px;
list-style-type: none;
}
nav {
width: 200px;
min-height: 600px;
position: absolute;
border-style: solid;
border-width: 1px;
border-color: black;
margin-right: 10px;
background-color: white;
float: left;
clear: both;
}
#book_informations {
width: 100%;
float: left;
}
#book_left {
margin-right: 3%;
float: left;
width: 25%;
display: table-header-group;
}
main {
width: 75%;
float: left;
margin-left: 230px;
}
#book_cover {
width: 100%;
}
#book_middle {
width: 70%;
float: left;
display: table-footer-group;
}
#book_right {
float: left;
width: 100%;
border-style: solid;
border-width: 1px;
padding: 5px;
display: table-row-group;
}
#media screen and (max-width: 768px) {
#book_middle {
margin-left: 2%;
}
}
</style>
</head>
<body>
<nav class="navigation">
<ul id="navigation_ul_left">
<li class="li_navigation_left">Test1</li>
<br>
<li class="li_navigation_left">Test2</li>
<br>
<li class="li_navigation_left">Test3</li>
<br>
<li class="li_navigation_left">Test4</li>
<br>
<li class="li_navigation_left">Test5</li>
<br>
<li class="li_navigation_left">Test6</li>
<br>
</ul>
</nav>
<main>
<div id="book_informations">
<div id="book_left">
<img id="book_cover" src="200.jpg">
<p>Test123ABC</p>
<p>Test456DEF</p>
<p>Test789GHI</p>
<div id="book_right">
<div id="payment_div">
<p id="chose_payment">Das ist mein Test-Text.</p></div>
</div>
</div>
<div id="book_middle">
<p id="book_title">Lorem ipsum dolor sit amet.</p>
<p id="book_discription">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor
sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum.</p>
</div>
</div>
</main>
</body>
I'm trying to find a simple fix to get my header to stay in a fixed position, but when I apply "position:fixed" to my header class nothing happens. I tried it with the h1 tag in the header too. I'd really appreciate it if someone could tell me what I'm doing wrong and what the simplest method would be to get the header to stay fixed when you scroll down the screen. I pasted the header section below.
Thank you for all suggestions!
<header class="logo">
<h1>The Loch Ness Monster Report</h1>
<ul id="nav-menu">
<li><a class="selected" href="index.html">Latest Sightings</a></li>
<li>History</li>
<li>Report a Sighting</li>
<li>Donate</li>
</ul>
</header>
The CSS is working because the other elements are connected. This is what I'm using for the CSS for the header element.
.logo {
position: fixed;
z-index: 1;
}
You could do something like this.
header{
width: 100vw; //set header width equal to viewport width.
}
.logo {
position: fixed; //set header fix to top
z-index: 1;
display: flex; // displays logo content horizontally
justify-content: flex-start; // set logo content
flex-direction: row;
height: auto;
background: #000000;
color: white;
}
#nav-menu{
display: flex;
flex-direction: row; //display lost horizontally
}
h1{
font-size: 140%;
}
li{
padding: 5px;
list-style: none;
}
a{
text-decoration: none;
color: white
}
li:hover{
background-color: white;
border-radius: 5px;
}
a:hover{
color: red;
}
body{
// reset body properties
padding: 0;
margin: 0;
}
.container{
padding-top: 60px;
}
section{
height: 500px;
width: 960px;
}
.section1{
background-color: blue;
}
.section2{
background-color: orange;
}
.section3{
background-color: red;
}
<body>
<header class="logo">
<h1>The Loch Ness Monster Report</h1>
<ul id="nav-menu">
<li><a class="selected" href="index.html">Latest Sightings</a></li>
<li>History</li>
<li>Report a Sighting</li>
<li>Donate</li>
</ul>
</header>
<div class="container">
<Section class="section1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Section>
<Section class="section2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Section>
<Section class="section3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</Section>
</div>
</body>
I'm creating a drop down menu, and having trouble with the :hover pseudoclass. When I hover on an a tag in the menu, the parent container's width stretches to meet...something. What's going on?
Note: the weird use of background-colors is just to give myself a better understanding of how the box model works.
HTML is:
<header>
<h1>test <span>test</span></h1>
<nav>
<ul class="menu">
<li>Menu
<ul class="submenu">
<li>Aaaaa Aaaaa Aaaa</li>
<li>Bbbbb Bbbbb Bbbbb</li>
<li>Ccccc Ccccc Ccccc</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="content" id="one">
<h2>Aaaa</h2>
<h3>Aaaa</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content" id="two">
<h2>Bbbb</h2>
<h3>Bbbb</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="content" id="three">
<h2>Cccc</h2>
<h3>Cccc</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer>
<ul class="social">
<li><span class="fa fa-twitter fa-2x"></span></li>
<li><span class="fa fa-github fa-2x"></span></li>
<li><span class="fa fa-envelope-o fa-2x"></span></li>
</ul>
</footer>
CSS is:
nav {
position: inherit;
left: 30px;
top: 78px;
}
.menu {
position: inherit;
background-color: yellow;
width: 90%;
}
.menu > li {
float: left;
list-style: none;
display: inline-block;
}
.menu li a {
display: inherit;
padding: 10px;
}
.menu li a:hover {
background-color: black;
color: white;
text-shadow: none;
}
ul.submenu {
display: none;
}
li:hover > ul {
position: inherit;
display: block;
background-color: blue;
}
.submenu li {
padding: 0;
margin: 0;
width: 100%;
}
.submenu li a {
display: inherit;
padding: 10px;
}
.submenu li a:hover:after {
content: "";
color: white;
text-shadow: none;
padding: 0 15px;
}
Here's a demo: http://jsfiddle.net/ur3dettv/
Add position: absolute to the inside ul element.
.menu li ul{
position: absolute;
}
Working Fiddle
In a normal layout, if the child element's height is increased then parent stretches to contain the child element. That is what happening with you in your above code.
The solution is to make the child element independent of its parent container which can be done by using position: absolute css property.
Because on this class
.submenu li a:hover:after {
content: "";
color: white;
text-shadow: none;
padding: 0 15px;
}
you have some padding set. Taking this off fixes your issue. DEMO