<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" href="css/bootstrap.css" rel="stylesheet">
<link type="text/javascript" href="js/bootstrap.js">
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<style>
#media screen and (max-width: 600px) {
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #fff; width: 100%}
li ul {display: none;}
ul li a {display: block;background: #808080;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff; width: 100%}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;width: 100%;z-index: 1}
li:hover li {float: none; }
li:hover a {background: #0026ff;}
li:hover li a:hover {background: #4800ff;}
#drop-nav li ul li {border-top: 0px;}
#s{float: left;position: relative;width: 100%}
}
</style>
</head>
<body>
<div style="float: left" id="s">
<ul id="drop-nav">
<li>Content Management1<span class="glyphicon glyphicon-plus" ></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div style="float: right" id="s"> <ul id="drop-nav">
<li>Content Management2<span class="glyphicon glyphicon-plus"></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul></div>
<div style="float: right;position: relative" id="s"> <ul id="drop-nav">
<li>Content Management3<span class="glyphicon glyphicon-plus" ></span>
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul></div>
<br><br><br><br>
</div>
</body>
</html>
I want this list to be converted into dropdown menu and on click on it, I tried this logic and searched bootstrap classes didn't find any. I want it work like navigation bar of bootstrap as it gets converted to dropdown menu when screen resolution is low and work onclick.
first of all read Difference between id and class might be your code was not working because of it. i just use bootstrap collapse in your code its working fine for me i just change id with classes and some css you can compare your code with it.
ul {
list-style: none;
padding: 0px;
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border: 1px solid #fff;
width: 100%
}
li ul {
display: none;
width: 100%;
z-index: 1
}
ul li a {
display: block;
background: #808080;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
width: 100%
}
ul li a:hover {
background: #f00;
}
li:hover li {
float: none;
}
li:hover a {
background: #0026ff;
}
li:hover li a:hover {
background: #4800ff;
}
.drop-nav li ul li {
border-top: 0px;
}
.s {
position: relative;
width: 100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test1" aria-expanded="false" aria-controls="collapseExample">Content Management1<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test1" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test2" aria-expanded="false" aria-controls="collapseExample">Content Management2<span class="glyphicon glyphicon-plus"></span></a>
<ul id="test2" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<div class="s">
<ul class="drop-nav">
<li><a data-toggle="collapse" href="#test3" aria-expanded="false" aria-controls="collapseExample">Content Management3<span class="glyphicon glyphicon-plus" ></span></a>
<ul id="test3" class="collapse">
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
</ul>
</div>
<br>
<br>
<br>
<br>
Related
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 am learning html and css for front-end web development. While writing code for drop-down box in navigation-menu, i am not getting the desired output. In the navigation menu drop down is opening at the left corner but the navigation link is somewhere else. Please help.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper" ></div>
<div id="name"> <!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu"> <!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul></li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul></li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul></li>
</ul>
</div>
<div> <!
========================Content=========================== >
<ul >Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li></ul>
</div>
</body>
</html>
CSS code:
body {
font-family: lucida console;
font-size: 14px;
color: white;
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
#name {
position: relative;
top: 0;
left: 0;
}
.prince {
color: white;
text-align: center;
padding: 5px;
background-color: rgba(65, 15, 0, 0.5);
}
#wpback {
background-color: black;
position: absolute;
width: 100%;
height: 100%;
}
#wallpaper {
background-image: url('tech.jpg');
opacity: 0.1;
position: absolute;
width: 100%;
height: 100%;
}
#menu {
margin-top: 10px;
background-color: rgba(65, 15, 0, 1);
height: 50px;
position: relative;
}
#menu ul {
padding: 0;
margin: 0;
}
#menu ul li {
list-style: none;
display: inline;
}
#menu ul li a {
margin: 10px;
padding: 16px;
text-decoration: none;
color: white;
line-height: 50px;
}
#menu ul li a:hover {
background-color: gray;
color: black;
transition: ease-in-out 0.2s;
}
#menu ul li ul li {
display: none;
}
#menu ul li:hover ul li {
background-color: silver;
display: block;
width: 220px;
}
#menu ul li:hover ul li a {
margin: 10px;
padding: 15px;
text-decoration: none;
line-height: 50px;
color: black;
}
#menu ul li ul li a:hover {
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body>
<div id="wpback"></div>
<div id="wallpaper"></div>
<div id="name">
<!
========================Name of Company================= >
<header>
<h1 class="prince">PRINCE Institute</h1>
<input type="button" value="Log In" style="float:right"></input>
<input type="button" value="Sign Up" style="float:right">
</input>
</header>
What do you want to know?<br><input type="text"></input>
<input type="button" value="Search"></input>
</div>
<div id="menu">
<!
========================Navigation Menu================= >
<ul>
<li>Home</li>
<li>About
<ul>
<li>A1</li>
<li>A2</li>
<li>A3</li>
</ul>
</li>
<li>Courses
<ul>
<li>Java</li>
<li>Python</li>
<li>Data Base Management System</li>
<li>Machine Learning</li>
<li>Blockchain</li>
</ul>
</li>
<li>Settings
<ul>
<li>Your Profile</li>
<li>Your Cart</li>
<li>Mode</li>
</ul>
</li>
</ul>
</div>
<div>
<!
========================Content=========================== >
<ul>Courses Offered:
<li>Java</li>
<li>Python</li>
<li>Machine Learning</li>
<li>Block Chain</li>
<li>Data Base Management System</li>
</ul>
</div>
</body>
</html>
When i am putting no options in the navigation menu then the options Home, About, Couses & Settings are in line but when i am adding options in the menu in dropdown the individual options come downward.
Aligned Dropdown Content
Determine whether the dropdown content should go from left to right or
right to left with the left and right properties.
CSS code
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
And HTML code is
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
Link 1
Link 2
Link 3
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
How do get CSS to only affect the first list (menu items) only, and not the second list? Please help. I've been at this all day. If you could, copy/paste the complete code back in your response. VERY appreciated!
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
I've only changed two pieces of your code. You will see where I reference the class .menu in your CSS and where i'm using the class="menu" on your drop-nav list.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
.menu li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style>
</head>
<body>
<ul id="drop-nav" class="menu">
<li>Support</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li>Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li>Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
You can give html elements ids or classes, ids are for unique elements and classes are for more common elements.
In the Css you can give a class a set styling. For you problem follow the ideas I present below:
First line html elements give a class
<ul href='#' class="headingItem></ul>
To style those elements with that class (Css):
.headingItem{
Colour:blue
}
Try using a CSS class. You can target only the ` elements with that class:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=windows-1252" http-equiv="content- type">
<title></title>
<style type="text/css">
ul.menu {list-style: none;padding: 0px;margin: 0px;}
ul.menu li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul.menu li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul.menu li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
#drop-nav li ul li {border-top: 0px;}
</style></head>
<body>
<ul id="drop-nav">
<li class="menu">Support</li>
<li class="menu">Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</li>
<li class="menu">Content Management
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>WordPress</li>
<li>Concrete 5</li>
</ul>
</li>
<li class="menu">Contact
<ul>
<li>General Inquiries</li>
<li>Ask me a Question</li>
</ul>
</li>
</ul>
<br>
<br>
<br>
<ol>
<li style="list-style-type: disc;">link1</li>
<li style="list-style-type: disc;">link2</li>
</ol>
</body>
</html>
The CSS is designed to change the link to red when you hover over it. Just want that to happen with the menu list links. Not the Google/Yahoo list links.
You have this
li:hover a {background: #f00;}
Change that to
ul li:hover a {background: #f00;}
This will differentiate it from the ol links
Change li:hover a {background: #f00;} to ul > li:hover a {background: #f00;}.
> means Child, or sub item. This will make only your navigation links (or other links in an ul > li tag) be red when hovered. Or try this: #drop-nav > ul > li:hover a {background: #f00;} for only your navigator.
Hope it helps.
You should name your first ul with class or id and then use this form of CSS selecor ul.class > li. This is the only way to get to the first level of children.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
font-family: Arial;
font-size: 14px;
}
ul {
list-style-type: none;
padding: 0;
}
ul.menu > li {
background-color: red;
float: left;
position: relative;
width: 100px;
margin-right: 5px;
padding: 5px;
}
ul.menu > li ul {
position: absolute;
top: 26px;
left: 0px;
display: none;
}
ul.menu > li:hover ul {
display: block;
}
ul.menu > li ul li {
width: 100px;
padding: 5px;
background-color: green;
}
</style>
</head>
<body>
<ul class="menu">
<li>First
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
<li>Second</li>
<li>Third
<ul>
<li>Sub-First</li>
<li>Sub-Second</li>
<li>Sub-Third</li>
</ul>
</li>
</ul>
</body>
</html>
I am working on the menu/navigation bar for my website, but when I added the code for the information sub menu it failed to work. When I tested it I can click info, and hover over it, but it won't display the sub menu at all.
HTML Code:
<!doctype html>
<!--Opening brackets-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="home.css">
<meta charset="utf-8">
<title>Staff List- Krian Society</title>
</head>
<body>
<!--Header-->
<div id="header">
<table class="header">
<tr>
<td class="left">
Text here
</td>
<td class="right">
<div id=social>
<img src="images/facebook.png" width="32" height="32" alt="Facebook"/>
<img src="images/steam.png" width="32" height="32" alt="Steam"/>
<img src="images/youtube.png" width="32" height="32" alt="Youtube"/>
</div>
</td>
</tr>
</table>
</div>
<!--Banner-->
<div id="banner">
<img src="images/banner.jpg" width="43%" alt="TKS Banner"/>
</div>
<!--Nav Bar-->
<div id="menu">
<hr />
<ul>
<li><a href=index.html>Home</a></li>
<li>Donate</li>
<li>Vote</li>
<li>Info</li>
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
<li>Live Map</li>
<li>Forums</li>
<li>Wiki</li>
</ul>
<hr />
</div>
<!--Footer-->
<div id="footerstar">
<img src="images/star.png" width="100px" height="100px" />
</div>
<div id="footerlegal">
© The Krian Society 2016 | All Rights Reserved.
</div>
<!--Closing brackets-->
</body>
</html>
CSS Code:
#charset "utf-8";
/*Misc CSS*/
Body {
margin: 0px;
background-color: #272727;
}
hr {
border-color: #7b8e19
}
#font-face {
font-family: optimusPrinceps;
src: url('fonts/OptimusPrinceps.ttf');
}
/*Header*/
#header {
background-color: #7b8e19;
color: #ffffff;
text-align: center;
padding: 5px;
}
#header table {
margin-left: 5%;
margin-right: 5%;
}
#social img{
margin-left: 0.5%;
margin-right: 0.5%;
}
table.header {
width: 90%;
}
td.left {
text-align: left;
padding-top: 1%;
}
td.right {
text-align: right;
}
/*Banner*/
#banner {
padding-top: 1%;
text-align: center;
}
/*Nav Bar*/
#menu {
width: 100%;
}
#menu ul {
text-align: center;
color: #ffffff;
font-size: 20px;
}
#menu ul li {
display: inline;
margin-left: 1.5%;
margin-right: 1.5%;
font-family: optimusPrinceps
}
#menu ul li a{
text-decoration: none;
color: #ffffff;
}
/*Footer*/
#footerstar {
width: 100%;
background-color:#7b8e19;
text-align: center;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
}
#footerlegal {
width: 100%;
text-align: center;
background-color:#171717;
color: #FFFFFF;
padding-bottom: 5px;
padding-top: 5px;
font-family: optimusPrinceps
}
/* sub menu */
#menu li:hover .sub-menu {
/*z-index:1;*/
opacity:1;
}
.sub-menu {
width:100%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#2e2728;
}
.sub-menu li {
display:block;
font-size:16px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#3e3436;
}
Please try this:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
<title>CSS Simple Drop Down Menu</title>
</head>
<body>
<div class="drop">
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS:
.drop_menu {
background:#005555;
padding:0;
margin:0;
list-style-type:none;
height:30px;
}
.drop_menu li { float:left; }
.drop_menu li a {
padding:9px 20px;
display:block;
color:#fff;
text-decoration:none;
font:12px arial, verdana, sans-serif;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
You have to keep the sub menu within the li tags. Your code should be:
<li>Info
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
Use the following code to display the submenu::
CSS: Just replace your .sub-menu class by
.sub-menu {
padding: 10px;
position: absolute;
transition: opacity linear 0.15s;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
background: #2e2728;
display: none;
left: 46%;
}
HTML: Move your full submenu ul within the "info" li and set class "info" to that li
<li class="info">Info
<ul class="sub-menu">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
Jquery: Use the following jquery to display the submenu on hover "Info" link
<script type="text/javascript">
$('.info').mouseover(function(){
$('.sub-menu').show();
});
$('.info').mouseout(function(){
$('.sub-menu').hide();
});
</script>
I wrote code for you to solve this bug
Here is your codes . NO 1 is html part and NO 2 is css part
<!doctype html><!--Opening brackets--><html><head><link rel="stylesheet" type="text/css" href="home.css"><meta charset="utf-8"><title>Staff List- Krian Society</title></head><body><!--Header--><div id="header"><table class="header"><tr><td class="left">Text here</td><td class="right"><div id=social><img src="images/facebook.png" width="32" height="32" alt="Facebook"/><img src="images/steam.png" width="32" height="32" alt="Steam"/><img src="images/youtube.png" width="32" height="32" alt="Youtube"/></div></td></tr></table></div><!--Banner--><div id="banner"><img src="images/banner.jpg" width="43%" alt="TKS Banner"/></div><!--Nav Bar--><div id="menu"><hr /><ul><li>Donate</li><li>Vote</li><li class="sub-menu-hover">Info<ul class="sub-menu"><li>Test 1</li><li>Test 2</li><li>Test 3</li><li>Test 4</li></ul></li><li>Live Map</li><li>Forums</li><li>Wiki</li></ul><hr /></div<!--Footer--><div id="footerstar"><img src="images/star.png" width="100px" height="100px" /></div><div id="footerlegal">© The Krian Society 2016 | All Rights Reserved.</div><!--Closing brackets--></body></html>
#charset "utf-8";/*Misc CSS*/body {margin: 0px;background-color: #272727;}hr {border-color: #7b8e19}#font-face {font-family: optimusPrinceps;src: url('fonts/OptimusPrinceps.ttf');}/*Header*/#header {background-color: #7b8e19;color: #ffffff;text-align: center;padding: 5px;}#header table {margin-left: 5%;margin-right: 5%;}#social img{margin-left:0.5%;margin-right: 0.5%;}table.header {width: 90%;}td.left {text-align: left;padding-top: 1%;}td.right {text-align: right;}/*Banner*/#banner {padding-top: 1%;text-align: center;}/*Nav Bar*/#menu {width: 100%;}#menu ul {text-align: center;color: #ffffff;font-size: 20px;}#menu ul li {display: inline; margin-left: 1.5%;margin-right: 1.5%;font-family:optimusPrinceps;}#menu ul li a{text-decoration: none;color:#ffffff;}/*Footer*/#footerstar {width: 100%;background-color:#7b8e19;text-align:center;font-weight: bold;padding-top:10px;padding-bottom: 10px;}#footerlegal {width: 100%;text-align: center;background-color:#171717;color: #FFFFFF;padding-bottom: 5px;padding-top: 5px;font-family: optimusPrinceps}/* sub menu */#menu li:hover .sub-menu {/*z-index:1;*/opacity:1;}.sub-menu{width:20%;background:#2e2728;display:none;position:absolute;float:left;top:140px;left:420px;}.sub-menu li {display:block;font-size:16px;}.sub-menu li a {padding:10px 30px;display:block;}.sub-menu-hover{background:#808080;}.sub-menu{background:#808080;}.sub-menu-hover:hover.sub-menu{color:#F00;display:block;opacity:9;}.sub-menu li a:hover, .sub-menu.current-item a {background:#3e3436;}
This is a double part fragment of dropdown menu with double part the issue is that I cannot make the two div be aside each other unless I use the div width to any ration.
the CSS code what I want is a method to display the two div below aside each other without using the width property in the html code.
.navbar ul li a{
text-decoration: none;
color: black;
padding: 16.2px;
display: block;
}
.navbar{
width: 100%;
height: 50px;
position: relative;
margin: 0;
padding: 0;
background-color: #c7ffff;
border:1px solid black;
}
.dropnavbar{
position: absolute;
margin: 0;
padding: 0;
height: 60px;/*can be negliacted if the default is auto*/
}
.active{
float: left;
text-align: center;
list-style: none;
width: 100px;
font-size: 15px;
}
.subnavbar{
display:none;
padding: 0;/*if forgotten the size of the dropdown nav will be greater than it's parrent*/
margin: 0;
}
.navbar li:hover .subnavbar{
display: block;
}
.navbar li:hover li,.navbar li:hover{
background-color:#e0ffff;
}
.subnavbar>li>a:hover{
background-color: aqua;
}
.subnavbar>li:nth-child(n+2){
border-top: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
<link href="navbar.css" rel="stylesheet">
<title>DropDown NavBar Trial 3</title>
</head>
<body>
<header>
<div class="navbar">
<ul class="dropnavbar">
<li class="active">About
</li>
<li class="active">Branches
<ul class="subnavbar">
<li class="active">Egypt
</li>
<li class="active">USA
</li>
<li class="active">UAE
</li>
<li class="active">France
</li>
</ul>
</li>
<li class="active">Categories
<div style="width:auto;">
<div style="float:left; width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
<div style="float:right;width:10%;">
<ul class="subnavbar">
<li class="active">Books
</li>
<li class="active">Electronic Devices
</li>
<li class="active">House Gadgets
</li>
<li class="active">Sport Equipments
</li>
</ul>
</div>
</div>
</li>
<li class="active">Paying
</li>
</ul>
</div>
</header>
</body>
</html>
I hope this example will help you out!!!!
* {
margin:0;
padding:0;
}
#nav {
list-style:none;
height:2em;
}
#nav li {
position:relative;
float:left;
width:192px;
background:#999;
text-align:center;
}
#nav li:hover {
background:#777;
}
#nav a {
display:block;
color:#000;
text-decoration:none;
line-height:2em;
}
/* --------- Drop Down -------- */
#nav ul {
position:absolute;
left:-999em;
top:2em;
list-style:none;
}
#nav li:hover ul {
left:0;
top:auto;
}
<ul id="nav">
<li>Link1</li>
<li>Link2
<ul>
<li>Drop1</li>
<li>Drop2</li>
<li>Drop3</li>
</ul>
</li>
<li>Link3</li>
</ul>