My menu item with a dropdown submenu expands each time I mouse over. Below is the HTML code for it.
<header id="header">
<div style="width:90%; margin:auto;">
<div id="logo">Inversion iDeas</div>
<nav id="nav">
<ul>
<li>welcome</span></li>
<li>Discover<br /><span class="desc">About Us</span>
<ul>
<li>Our Services</li>
<li>Content Marketing Strategy</li>
<li>Print & Digital Publishing</li>
<li>Direct Interactive Marketing</li>
<li>Social Media Marketing</li>
<li>Search Marketing</li>
<li>Video</li>
<li>Experiential Marketing Events</li>
<li>Current Media Ideas</li>
<li>Events</li>
<li>Web & Mobile</li>
<li>Leadership</li>
</ul>
</li>
<li>Experience<br /><span class="desc">media</span></li>
<li>Testimony<br /><span class="desc">Satisfied Clients</span></li>
<li>Reach Us<br /><span class="desc">contact us</span></li>
</ul>
</nav>
</div>
</header>
css
header {
width: 100%;
background:#000;
opacity:0.8;
height: 80px;
position: fixed;
margin-top: 30px;
z-index:999;
}
#logo a {
color: #fff;
text-decoration: none;
float: left;
font-size: 30px;
margin-top: 20px;
font-family:"century gothic";
font-weight: normal;
height:45px;
width:287px;
text-indent:-9999px;
background:url(../images/logo.png) 0 0 no-repeat;
}
#nav {
width: 800px;
position:fixed;
top:50px;
left:400px;
}
#nav ul{
list-style: none;
display: block;
margin: 0;
padding: 0;
}
#nav li{
float: left;
padding: 10px 20px 0 20px;
border-left:solid 1px #fff;
text-align:center;
height:40px;
display:block;
font-size:12px;
}
#nav li:first-child{
border-left:none;
}
#nav li a {
color: #fff; opacity:0.7; font-size: 16px; text-decoration: none; font-family: Verdana, Geneva, sans-serif;
}
#nav li a.active { color: #94c600; opacity:1;}
#nav li a:hover { color: #94c600; opacity:1; width:100%;}
#nav li ul { display: none;}
#nav li:hover ul {display: block; position: relative; top:8px; left:-20px; width:160px; padding:0;}
#nav li:hover li {float: none; font-size:12px; background:rgba(0,0,0,0.8); border-left:none; text-align:left; }
#nav li:hover li a {font-size:12px; padding:0; margin:0;}
#nav li:hover li a:hover {color:#94c600;}
.desc{
font-size:12px;
color:#333;
display: block;
}
position: relative; on the parent. position: absolute; on the child.
JSfiddle (please include one the next time you post)
I added some positioning to your CSS
#nav li ul { display: none; position: relative;}
#nav li:hover ul {display: block; position: absolute; top:48px; left:168px; width:160px; padding:20px 0 0 0;}
#nav li:hover li {float: none; font-size:12px; background:rgba(0,0,0,0.8); border-left:none; text-align:left;}
See working live here
http://codepen.io/jhawes/pen/lyevj
Related
I'm fairly new to CSS/HTML and am trying to make a horizontal nav with a dropdown menu. I have made the nav but I am having trouble getting it centred on the page.
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
width: 1075px;
}
#NavigationTop ul a{
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:15px;
padding:0 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
text-transform: uppercase;
}
#NavigationTop ul li{
background-color: #343434;
width: 215px;
height: 50px;
position:relative;
float: left;
margin:0 auto;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavigationTop ul li:hover{
background-color: lightseagreen;
}
#NavigationTop ul li a:visited{
color: #ffffff
}
#NavigationTop ul ul{
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
margin: 0;
}
#NavigationTop ul ul li{
float:none;
width:215px;
border-bottom: 1px solid;
}
#NavigationTop ul li:hover > ul{
display: block;
}
<nav id="NavigationTop">
<div id="main-nav">
<ul>
<li>HOME</li>
<li>BIOGRAPHY</li>
<li>DISCOGRAPHY</li>
<li>MEDIA
<ul>
<li>Audio
<li>Video
<li>Photos
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
I'm sure there are many errors, but what could I do to make it centred? Also is it possible to have the nav hide the overflow from the main ul and still show the drop-down menu? Thank you.
Change only this:
#NavigationTop ul {
list-style: none;
position: relative;
margin: 0 auto;
padding-right: 1px;
display: inline-block;
}
div#main-nav {
text-align: center;
}
Whenever you want to make a div center or any html element. you need a container( eg. div or ul or any other) and place the html element inside that container and give specific width to that container with property margin: 0 auto .
By specifying width, your content will not spread across the viewport(brower screen) and when you specify Margin, in shorthand notion( 0 auto ) means 0 will hold the margin for Top & Bottom while auto will hold Left & Right automatically by browser.
Then whatever you will place that container, you can use Floating easily so that your design looks perfect.
Remove the width from #NavigationTop ul
Add specific width till your menu not breaking then add that on #main-nav
#main-nav{
width: 1120px; //in your design case i found it this in px.
margin: 0 auto;
}
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
}
#main-nav{
width: 1120px; //in your design case i found it this in px.
margin: 0 auto;
}
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
}
#NavigationTop ul a{
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:15px;
padding:0 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
text-transform: uppercase;
}
#NavigationTop ul li{
background-color: #343434;
width: 215px;
height: 50px;
position:relative;
float: left;
margin:0 auto;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavigationTop ul li:hover{
background-color: lightseagreen;
}
#NavigationTop ul li a:visited{
color: #ffffff
}
#NavigationTop ul ul{
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
margin: 0;
}
#NavigationTop ul ul li{
float:none;
width:215px;
border-bottom: 1px solid;
}
#NavigationTop ul li:hover > ul{
display: block;
}
<nav id="NavigationTop">
<div id="main-nav">
<ul>
<li>HOME</li>
<li>BIOGRAPHY</li>
<li>DISCOGRAPHY</li>
<li>MEDIA
<ul>
<li>Audio
<li>Video
<li>Photos
</ul></li>
<li>CONTACT</li>
</ul>
</div>
</nav>
you can try this one https://jsfiddle.net/mnd1b51y/1/
#NavigationTop ul li { position: relative;}
#NavigationTop ul li:hover > ul {
left: 0;
max-width: 210px;
position: absolute;
top: 51px;
}
In #NavigationTop ul class remove padding-left:0 because by default ul takes padding and the default seems to be padding-left:40px for ul.
#NavigationTop ul{
list-style: none;
position:relative;
margin:0 auto;
padding-right: 1px;
width: 1075px;
overflow:auto;
padding-left:0;
}
#NavigationTop ul a{
color:#ffffff;
text-decoration:none;
font-weight:700;
font-size:15px;
padding:0 15px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 50px;
text-transform: uppercase;
}
#NavigationTop ul li{
background-color: #343434;
width: 215px;
height: 50px;
position:relative;
float: left;
margin:0 auto;
text-align: center;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
#NavigationTop ul li:hover{
background-color: lightseagreen;
}
#NavigationTop ul li a:visited{
color: #ffffff
}
#NavigationTop ul ul{
display:none;
position:absolute;
top:100%;
left:0;
padding:0;
margin: 0;
}
#NavigationTop ul ul li{
float:none;
width:215px;
border-bottom: 1px solid;
}
#NavigationTop ul li:hover > ul{
display: block;
}
<nav id="NavigationTop">
<div id="main-nav">
<ul>
<li>HOME</li>
<li>BIOGRAPHY</li>
<li>DISCOGRAPHY</li>
<li>MEDIA
<ul>
<li>Audio
<li>Video
<li>Photos
</ul>
</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
So we have to create our own webpage using css and html in IT class and I decided that I wanted my navigation menu a little bit shorter than I had at the beginning but now I can't figure out how to change the css so that when I hover over my navigation menu the hover isn't all over the place like it is now.
Can someone help me out please.?
#nav {
height:28px;
background-color:#222;
position: fixed;
top: 92px;
left: 0;
margin-bottom:0;
box-shadow: 10px 2px 5px #888;
blur: 3px;
spread: 2px;
}
#nav_wrapper {
width: 1185px;
height:28px;
margin-left: 260px;
text-align: left;
margin-top:-10px;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
font-family:arial;
font-size: 15px;
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li img{
width: 8px;
height:8px;
vertical-align:middle;
padding-left: 10px;
}
#nav ul li a,visited{
color: #ccc;
display:block;
padding: 15px;
text-decoration:none;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -1px;
min-width: 80px;
padding:0px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited{
color: #ccc;
}
#nav ul ul li a:hover{
color: #099;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="home.html">
<img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
</a>
</li>
<li>HTML <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basic</li>
<li>Tags</li>
<li>Links</li>
<li>Classes</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
<li>CSS <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basics</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
</ul>
</div>
</div>
I would suppose this is what you want? (remove negative margin in #nav_wrapper and reduce padding in #nav ul li a)
#nav {
height:28px;
background-color:#222;
position: fixed;
top: 92px;
left: 0;
margin-bottom:0;
box-shadow: 10px 2px 5px #888;
blur: 3px;
spread: 2px;
}
#nav_wrapper {
width: 1185px;
height:28px;
margin-left: 260px;
text-align: left;
}
#nav ul{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
#nav ul li{
font-family:arial;
font-size: 15px;
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li img{
width: 8px;
height:8px;
vertical-align:middle;
padding-left: 10px;
}
#nav ul li a,
#nav ul li a.visited{
color: #ccc;
display:block;
padding: 4px;
text-decoration:none;
}
#nav ul li a:hover{
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display: block;
}
#nav ul ul{
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -1px;
min-width: 80px;
padding:0px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,visited{
color: #ccc;
}
#nav ul ul li a:hover{
color: #099;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="home.html">
<img src="pictures/home.png" alt="" style="width:18px;height:18px;vertical-align:middle;padding-right:11px;"/>
</a>
</li>
<li>HTML <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basic</li>
<li>Tags</li>
<li>Links</li>
<li>Classes</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
<li>CSS <img src="pictures/arrow.png" alt="" />
<ul>
<li>Intro</li>
<li>Basics</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
<li>Intro</li>
</ul>
</li>
</ul>
</div>
</div>
I am new to HTML/CSS so please don't hurt me :)
How can I center my navigation? I've researched as much as I can...
CSS:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
width:auto;
height:auto;
text-align:center;
}
#navigation ul li {
display:inline-block;
margin-right:-2px;
position:relative;
}
#navigation ul li a {
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#navigation ul li a:hover {background: #666;}
#navigation ul ul {
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#navigation ul.submenu li {
display:block;
}
#navigation ul.submenu li a {
display:block;
background:#fff;
color: #000;
}
#navigation ul.submenu li a:hover {background: #333;}
#navigation ul li:hover ul {
max-height: 10000px;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation.center {
display:block;
margin-left:auto;
margin-right:auto;
}
#navigation {
disply:inline-block;
height:50px;
}
HTML:
<div id="navigation">
<ul>
<li>Aperture Science
<ul class="submenu">
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
<ul>
<li>Black Mesa
<ul class="submenu">
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
Any help would be great! Thanks!
(Yes, my starter site is on Half Life and Portal)
You can try using below html code and css
HTML:
<div id="navMenu">
<ul>
<li>
Black Mesa
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
<li>
Black Mesa
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
CSS
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
#navMenu li {
margin: 0;
padding: 0;
text-align: left;
float: left;
list-style: none;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover {
background-color: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000;
}
fiddle : http://jsfiddle.net/Khumesh/adx2g1z0/
You need to adjust navigation Div by applying width and setting its margin property using css:
#navigation{
width:50%;
margin:0 auto;
}
Please refer to fiddle for demo
I am new to CSS and I need help with the navigation bar. I need to get the sub-topic right under the ABOUT US part but I cannot get it, it appears all the way to the right. Anything would be appreciated.
I can provide the HTML file if you need.
CSS:
container{
position: relative;
height: 70px;
width: 1100px;
}
.masthead{
background: #039be5;
width: 100%;
top: 0;
position: fixed;
color: white;
}
.logo{
position: relative;
float: left;
left: 90px;
font-family: Josefin Slab;
font-size: 21px;
top: 17px;
}
.logo h1 a {color: white; text-decoration: none; }
h1{
margin: 0;
}
a:link {color: white; text-decoration: none; }
a:visited {color: white; text-decoration: none; }
a:hover {color: white; color: black; }
a:active {color: white; text-decoration: none; }
#navcontent{
word-spacing: 4px;
}
li{
position: relative;
left: 155px;
list-style: none;
font-family: Raleway;
float: left;
margin-left: 21px;
padding-top: 15px;
font-size: 20px;
}
.navigation{
float: right;
}
.navigation ul>li ul{
height: 100%;
position: relative;
bottom: 100%;
}
.navigation ul>li ul>li{
bottom: 0px;
display: none;
}
.navigation>ul>li:hover ul>li{
display: block;
}
.navigation>ul>li a:hover {
text-decoration: none;
cursor:pointer;
}
HTML
<div class="masthead">
<div class="container">
<div class="logo">
<h1> MY SITE</h1>
</div>
<div class="navigation">
<ul>
<li>Courses
</li>
<li>Places
</li>
<li>More
<ul>
<li>Share
</li>
<li> Help
</li>
</ul>
</li>
<li id="navcontent">|| Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</div>
Fiddle
To the point,,
CSS
ul{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
Live result here.
Hope this help
UPDATE
Ok, due to what Jon P ask I will describe this code.
Actually the main keys are :
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff; /*remove, no effect*/
padding:0 /*remove, no effect*/
}
First, we make the child(<ul>) become hidden with display: none and give it properties position:absolute, top:100%, left:0; to let it under the MORE link
And then what we want? show it when we hover the MORE link. to do so, just do simple by making that child(<ul>) visible. Of course, we use this property :
ul li:hover > ul
{
display:block
}
I have a dropdown menu which works exactly as expected in Chrome.
The dropdown list is with position absolute, and the parent with position relative. However, it seems to render differently in Firefox. The dropped menu appears to be relative to the ul element rather than the li element
This dropdown is activated using javascript, adding a display:block on click
Any ideas why?
I did not use a table.
Fiddle
http://jsfiddle.net/eyJ8e/1/
HTML
<div id="menubar">
<div class="container">
<ul class="menu-container title" style="float:left;">
<li>NEW
</li>
<li class="dropdown"> <a class="click-dropdown" href="#">MEN</a><span class="caret"></span>
<ul class="dropdown-menu" style="display:block"> <li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
body
{
width: 100%;
margin: 0px;
padding: 0px;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 10pt;
/* background-color: #f0f0f0; */
}
.title{
/*font-family: Impact, Charcoal, sans-serif;*/
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
text-transform: uppercase;
font-family: SourceSans Pro Bold;
}
.container{
width:1024px;
margin:0 auto;
}
a, a:active, a:visited
{
color: #000000;
text-decoration: none;
outline: none;
}
a:hover
{
text-decoration: none;
}
#menubar {
width:100%;
min-width:1000px;
height:75px;
background-color:#000;
line-height: 75px;
color:white;
}
#menubar .brand{
display: block;
height:75px;
width: 120px;
margin-right:30px;
margin-top:3px;
float:left;
color:white!important;
}
#menubar .menu-container{
list-style:none;
margin:0px;
}
#menubar .menu-container li:first{
border-left: 1px solid grey;
}
#menubar .menu-container li{
position:relative;
display:inline;
padding:0px 15px;
font-size: 14px;
text-transform: uppercase;
border-right: 1px solid grey;
height:75px;
}
#menubar .menu-container > li.shopping-bag-wrapper:hover{
text-decoration: none;
}
#menubar .menu-container li.shopping-bag-wrapper{
border-right:none;
padding-right:0px;
}
#menubar .authentication-fb-form{
display:inline;
}
#menubar .menu-container li a{
color: white!important;
}
#menubar .menu-container li:last-child{
border:none;
}
#menubar .menu-container .dropdown ul.dropdown-menu > li:hover{
background-color:#555555;
}
#menubar .menu-container ul.dropdown-menu{
border:none;
position:absolute;
z-index:1000;
background-color:black;
display:none;
margin-top:-20px;
}
#menubar .menu-container .dropdown-menu li{
display:block;
min-width:150px;
max-width: 250px;
height:auto;
}
#menubar .menu-container .dropdown-menu a{
display:block;
line-height:25px;
padding: 5px 0px;
height:auto;
border: 2px solid white;
border-bottom:0px;
}
#menubar .menu-container .dropdown-menu a:last-child{
border: 2px solid white;
}
ul{
list-style: none;
margin:0px;
padding:0px;
}
.inline-block{
display: inline-block;
}
.pull-right{
float:right!important;
}
.caret{
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
There are a couple of issues here. Firstly, you are nesting <li>'s within <a>'s which is invalid. You need to fix this:
<ul class="dropdown-menu">
<li>Jeans</li>
<li>Pants</li>
<li>Shirts</li>
<li>Shorts</li>
<li>Tees</li>
</ul>
secondly, you arent actually giving your nested <ul> a left position which FF seems to need:
#menubar .menu-container ul.dropdown-menu{
left: 0;
}
You will then also need to move your border from the <a> to the <li> to keep the styling that you had before making these changes.
DEMO
just put left:0 in #menubar
.menu-container ul.dropdown-menu{left:0}
refer http://jsfiddle.net/aashi/eyJ8e/8/
For a drop down menu you may check this demo link :
The html part:
<ul class="menubar">
<li>NEW</li>
<li>MENU
<ul class="dropmenu">
<li>JEANS</li>
<li>PANTS</li>
<li>SHIRTS</li>
<li>SHORTS</li>
<li>TEES</li>
</ul>
</li>
</ul>
the CSS part:
*{ margin:0; padding:0;}
ul.menubar{
margin:0 auto;
width:100%;
background:#000;
height:40px;
display:block;
}
ul.menubar li{
list-style-type:none;
display:inline-block;
float:left;
position:relative;
}
ul.menubar li a{
display:block;
text-decoration:none;
color:#fff;
padding:10px;
}
ul.menubar li ul.dropmenu{
position:absolute;
width:120px;
padding:10px 10px 10px 0;
display:none;
}
ul.menubar li:hover ul.dropmenu{
display:block;
top:30px;
}
ul.menubar li:hover ul.dropmenu li{
background:#222;
width:100%;
}
ul.menubar li:hover ul.dropmenu li a:hover{
background:#333;
}
Here is the JS fiddle:
http://jsfiddle.net/ameysawant/LPdqV/1/