I need some help with a navigation bar! I want to make it horizontal and they're all seperate, kinda like the bit next to the stack overflow thingy, (where it says: questions, tags etc.).
I tried just doing a menu but I realised that treats it all as one, not seperate things, so I added divs and everything went askew when I altered the CSS to make sure it gets eeverything within the divs, so I reverted it back to it's original menu form.
Here's my HTML:
<!-- navigation bar for: ALL PAGES --->
<nav style="width=100%;">
<ul id="menu">
<li>Welcome</li>
<li>Review
<ul>
<li>Customer Reviews</li>
<li>Leave a Review</li>
</ul>
</li>
<li>Gallery</li>
<li>Discounts
<ul>
<li>Refer us!</li>
<li>Claim discount</li>
</ul>
</li>
<li>Send me an email!
</li>
</ul>
</nav>
<!-- end navigation bar for: ALL PAGES --->
and my CSS:
/* nav */
#menu {
margin:0 auto;
display: inline-block;
list-style-type:none;
padding:0;
}
#menu li {
float: left;
}
#menu li a {
font-family:helvetica;
display:block;
padding:10px 10px;
text-decoration:none;
}
#menu li a:hover {
}
#menu, #menu ul {
margin:0 auto;
padding: 0;
}
#menu li {
float: left;
position: relative;
list-style-type: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
}
#menu li a {
white-space: nowrap;
}
Are you looking for this
Then use this
#menu li {
float: left;
position: relative;
list-style-type: none;
background:gray;
margin-left:10px;
margin-top:5px;
}
Related
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.
On the 'shop' tab I have 5 drop down options that link to a specific part of content on the shop page. However my code does not seem to work, as when you hover over the shop tab when on the home page, the navigation appears inline with the rest of the navigation, whereas I would like the content to display below the word shop as a drop-down list.
This is the HTML
<pre>
<div id="navigation">
<ul class="nav-bar">
<li>home</li>
<li class="current">shop
<ul>
<li>Vintage Collection</li>
<li>Sofas & Beds</li>
<li>Tables & Chairs</li>
<li>Electricals</li>
<li>Storage</li>
</ul>
</li>
<li>about</li>
<li> get involved </li>
<li> contact us</li>
</ul>
</div>
</pre>
and this is the CSS
/* drop down list */
#navigation ul ul {
display: none;
top: 100%;
left:0;
background:#A3CC39;
padding: 0;
align-content: center;
width: 100%;
}
#navigation ul ul li {
float: none;
width: 100%;
margin-left:0px;
}
#navigation ul ul a {
line-height: 120%;
padding: 10px 15px;
}
#navigation ul ul ul {
top: 0;
left: 100%;
}
#navigation ul li:hover > ul {
display: block;
}
I have a feeling the reason it isn't working is to do with my code at the very top of my css which styles the original navigation bar. Really appreciate any help
EDIT: this is rest of the css for the navigation as a whole:
* {
margin:0;
border:0;
padding:0;
}
.wrapper {
max-width: 1000px;
margin: 0px auto;
clear: both;
text-align: center;
}
li {
display: inline;
list-style-type: none;
}
#navigation a:hover{
color: black;
background-color: #6A8F28;
}
#navigation a {
text-decoration: none; color:white;
}
a:visited {
text-decoration: none;
}
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'm currently in my last year of high school and I need to make a basic website.
I've hit a wall with creating my drop-down navlist though.
It works very well, but I have no idea how to make it so that if you scroll over one of the subitems, the background of the hovered-over item covers the whole item.
That sentence was pretty weird, I'm quite new to this.
I've used this jsfiddle thing to sketch the problem, http://jsfiddle.net/5EbSv/5/ .
On the second list item, you can see that the first two list items do not have a fully covered background on hover.
Check out the jsfiddle link for the best example of my problem.
This is the HTML:
<div class="navlist">
<ul id="menu">
<li>Item1</li>
<li>Item2
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>Making an example</li>
</ul>
</li>
<li>Item3
<ul>
<li>SubItem1</li>
<li>SubItem2</li>
<li>SubItem3</li>
<li>SubItem4</li>
<li>SubItem5</li>
</ul>
</li>
<li>Item4</li>
</ul>
</div>
and this is the CSS:
#menu a{
color: #0070A2;
}
#menu, #menu ul {
margin:0 auto;
padding:0;
}
#menu {
display: inline-block;
list-style:none;
}
#menu li {
font-size: 14px;
background: #292A2C;
float: left;
position: relative;
list-style: none;
}
#menu > li:hover > ul {
display: block;
}
#menu > li > ul {
display: none;
position: absolute;
background: #292A2C;
color: white;
}
#menu li a {
display:block;
padding:10px 10px;
text-decoration:none;
font-weight:bold;
white-space: nowrap;
}
#menu li a:hover {
color: white;
background: grey;
}
Thanks for checking it out
You need to remove the left float for sub menus list items, e.g.
#menu li li {float:none;}
I am trying to style my drop down menu so it would look like on my picture:
![drop down menu]()
So far I got this:
`<nav>
<ul id="home">
<li>HOME</li>
</ul>
<ul id="about">
<li>ABOUT</li>
</ul>
<ul id="business">
<li>BUSINESS GROWTH
<ul class="sub-menu">
<li>BUSINESS GROWTH </li>
<li>FAQs</li>
<li>FEES & SCHEDULING</li>
<li>QUESTIONNAIRE</li>
</ul>
</li>
</ul>
`
#business,
#home,
#about
{
list-style-type: none;
}
#business li{
position:relative;
background-color: #004473;
display:inline-block;
width: 180px;
}
#business li a {
color: #fff;
text-decoration: none;
display:inline-block;
}
#business li ul {
position: absolute;
left: -9999px;
background-color: grey;
margin:0;
padding:0;
list-style-type: none;
width: auto;
}
#business li:hover ul {
left: 0px;
display:inline-block;
}
#business li ul li {
background-color: #004473;
width: 180px;
display:inline-block;
margin:0;
padding:0;
}
#business li ul li a {
color:#fff;
text-decoration: none;
font-style: italic;
}
#business li ul li a:hover {
text-decoration:underline;
}
main issues:
display menu horizontally (home about business growth should be on the same horizontal line)
arrow shape of main menu item
a gap between main menu items and the sub-items
http://codepen.io/anon/pen/oDzbH
Could you please help? Very appreciated.
display menu horizontally (home about business growth should be on the same horizontal line)
add this in css
nav,nav ul{
display:inline-block;
}
arrow shape of main menu item
i assume you want it on hover
ul li > a:hover{
display:block;
background:#fff url(images/arrow.png) no-repeat center bottom;
}
a gap between main menu items and the sub-items
add this in css
ul.sub-menu{
margin-top:10px; /* or whatever suits your layout*/
}