I can't figure out why the hover state in my css does not work. I've been successful in hiding the sub navigation, but can't get it to reappear on rollover. I Any help would be appreciated. Thanks.
Here's the html:
<nav>
<ul>
<li>writings</li>
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
<li>fundraising</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
and the css:
.nav {
position: relative;
margin-left: 200px;
margin-top: -50px;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav > ul > li {
float: left;
font-size: 30px;
}
.nav ul::after {
content:'';
display: block;
clear: both;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul ul {
float: left;
display: block;
position: absolute;
top: 90%;
display: none;
line-height: 5px;
}
nav ul li a {
display: inline-block;
color: rgb(92,178,227);
font-family: 'Josefin Sans', sans-serif;
padding: 10px 20px;
text-decoration: none;
}
You need the sub nav inside of the list item:
<li>writings
<ul>
<li>devotionals</li>
<li>published</li>
<li>articles</li>
</ul>
</li>
Related
I made a menu, and I want the dropdown to go centered underneath the 'Fruitsoorten' tab. But now all three of the items are next to each other.
Does anyone know how to fix this? Thanks in advance.
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home</li>
<li>
Fruitsoorten
<ul>
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda</li>
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
You can also try this styles.
http://codepen.io/nehemc/pen/LkyQvq
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
padding: 10px;
display:block;
}
nav ul ul {
display: none;
position: absolute;
z-index: 999;
left: 0;
margin-top: 0;
}
nav li:hover ul {
display: block;
}
nav li:hover {
background-color: gray;
}
Add following code to reflect
nav ul { margin-top: 0; }
nav li ul {
display: none;
position: absolute;
left: 0;
z-index: 9;
}
Also clear your HTML code with proper closing of </li>
To affect your inline-block styling to main ul only,
Do this:
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
instead of
nav li { display: inline-block; position: relative; padding: 10px; }
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
margin-top: 55px;
background-color: black;
}
nav>ul>li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
<nav>
<ul>
<li>Home
</li>
<li>Fruitsoorten
<ul>
<li>Kersen
</li>
<li>Appels
</li>
<li>Pruimen
</li>
</ul>
</li>
<li>Team
</li>
<li>Agenda
</li>
<li>Foto's
</li>
<li>Vacatures
</li>
<li>Contact
</li>
</ul>
</nav>
is that what you want?
nav {
float: right;
border-radius: 15px;
margin-right: 15%;
}
nav ul {
list-style-type: none;
background-color: black;
}
nav li {
display: inline-block;
position: relative;
padding: 10px;
}
nav li ul {
display: none;
}
nav li li {
display:
}
nav li:hover ul {
display: block;
position: absolute;
left: 0;
padding:0;
}
nav a {
text-decoration: none;
color: white;
font-size: 20px;
}
nav li:hover {
background-color: gray;
}
ul.inner li{width:83%}
<nav>
<ul>
<li>Home</li>
<li>Fruitsoorten
<ul class="inner">
<li>Kersen</li>
<li>Appels</li>
<li>Pruimen</li>
</ul>
<li>
<li>Team</li>
<li>Agenda
<li>Foto's</li>
<li>Vacatures</li>
<li>Contact</li>
</ul>
</nav>
I'm new with html and css but I'm making a responsive dropdown menu and I cant find why my menu/navigation bar won't center in the desktop version.
I found the menu from here and downloaded it.
Here is my code:
<style>
#import url(http://fonts.googleapis.com/css?family=roboto);
body {
background: #212121;
font-size: 22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'roboto', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
line-height: 34px;
text-align: center;
color: #FFF;
}
h3 a { color: #FFF; }
a { color: #FFF; }
h1 {
margin-top: 100px;
text-align: center;
font-size: 60px;
line-height: 70px;
font-family: 'roboto', sans-serif;
}
#container {
margin: 0 auto;
max-width: 890px;
}
p { text-align: center; }
.toggle, [id^=drop] {
display: none;
}
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
nav:after {
content: "";
display: table;
clear: both;
}
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
}
nav a {
display: block;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
}
nav ul li ul li:hover { background: #000000; }
nav a:hover { background-color: #000000; }
nav ul ul {
display: none;
position: absolute;
top: 60px;
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
nav ul ul ul li {
position: relative;
top: -60px;
left: 170px;
}
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
#media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav { margin: 0; }
.toggle + a,
.menu { display: none; }
.toggle {
display: block;
background-color: #254441;
padding: 0 20px;
color: #FFF;
font-size: 20px;
line-height: 60px;
text-decoration: none;
border: none;
}
.toggle:hover { background-color: #000000; }
[id^=drop]:checked + ul { display: block; }
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a { padding: 0 40px; }
nav ul ul ul a { padding: 0 80px; }
nav a:hover,
nav ul ul ul a { background-color: #000000; }
nav ul li ul li .toggle,
nav ul ul a { background-color: #212121; }
nav ul ul {
float: none;
position: static;
color: #ffffff;
}
nav ul ul li:hover > ul,
nav ul li:hover > ul { display: none; }
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li { position: static;
}
}
#media all and (max-width : 330px) {
nav ul li {
display: block;
width: 94%;
}
}
</style>
<body>
<nav>
<div id="logo">Demo Page</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Service +</label>
Service
<input type="checkbox" id="drop-1"/>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Portfolio +</label>
Portfolio
<input type="checkbox" id="drop-2"/>
<ul>
<li>Portfolio 1</li>
<li>Portfolio 2</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Works +</label>
Works
<input type="checkbox" id="drop-3"/>
<ul>
<li>HTML/CSS</li>
<li>jQuery</li>
<li>Python</li>
</ul>
</li>
</ul>
</li>
<li>Blog</li>
<li>Submit</li>
<li>Contact</li>
<li>About</li>
</ul>
</nav>
<h1> Mobile-compatible Responsive Dropdown Menu Demo </h1>
</body>
Try this.
#nav {
width:750px;
margin:0 auto;
list-style:none;
}
#nav li {
float:left;
}
#nav a {
display:block;
text-align:center;
width:150px; /* fixed width */
text-decoration:none;
}
Method #1 is primarily using margin:auto; to center the nav. If your menu items (li/a) are a fixed width, then this method is probably the easiest way to center your nav. The essentail pieces of code used to center the nav are in bold.
Check out this site for more. Hope it helps!
i have a menu i'm developing at this link:
http://events.discoverportland.net/
The menu should load to a blue square just to the right of the discover portland logo. There are serveral nested ul's in the menu, the problem i'm having is getting them to load to the side of the menus above them As it load now, you can't get to the teritairy links unless you move VERY fast.
Is there any way to get the uls to load inline as i'm hovering over them, or is there a better solution?
this my nav html:
<nav>
<div class="clearfix hd8 suckerfish" >
<ul id="md">
<li>Home2</li>
<li>Neighborhoods
<ul>
<li>Northwest
<ul>
<li>Pearl District</li>
<li>Oldtown-Chinatown </li>
<li>Nob Hill</li>
</ul>
</li>
<li>Southwest
<ul>
<li>West End</li>
<li>Riverplace-South Waterfront</li>
<li>Downtown</li>
</ul>
</li>
<li>Southeast
<ul>
<li>Sellwood-Westmoreland</li>
<li>Hawthorne</li>
<li>Clinton-Division</li>
</ul>
</li>
<li>Northeast
<ul>
<li>Alberta</li>
<li>Lloyd District</li>
<li>Hollywood District</li>
</ul>
</li>
<li>North
<ul>
<li>Mississippi</li>
<li>Williams</li>
<li>St. Johns</li>
</ul>
</li>
</ul>
</li>
<li>Itineraries</li>
<li>Day Trips</li>
<li>Food+Drink
<ul>
<li>Dining Picks</li>
<li>Food Cart Fare </li>
<li>Beer, Wine & Spirits</li>
<li>Café Culture</li>
</ul>
</li>
<li>To Do
<ul>
<li>Shopping</li>
<li>Recreation</li>
<li>Culture
<ul>
<li>Galleries</li>
</ul>
</li>
<li>Family</li>
</ul>
</li>
<li>Events</li>
</ul>
</nav>
this is the css i'm using:
nav ul ul li a::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 8px;
}
nav {
text-transform:uppercase;
font-family: Oswald,Arial,Helvetica,sans-serif !important;
font-size: 14px;
font-weight: 100 !important;
letter-spacing: 1px!important;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FF0066;
padding: 2px 0 0 64px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF0066;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #FF0066; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 25px;
color: #fff;
font-family: 'Fira Sans', sans-serif;Important;
font-size: 12px;
}
nav ul ul li a:hover {
background: #AD0548;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul ul li {
width: 275px !important;
}
#media (max-width: 767px) {
#logo a {
background: rgba(0, 0, 0, 0) url("http://discoverportland.net/templates/urbanlife/images/logos/DP_HeadingLogo2.png") no-repeat scroll 0 0 / 100% auto;
height: 60px;
margin: 0 !important;
width: 60px !important;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover #md {
display: inline-block;
}
}
I'm trying to make a basic dropdown menu with css and html. However when I hover on the li that has to drop down, my whole menu comes down with it.
This is my code:
<nav class="icons">
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
<li>Account
<ul id="login">
<li>Change password</li>
<li>Update details</li>
<li>Logout</li>
</ul>
</li>
</ul>
</nav>
And the CSS
nav {
height: 70px;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
ul {
margin: 0;
padding: 0;
list-style: none;
margin-left: 5%;
}
ul li {
display: inline-block;
width: 15%;
text-align: center;
line-height: 70px;
}
ul li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul li a:hover {
border-bottom: solid black 1px;
}
ul#login{
margin: 0;
padding: 0;
list-style: none;
}
ul#login li {
display: block;
width: 30%;
text-align: center;
line-height: 70px;
}
ul#login li a {
text-decoration: none;
color: #fff;
font-size: 2em;
display: block;
}
ul#login li ul li{
width: 20%;
}
ul#login li ul li a {
text-decoration: none;
color: #fff;
font-size: 0.7em;
display: block;
}
ul#login li a:hover {
border-bottom: solid black 1px;
}
I know it's a lot of CSS for such a basic menu but I don't know how to make it more compact.
Can someone please tell me what I'm doing wrong with the dropdown menu?
Add this css
ul li{
position:relative;
}
#login{
position:absolute;
top:71px;
left:0;
}
FIDDLE
I'm having a bit of trouble turning my vertical sub menu into a horizontal one, everything I try seems to be incorrect or I end up changing the rest of the look of the main menu.
HTML
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul>
<li class="services1">
PRINT
BRANDING
EDITORIAL
PHOTOGRAPHY
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</nav>
Here is the CSS
nav {
height: 70px;
float: left;
font-size: 20px;
color: #00BCDC;
font-family: "geogtq md";
}
nav ul {
list-style-type: none;
color: #00BBE4;
font-family: "geogtq md";
float: left;
display:inline;
}
nav li {
float: left;
margin-right: 20px;
color: #00BBE4;
font-family: "geogtq md";
margin-left: auto;
display: inline;
}
a:link {
text-decoration: none;
color: #00C0EE;
font-family: "geogtq md";
}
a:visited {
text-decoration: none;
color: #00C0EE;
}
a:hover {
text-decoration: none;
color: #007889;
}
a:active {
text-decoration: none;
color: #00C0EE;
}
ul {
font-family: "geogtq md";
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: inline;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
text-decoration: none;
margin-right:5px;
white-space: nowrap;
color:#066;
}
li:hover ul {
display: inline;
position: absolute;
}
li:hover li {
float: none;
font-size: 16px;
font-weight:bold;
margin-top:3px;
}
.services1 a {
color:#00C0EE;
float: left;
list-style-type: none;
display:inline;
}
http://jsfiddle.net/GMbCU/
Any help would be greatly appreciated as this has been going on for a while and would help with how things sit on my site, thanks
Just give the child UL enough width and place each link in its own LI. You already have them displaying inline.
http://jsfiddle.net/GMbCU/7
li ul {
width: 450px;
}
try this: http://jsfiddle.net/pzC2g/
<nav>
<ul class='root'>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul class='sub'>
<li>PRINT</li>
<li>BRANDING</li>
<li>EDITORIAL</li>
<li>PHOTOGRAPHY</li>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</nav>
and css
.root {
display: block;
}
.root li {
display: inline-block;
float: left;
margin-right: 20px;
}
.root li .sub {
display: none;
}
.root li:hover .sub {
display: block;
position: absolute;
}
.root li:hover .sub li {
display: inline-block;
float: left;
}
Updated the above with Styles, see link : http://jsfiddle.net/pzC2g/27/
Thanks Goldj for great support,
**
*, html{
margin: 0;
padding:0;
}
nav{
background-color: #222;
}
.wrapper{
margin: 0 auto;
padding: 0px;
max-width: 1150px;
min-height:100%;
}
.root {
display: block;
}
.root li {
padding:10px;
display: inline-block;
margin-right: 20px;
color: #fff;
}
.root li:hover{
background-color:#555;
}
.root li a{
display:block;
text-decoration:none;
color:inherit;
}
.root li a:hover{
display:block;
}
.root li .sub {
background-color: #fff;
border: 1px solid #222;
margin-top: 10px;
left:0;
width:99.9%;
display: none;
font-size:14px;
}
.root li:hover .sub {
display: block;
position: absolute;
}
.root li:hover .sub li {
color: #000;
display: inline-block;
float: left;
}
.root li .sub li:hover {
background-color: #222;
color: #fff;
}
<nav>
<div class="wrapper">
<ul class='root'>
<li>HOME</li>
<li>ABOUT</li>
<li><a href='#'><span>WORK</span></a>
<ul class='sub'>
<div class="wrapper">
<li>PRINT</li>
<li>BRANDING</li>
<li>EDITORIAL</li>
<li>PHOTOGRAPHY</li>
</div>
</ul>
</li>
<li>BLOG</li>
<li>INSPIRED</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
**