I want to make my navigation bar with dropdown, but there is always distance on left side of the div dropdown. How do I remove that distance?
Here is the code of the navigation bar:
.navbar {
background-color: #6b6b6b;
margin:10px;
}
.navbar ul {
display: inline;
color: white;
font-family: "Agency FB";
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
font-size: 24px;
}
.navbar ul li {
display: inline-block;
padding-right: 10px;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
}
.navbar ul li:hover {
background-color: #cccccc;
}
.navbar ul li ul {
display: none;
position: absolute;
margin-left:-10px;
margin-top:5px;
background-color:white;
color:#6b6b6b;
padding-left:-20px;
font-size:20px;
}
.navbar ul li ul li {
display: block;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
And here is the code of html navigation bar (without link):
<div class="navbar">
<ul>
<li>
Home
</li>
<li>
Category
<ul>
<li>Batik</li>
<li>Party</li>
<li>Office</li>
<li>Casual</li>
<li>Sport</li>
</ul>
</li>
<li>
Information
<ul>
<li>
About Us
</li>
<li>
Cara Belanja
</li>
<li>
Our Location
</li>
</ul>
</li>
<li>
Contact Us
</li>
</ul>
</div>
Thanks before :)
I remade it for you kinda, I'm sure you'll get the jist of it
<div id="nav">
<ul>
<li>Home</li>
<li>Category
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Information
<ul>
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/un64F/3/ for css
I'm not sure I understand what you are asking for exactly but does adding padding-left: 0; to the .navbar ul style have the effect you want?
Related
I have created my nav bar which was working fine but now i tried to add sub menu in my navbar and its not showing sub menu on hover. kindly check and correct me.
First I added <ul> in my <li> tag then I added css to hide nested <ul> then I tried to show <ul> on hover <li>
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
</nav>
Looks like your <li> wrap is incorrect!
here is the fiddle
After Privacy Policy you have created another <li> that shouldn't be needed. you have to wrap the sub-menus with in privacy policy tag not a new one that is one of the reason why the css was not showing data as expected and you were almost there regarding CSS I just fixed it for you! hope it helps.
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</nav>
Why don't you start from this working snippet and try to change data according to your needs :)
HTML Sub-Nav
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
test
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
You have to add an anchor tag in the sub nav you have created. Because currently those sub-tabs are created but are not associated with any super-tab.
Subnav
So add this above your sub-nav code. You are good to go.
I want to make a submenu for a submenu and also change the background color of main menu and background color on hover of submenu. This is my code, what changes should I make? The green background is not visible in submenu and also the submenu of submenu.
#horizontalmenu ul {
padding: 1;
margin: 1;
list-style: none;
}
#horizontalmenu li {
float: left;
position: relative;
padding-right: 100;
display: block;
border: 4px solid #CC55FF;
border-style: inset;
}
#horizontalmenu li ul {
display: none;
position: absolute;
}
#horizontalmenu li: hover ul {
display: block;
background: red;
height: auto;
width: 8em;
background-color: green;
}
#horizontalmenu li ul li {
clear: both;
border-style: none;
}
Html
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
<li>Pakistaan</li>
</ul>
</li>
</ul>
</div>
I have learnt CSS online and I am new to web designing. Need some expert opinion here, I may have written something wrong or stupid. Please forgive that as I am a beginner.
Here are my CSS and HTML codes:
#menu {
float: left;
width: 1000px;
height: 30px;
background-color:#0066FF;
border-bottom: 1px solid #333;``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li{
display:inline;
}
li ul {display: none;}
li:hover ul {display: block; position:relative;}
li:hover li a{background: #0066FF;}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover, #menu li .current{
color: #FFFF00;
}
#menu ul li:hover ul{
width: 150px;
white-space: nowrap
height: 10px;
text-align: center;
background:#0066FF;
}
<div id="menu">
<ul>
<li>Home</li>
<li>Quran
<ul>
<li>Translation</li>
<li>Tajweed</li>
<li>Tafseer</li>
<li>Qoutes</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari</li>
<li>Sahih Muslim</li>
<li> Sunan Abu-Dawud</li>
<li>al-Tirmidhi</li>
<li>al-Nasa'i</li>
<li>Ibn Maja </li>
</ul></li>
<li>Wazaif
<ul>
<li>Allah's help</li>
<li>Rizzaq</li>
<li>Aulaad</li>
<li>Marriage</li>
</ul></li>
<li>Rights & Duties
<ul>
<li>As Parents</li>
<li>As Husband</li>
<li>As Wife</li>
<li>As Son</li>
<li>As Daughter</li>
</ul></li>
<li>Videos
<ul>
<li>Molana Tariq Jameel</li>
<li>Dr Zakir Naik</li>
<li>Dr Farhat Hashmi</li>
<li>Naat videos</li>
</ul></li>
<li>Quran & Science</li>
<li>Library
<ul>
<li>Masnoon Duain</li>
<li>Tib-e-Nabvi</li>
<li>Tafseer</li>
<li>Islamic comerace</li>
</ul></li>
<li>FAQs</li>
<li>Blogs</li>
<li>Contacts</li>
</ul>
</div>
It looks like the problem is that you haven't positioned the sub-menus properly.
Because the sub-menu have not been given position:absolute they remain in the documents flow and so disturb other elements when shown.
Adding position:absolute removes them from the flow and solves the problem.
In order to be positioned according to the parent li, that li needs to be a block (hence display:inline-block)(you could float the li too if that's your choice) and be given position:relative.
Here's a suggestion that should help you along the way.
#menu ul li {
display:inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top:100%;
left:0;
}
li:hover ul {
display: block;
}
JSfiddle Demo
#menu {
float: left;
width: 1000px;
height: 30px;
background-color: #0066FF;
border-bottom: 1px solid #333;
``
}
#menu ul {
float: left;
width: 1000px;
margin: 0;
padding: 7px 0 0 0;
list-style: none;
}
#menu ul li {
display: inline-block;
position: relative;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
li:hover ul {
display: block;
}
li:hover li a {
background: #0066FF;
}
#menu ul li a {
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #FFFFFF;
}
#menu li a:hover,
#menu li .current {
color: #FFFF00;
}
#menu ul li:hover ul {
width: 150px;
white-space: nowrap height: 10px;
text-align: center;
background: #0066FF;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>Quran
<ul>
<li>Translation
</li>
<li>Tajweed
</li>
<li>Tafseer
</li>
<li>Qoutes
</li>
</ul>
</li>
<li>Ahadees
<ul>
<li>Sahih Al-Bukhari
</li>
<li>Sahih Muslim
</li>
<li> Sunan Abu-Dawud
</li>
<li>al-Tirmidhi
</li>
<li>al-Nasa'i
</li>
<li>Ibn Maja
</li>
</ul>
</li>
<li>Wazaif
<ul>
<li>Allah's help
</li>
<li>Rizzaq
</li>
<li>Aulaad
</li>
<li>Marriage
</li>
</ul>
</li>
<li>Rights & Duties
<ul>
<li>As Parents
</li>
<li>As Husband
</li>
<li>As Wife
</li>
<li>As Son
</li>
<li>As Daughter
</li>
</ul>
</li>
<li>Videos
<ul>
<li>Molana Tariq Jameel
</li>
<li>Dr Zakir Naik
</li>
<li>Dr Farhat Hashmi
</li>
<li>Naat videos
</li>
</ul>
</li>
<li>Quran & Science
</li>
<li>Library
<ul>
<li>Masnoon Duain
</li>
<li>Tib-e-Nabvi
</li>
<li>Tafseer
</li>
<li>Islamic comerace
</li>
</ul>
</li>
<li>FAQs
</li>
<li>Blogs
</li>
<li>Contacts
</li>
</ul>
</div>
I've been able to create a horizontal menu using (display:inline) and I now have a drop menu thanks to sousMenu. My problem is that all the submenus, regardless of element I hovered over, appear in the same place. How do I work around this?
My menu code thus far:
<ul>
<li>Home</li>
<li class="sousMenu">About Us
<ul>
<li>Board of Directors</li>
</br>
<li>Student Profiles</li>
</br>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul>
<li>Donations</li>
</br>
<li>Job Board</li>
</br>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul>
<li>Connections</li>
</br>
<li>Gallery</li>
</br>
<li>Tours</li>
</ul>
</li>
CSS:
#navcontainer ul {
/*margin: 0;*/
margin-left: auto;
margin-right: auto;
padding: 0;
top:180;
right:20;
width:800px;
list-style-type: none;
text-align: center;
position: absolute;
color: #fff;
background-color: #003300;
padding: .2em 1em;
}
#navcontainer ul li {
display: inline;
padding-left:2cm;
}
#navcontainer ul li a {
text-decoration: none;
color: #fff;
background-color: #030;
}
#navcontainer ul li a:hover {
color: #fff;
background-color: #000;
}
.sousMenu:hover ul {
display: block;
}
.sousMenu ul {
text-align: center;
display: none;
list-style-type: none;
}
Try setting the parent list item to position: relative and the child ul to position: absolute for starters. I made some other slight modifications to your code to achieve the desired effect.
Here's the CSS:
* {
margin: 0;
padding: 0;
vertical-align: baseline;
}
li {
list-style-type: none;
}
ul.main li {
position: relative;
display: inline-block;
}
.main li:hover > ul {
display: block;
}
ul.sub {
position: absolute;
display: none;
top: 100%;
left: 0;
}
ul.sub li {
display: block;
}
I also cleaned up the HTML a bit. You were missing a closing </ul> tag as well:
<ul class="main">
<li>Home</li>
<li class="sousMenu">About Us
<ul class="sub about">
<li>Board of Directors</li>
<li>Student Profiles</li>
<li>Projects</li>
</ul>
</li>
<li class="sousMenu">Get Involved
<ul class="sub get-involved">
<li>Donations</li>
<li>Job Board</li>
<li>Join</li>
</ul>
</li>
<li class="sousMenu">Resources
<ul class="sub resources">
<li>Connections</li>
<li>Gallery</li>
<li>Tours</li>
</ul>
</li>
</ul>
Here's the fiddle: http://jsfiddle.net/vXhZb/2/
I have recently added a drop down menu to my website... well, in the works of adding a drop down menu to my website. I have the list displayed horizontally but the drop down portions of the list are not.. dropping down. I was wondering if someone would be able to take a look and tell me what I am doing wrong?
Thanks, here is my code.
HTML
<ul id="main-nav">
<li>Home</li>
<li>Products</li>
<ul>
<li>Apparel</li>
<li>Gloves</li>
<li>Punching Bags</li>
<li>Protection</li>
<li>Accessories</li>
</ul>
<li>Wholesales</li>
<ul>
<li>Equipment Catalogue</li>
<li>Wholesale Inqueries</li>
</ul>
<li>Contact</li>
<ul>
<li>Direct Contact</li>
<li>YouTube Channel</li>
<li>LinkedIn Page</li>
<li>Facebook Page</li>
</ul>
</ul>
CSS
#main-nav,
#main-nav ul {
list-style: none;
}
#main-nav {
float: left;
}
#main-nav > li {
float: left;
}
#main-nav li a {
display: block;
height: 25px;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#main-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#main-nav ul li a {
width: 80px;
}
#main-nav li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#main-nav {
font-family: Arial;
font-size: 12px;
background: #880202;
}
#main-nav > li > a {
color: #fffff;
font-weight: bold;
}
#main-nav > li:hover > a {
background: #c90000;
color: #ffffff;
}
/* Submenu
------------------------------------------*/
#main-nav ul {
background: #880202;
}
#main-nav ul li a {
color: #ffffff;
}
#main-nav ul li:hover a {
background: #c90000;
}
put this code in you code and check
<ul id="main-nav">
<li>Home</li>
<li>Products
<ul>
<li>Apparel</li>
<li>Gloves</li>
<li>Punching Bags</li>
<li>Protection</li>
<li>Accessories</li>
</ul></li>
<li>Wholesales
<ul>
<li>Equipment Catalogue</li>
<li>Wholesale Inqueries</li>
</ul></li>
<li>Contact
<ul>
<li>Direct Contact</li>
<li>YouTube Channel</li>
<li>LinkedIn Page</li>
<li>Facebook Page</li>
</ul></li>
</ul>
li tag is over after the sub menu ul tag