I have tried to add drop-down options to my current fixed sidebar menu.
When I try adding new lists to add the extra menus, it just displays them below. When I hover over Three, I want Three One to be displayed to the right of Three and Three Two below Three One.
When I hover over Four, I want Four One" to be displayed to the right of Four and Four Two below Four One. With the same happening when I hover over Four One One
Below is my HTMl and CSS
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}
header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}
header ul {
padding: 0;
}
header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li {
;
display: block;
}
span {
margin-right: 15px;
}
header ul li {
padding: 15px;
}
header ul li:hover {
background-color: #FA5858;
}
<!DOCTYPE html>
<html>
<head>
<title>Menu</title>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<center>
<h1>Logo Here</h1>
</center>
<ul>
<li>
<span class="far fa-newspaper"></span>One
</li>
<li>
<span class="far fa-list-alt"></span>Two
</li>
<li>
<span class="fas fa-user-secret"></span>Three
</li>
<ul>
<li>
<span class="fas fa-user-secret"></span>Three One
</li>
<li>
<span class="fas fa-user-secret"></span>Three Two
</li>
</ul>
<li>
<span class="fas fa-shopping-basket"></span>Four
</li>
<ul>
<li>
<span class="fas fa-user-secret"></span>Four One
</li>
<ul>
<li>
<span class="fas fa-user-secret"></span>Four One One
</li>
<li>
<span class="fas fa-user-secret"></span>Four One Two
</li>
</ul>
<li>
<span class="fas fa-user-secret"></span>Four Two
</li>
</ul>
<li>
<span class="far fa-question-circle"></span>Five
</li>
</ul>
</div>
</header>
</body>
</html>
Try this and you have smile on your face :)
html
<header>
<div class="container">
<center>
<h1>Logo Here</h1>
</center>
<ul>
<li> <span class="far fa-newspaper"></span>One </li>
<li> <span class="far fa-list-alt"></span>Two </li>
<li> <span class="fas fa-user-secret"></span>Three
<ul>
<li> <span class="fas fa-user-secret"></span>Three One
<ul>
<li> <span class="fas fa-user-secret"></span>Three One One </li>
<li> <span class="fas fa-user-secret"></span>Three One Two </li>
</ul>
</li>
<li> <span class="fas fa-user-secret"></span>Three Two </li>
</ul>
</li>
</ul>
</div>
</header>
and improve css
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}
header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}
header ul {padding: 0;}
header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li {
display: block;
position:relative;
}
span {
margin-right: 15px;
}
header ul li {
padding: 15px;
}
header ul li:hover {
background-color: #FA5858;
}
header ul li ul{display:none;}
header ul li:hover ul{display:block; position:absolute; top:0; left:170px; background:#fff; width:200px;}
header ul li ul li a{color:#000; display:inline-block; width:100%;}
header ul li ul li{display:inline-block; width:100%; padding:0;}
header ul li ul li ul{display:none !important;}
header ul li ul li:hover ul{display:block !important;}
jsfiddle
Try this solution
<header>
<div class="container">
<center>
<h1>Logo Here</h1>
</center>
<ul>
<li> <span class="far fa-newspaper"></span>One </li>
<li> <span class="far fa-list-alt"></span>Two </li>
<li> <span class="fas fa-user-secret"></span>Three
<ul>
<li> <span class="fas fa-user-secret"></span>Three One </li>
<li> <span class="fas fa-user-secret"></span>Three Two </li>
</ul>
</li>
</ul>
and
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #2E2E2E;
}
header {
background: #424242;
color: #ffffff;
border-right: #FA5858 3px solid;
position: fixed;
top: 0;
bottom: 0;
width: 175px;
}
header ul {
padding: 0;
}
header a {
color: #ffffff;
text-decoration: none;
font-size: 16px;
}
header li {
display: block;
position:relative;
}
span {margin-right: 15px;}
header ul li {padding: 15px;}
header ul li:hover {background-color: #FA5858;}
header ul li ul{display:none;}
header ul li:hover ul{display:block; position:absolute; top:0; left:170px; background:#fff; width:200px;}
header ul li ul li a{color:#000; display:inline-block; width:100%;}
header ul li ul li{display:inline-block; width:100%; padding:0;}
jsfiddle
Related
Here's my HTML:
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
</body>
Here's my CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Josefin Sans", sans-serif;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
And this is the output I'm getting:
I'd like my output to be like this instead (ignore the spacing difference, just my screenshot, but have them split in the center like so):
What's the best way of doing this?
I'm thinking of creating another unorder list and moving it, but I don't know how to do that.
Make use of justify-content: space-between;.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links, .logo {
text-decoration: none;
color: #000;
}
.navbar {padding: 20px;}
.navbar, ul {display: flex; flex-direction:row;}
ul li {padding: 0 5px;}
.wrapper {display:flex; justify-content: space-between; width:100%; }
<nav class="navbar">
logo
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
I tried so many times to work on a nested list but it appears in the middle of the page not under its parent. Also does not appear using hover. I tried an tried but nothing works. below is both the html and css. wahat margin and position should I use? what is the problem with hover?
<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="header">
<img height="200px " width="200px" src="logo.jpg">
<h1> Life Clinck
</h1>
<hr>
</div>
<nav class="navClass">
<ul>
<li> map </li>
<li> apponintment</li>
<li> contact </li>
<li> clincks </li>
<ul class="submenu">
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</ul>
</nav>
</body>
</html>
Here is the css code
body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;
}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;
}
h1{
text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{
list-style: none;
}
.navClass > ul > li{
padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
ul.submenu{
list-style: none;
margin-left: -10px;
display: none;
}
ul.submenu > li{
font-family: "Tahoma";
}
.navClass li:hover
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;
}
Best Regards
body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;
}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;
}
h1{
text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{
list-style: none;
}
.navClass > ul > li{
padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}
ul.submenu{
list-style: none;
margin-left: -10px;
display: none;
}
ul.submenu > li{
font-family: "Tahoma";
}
.navClass li:hover
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;
}
<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="header">
<img height="200px " width="200px" src="logo.jpg">
<h1> Life Clinck
</h1>
<hr>
</div>
<nav class="navClass">
<ul>
<li> map </li>
<li> apponintment</li>
<li> contact </li>
<li> clincks
<ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Move the nested ul inside the li to make it work. See the snippet...
See below the changes...
<li> apponintment</li>
<li> contact </li>
<li> clincks
<ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
<li> 1 </li>
<li> 2</li>
<li> 3 </li>
<li> 4 </li>
<li> 5 </li>
</ul>
</li>
you need to put the <ul> inside the parent <li>.
Like this:
<ul>
<li>test</li>
<li>test
<ul>
<li>sub-item</li>
<li>sub-item</li>
</ul>
</li>
<li>test</li>
<ul>
I wonder if it is possible to make the following work:
#keepwidth {
width: 1000px;
}
.row.top-menu > ul {
padding: 0;
}
.row.top-menu > ul > li {
display: inline-block;
}
.row.top-menu > ul > li > a {
display: inline-block;
background-color: #009ec3;
color: #fff;
min-width: 123px;
text-align: center;
text-transform: uppercase;
border: 2px #009ec3 solid;
border-radius: 3px;
margin: 0;
}
.row.top-menu > ul > li > a:hover {
background-color: #90d2ec;
color: #666;
text-decoration: none;
}
.row.top-menu > ul > li.dropdown:hover ul {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="keepwidth">
<div class="row top-menu">
<ul>
<li>
asdas
</li>
<li class="dropdown">
Hover here <span class="caret"></span>
<ul class="dropdown-menu">
<li>
temp
</li>
</ul>
</li>
<li>
sadsad
</li>
<li>
asdasda
</li>
<li>
sadasdasdsa
</li>
<li>
sadasdsadsa
</li>
<li>
sadasdsasdasdsa
</li>
</ul>
</div>
</div>
I do not wish to make use of JavaScript and I do not wish to move the dropdown menu element around (e.g. margin-top: 0 or margin: 0) and I want to make the dropdown appear when hovering both the dropdown menu itself and the button refering to it.
Since you're using Bootstrap, you'll need to follow their CSS conventions as explained here in order to get predictable behavior:
https://jsfiddle.net/Bendrick92/mgny3g87/
#keepwidth {
width: 1000px;
}
.navbar-nav > li > a {
display: inline-block;
background-color: #009ec3;
color: #fff;
min-width: 123px;
text-align: center;
text-transform: uppercase;
border: 2px #009ec3 solid;
border-radius: 3px;
margin: 0;
}
.navbar-nav > li > a:hover {
background-color: #90d2ec;
color: #666;
text-decoration: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="keepwidth">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
asdas
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" role="button">
Hover here <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
temp
</li>
</ul>
</li>
<li>
sadsad
</li>
<li>
asdasda
</li>
<li>
sadasdasdsa
</li>
<li>
sadasdsadsa
</li>
<li>
sadasdsasdasdsa
</li>
</ul>
</div>
</div>
I´m trying to make a responsive navigation bar, I wan´t a element in the right of the nav, like this: Example
I was putting float:right, but it doesn´t work, after that, I tried with margin-left, but if I use margin left, it won´t be responsive. The element with the float left is a li element. This is all my HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Responsive Menu</title>
</head>
<body>
<div class="container">
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li class="test">
I amsterdam
</li>
<li class="test">
La Ciudad
<ul>
<li>
Museos
<ul>
<li>Museo van Gogh</li>
<li>Rijksmuseum</li>
<li>Casa de Ana Frank</li>
<li>Museo Casa de Rembrandt</li>
</ul>
</li>
<li>
Lugares
<ul>
<li>Vondelpark</li>
<li>Barrio de Jordan</li>
<li>Red Light Distrit</li>
</ul>
</li>
</ul>
</li>
<li class="test">
Alojamiento
<ul>
<li>
Hoteles
<ul>
<li>Los mejores Hoteles</li>
<li>Hoteles más económicos</li>
</ul>
</li>
<li>
Albergues
</li>
</ul>
</li>
<li class="test">
Eventos
<ul>
<li>
Concierto Kanye West
</li>
<li>
Ajax - Real Madrid
</li>
<li>
Amsterdam Fashion Week
</li>
</ul>
</li>
<li class="languages">
Languages
<ul>
<li>
English
</li>
<li>
Español
</li>
<li>
Français
</li>
<li>
Deutsch
</li>
</ul>
</li>
</ul>
</div>
And my CSS, I thought that it could be a problem for other styles, but the class .languages is the last one, them, I tried with an ID, but I got this:
The CSS is this:
body, nav, ul, li, a {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: red;
}
a {
text-decoration: none;
}
.container {
width: 100%;
}
.toggleMenu {
display: none;
background: #666;
padding: 10px 15px;
color: #fff;
}
.nav {
list-style: none;
*zoom: 1;
background:#175e4c;
position: relative;
}
.nav:before,
.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 9em;
}
.nav a {
padding: 10px 15px;
color:#fff;
*zoom: 1;
}
.nav > li {
float: left;
border-top: 1px solid #104336;
z-index: 200;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
z-index: 100;
}
.nav li li a {
display: block;
background: #1d7a62;
position: relative;
z-index:100;
border-top: 1px solid #175e4c;
}
.nav li li li a {
background:#249578;
z-index:200;
border-top: 1px solid #1d7a62;
}
#languages{
float: right;
}
I'm not sure why it wasn't working for you. Using your example code but simply adding id="languages" to the li element seems to work. See https://jsfiddle.net/eaLow5h3/
In your css3 you have id as a selector (#languages)and not a class! Try to change the '#' to '.' . If this doesnt work add to your css this path
.nav > li.languages{
float: right;
}
I am working on this code its a type of menu, which sticks to the bottom of the screen. i wanted drop up menu on hovering over various items. but my problem is the submenus are increasing towards downwards where they should be increasing upwards.... here is my code please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
Dropdown menu
</title>
<style type="text/css">
body{
padding: 3em;
}
#menu ul {
font: 12px georgia;
list-style-type:none;
position:fixed;
left:0px;
bottom:0px;
height:50px;
width:100%;
}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;
}
#menu a:hover {
background:#E3E4FA;
}
#menu ul li ul li {
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background:#E3E4FA;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;
}
#menu ul li {
float: left;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background:#E3E4FA;
}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;
padding-bottom:13px;
}
#menu li{
position:relative;
float:left;
}
#menu ul li ul, #menu:hover ul li ul{
display:none;
list-style-type:none;
padding-bottom:0px;
}
#menu:hover ul, #menu:hover ul li:hover ul{
display:block;
}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<center>
<a href="X">
Home
</a>
</center>
<ul>
<li>
<a href="#">
About Us
</a>
</li>
<li>
<a href="#">
Disclaimer
</a>
</li>
</ul>
</li>
<li>
<center>
<a href="#">
Practice Areas
</a>
</center>
<ul>
<li>
<a href="#">
Civil Law
</a>
</li>
<li>
<a href="#">
Criminal Law
</a>
</li>
</ul>
</li>
<li>
<a href="#">
Family Law
</a>
<ul>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
<li>
<a href="#">
Joomla
</a>
</li>
<li>
<a href="#">
Drupal
</a>
</li>
<li>
<a href="#">
Wordpress
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Updated : Demo
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>