I have a simple nav with some ULs and LIs. But in some LIs I have another UL to create a sub menu but the submenu is just going towards the right side.
See this fiddle.
HTML:
<header>
<h1 style="float: left; margin-top: 2%;"> Naughty Mama.</h1>
<nav>
<ul>
<li>My Profile
</li>
<li>Inbox
</li>
<li> Notifications
<ul>
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
</ul>
</li>
</ul>
</nav>
</header>
CSS:
header {
background-color: #ddd;
}
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul li {
display: inline-block;
background-color: #eee;
vertical-align: top;
}
nav ul li a {
color: #fff;
text-decoration: none;
display: block;
padding: 15px;
}
nav ul li a:hover {
color: #000;
background: #aaa;
}
nav ul li ul li {
display: block;
}
How can I align those double nested LIs to left side of the main menu?
Hope I am clear.
Thanks in advance.
Here you go
nav ul li ul{
padding-left:0px;}
Reset your CSS
ul { padding:0;}
Are you talking about doing something like this?
Changes:
nav {
float: right;
margin-right: 5%;
margin-top: 2%;
}
nav ul {
padding-left:0;
margin-left:0;
}
nav > ul { position:relative; }
nav ul li ul {
display: block;
position:absolute;
left:0;
}
Related
I'm training my CSS to pass to JS, but I'm worried because I'm having some problems doing a drop-down menu.
The concept I already get, but when I put it to work, it's kind of bugging, and moving the nav.
header {
overflow: auto;
}
header img {
float: left;
margin-left: 300px;
margin-top: 10px;
}
header img:hover {
opacity: 0.8;
}
nav {
float: right;
margin-right: 250px;
margin-top: 40px;
}
nav ul {
padding: 0px;
}
nav ul li {
display: inline;
margin-right: 50px;
border-right: 1px solid black;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
color: black;
text-decoration: none;
font-weight: bold;
font-family: roboto;
margin-right: 50px
}
nav ul li a:hover {}
nav li ul {
display: none;
}
nav li:hover ul {
display: block;
position: relative;
}
nav li:hover li {
float: none;
}
<header>
<img src="logo.png">
<nav>
<ul>
<li>
Menu 01
<ul>
<li>Submenu 01</li>
</ul>
</li>
<li>Menu 02</li>
<li>Menu 03</li>
<li>Menu 04</li>
</ul>
</nav>
</header>
I sent the code with the img tag just to make clear the position of the stuff. I'm also learning the stuff, so it'll probably be very bad in others monitors.
nav li ul{
display: none;
position:absolute;
}
nav li:hover ul{
display: block;
}
thats all
I've got 5 li on my page.
One of theme (the third) is higher than the other. I would like them to horizontally align to the center of this biggest LI. However, it's aligning on the top of it.
I've tried to use "Vertical-align: middle" but it doesn't work.
Here is my actual code:
<link rel="stylesheet" href="style2015.css" />
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1</li>
<li>Sous-item 2</li>
<li>Sous-item 3</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos</li>
<li>Contact</li>
</ul>
</div>
Css:
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
display: inline;
vertical-align: middle;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:30px;
}
/* Logo */
#logo{
height: 190px;
width: 266px;
background-color:black;
}
#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
width: 700px;
/* some fixed width so, menu doesn't fall on next line*/
}
#menu li {
/* float: left; you can't align a floated element easily */
margin: auto;
padding: 0;
background-color: black;
display: inline-block;
vertical-align: middle;
}
#menu li a {
display: block;
width: 100px;
color: white;
text-decoration: none;
}
#menu li a:hover {
color: #FFD700;
}
#menu ul li ul {
display: none;
}
#menu ul li:hover ul {
display: block;
}
#menu li:hover ul li {
float: none;
}
#menu li ul {
position: absolute;
}
#menu {
height: 30px;
}
/* Logo */
#logo {
height: 190px;
width: 266px;
background-color: black;
}
<div id="menu">
<ul>
<li>Portfolio
<ul>
<li>Sous-item 1
</li>
<li>Sous-item 2
</li>
<li>Sous-item 3
</li>
</ul>
</li>
<li>Projets
</li>
<li id="logo"></li>
<li>A propos
</li>
<li>Contact
</li>
</ul>
</div>
If i got your question correct, then this is what you need to do. I have just made the required changes, rest of code is all yours.
I'm making a navigation menu.
I got it all working now but when the sub menu pops up all the html is distorting.
All the div's below are going downwards.
Is there somebody who can help me?
Here is the html with CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
#body
{
width: 1200px;
}
ul{
padding: 0;
list-style: none;
}
ul li{
float: left;
width: 100px;
text-align: center;
}
ul li a{
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
#uldiv
{
width:1200px;
float:left;
}
#secdiv
{
width:1200px;
float:left;
}
</style>
</head>
<body>
<div id="uldiv">
<ul>
<li>Home</li>
<li>About</li>
<li>
Products
<ul>
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<div id="secdiv">
here some text whish will not move while the menu is popping up.
</div>
</body>
</html>
You need to add :
ul li:hover ul {
display: block; /* display the dropdown */
position:absolute; /* <--- this line */
}
To take the submenu out of the document flow and doesn't push the below content down.
You also need to add :
ul li ul li{
float:none;
}
So that the sub menu items don't display on the same line and stack below each other.
DEMO
Full code :
#body {
width: 1200px;
}
ul {
padding: 0;
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
ul li a {
display: block;
padding: 5px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
/* display the dropdown */
position:absolute;
}
ul li ul li{
float:none;
}
#uldiv {
width:1200px;
float:left;
}
#secdiv {
width:1200px;
float:left;
}
<div id="uldiv">
<ul>
<li>Home
</li>
<li>About
</li>
<li> Products
<ul>
<li>Laptops
</li>
<li>Monitors
</li>
<li>Printers
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
<div id="secdiv">here some text whish will not move while the menu is popping up.</div>
Give position:absolute to the ul
Fiddle
ul li ul {
position:absolute;
display: none;
}
I have been trying to add a drop down menu to this code but always seem to get turned around. I just want a basic look to the subnav with a simple rollover effect. Every time i try different code it uses home image in the drop down menu and will not disappear when it is not hovered over. Ideas?
HTML:
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1 </li>
<li>Menu 2 </li>
</ul>
</li>
</ul>
CSS:
ul.navbar {
width:1000px;
list-style:none;
height:40px;
}
ul.navbar li {
display:inline;
}
ul.navbar li a {
height:40px;
float:left;
text-indent:-9999px;
}
/* Home 0 */
ul.navbar li.navbar1 a {
width:86px;
background:url(../pelican%20outfitters/navbar2.fw.png)
no-repeat 0 0;
}
ul.navbar li.navbar1 a:hover {
background-position:0 -40px;
}
ul.navbar li.navbar1 a.current {
background-position:0 -80px;
}
HTML
<nav>
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1
</li>
<li>Menu 2
</li>
</ul>
</li>
</ul>
</nav>
CSS
nav {
margin: 20px auto;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li
{
width:100px;
}
ul li ul li
{ width:200px;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
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: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
Output:
Working Fiddle
You should delete the text-indent:-9999px and add this to your css
Delete row:
ul.navbar li a { text-indent:-9999px }
Css:
.navbar li ul {display:none;}
.navbar li:hover ul {display:block;}
Than you have a basic navbar with hidden subnavs.
From here you can try it with your image.
The demo is your code with the new code..
DEMO
More like you want is, dont delete the css.. but only add those 2 lines and this 1:
.navbar li:hover li a{ text-indent:1px; background:white; }
DEMO 2 (without your img (don't know what it is)).
Latest update after the fiddle comment:
You should specify your html and css.. a just added a class to the first link class="home" and to accomodations class="accomodations"
And changed it in the css..
/* Home */
ul.navbar li.navbar1 a.home {
width:86px;
background:url(http://s12.postimg.org/rszejjscd/navbar2_fw.png)
no-repeat 0 0;
}
/* Accomodations */
ul.navbar li.navbar2 a.accomodations {
width:220px;
background: url(http://s12.postimg.org/rszejjscd/navbar2_fw.png) no-repeat -86px 0;
}
DEMO 3
I'm trying to make a Nokia-like horizontal menu (like here) but without success.
As you can see on my JSFiddle I can't get the white background of the active menu item to take the full height of the blue menu-container minus 1 px at the top. How could I achieve that? Many thanks
HTML:
<div id="menu-container">
<div id="menu">
<ul>
<li>Category 1</li>
<li class="active">Category 2</li>
<li> <a title="" href="">Category 3</a>
</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</div>
<!-- End DIV Menu -->
</div>
CSS:
#menu-container {
display: table;
width: 100%;
background: #124191;
height: 50px;
padding-left: 20px;
color: #fff;
}
#menu {
vertical-align: middle;
display: table-cell;
}
#menu ul {
float: left;
list-style: none;
}
#menu ul li {
display: inline-block;
width: 130px;
line-height: 18px;
text-align: center;
color: #124191;
font-weight: 400;
font-size: 12px;
background: #fff;
}
#menu ul li a {
text-decoration: none;
font-weight: 400;
font-size: 12px;
/* This is the sub-menu items */
display: block;
}
#menu ul li a:active {
background: fff;
}
Perhaps this is what you're looking for:
Add this to #menu ul:
#menu ul {
height:49px;
margin:0;
}
and this to #menu ul li:
#menu ul li {
height:100%;
}
JSfiddle