I'm making my first website with HTML and CSS and it's all gone fine, but now I'm stumped. I made a pretty typical horizontal menu under my header using the inline command in my CSS. Then I decided I wanted drop down elements on my menu, so deleted all my menu css and copied in some new from a tutorial for horizontal drop down menus online. The drop downs work perfectly, but now, for some reason, my menu is vertical! Any ideas how I can make it horizontal again? Hoping it should be relatively easy! Thanks so much.
Here's my html (in my .html sheet)
<div class="header">
<div class="topimagebox">
<img src="images/header1.jpg" class="topimage"; alt="Nets drying at Folkestone harbour";>
</div> <!--topimagebox-->
<ul id="Menu">
<li >Home</li>
<li >About
<ul>
<li >Context</li>
<li >The Project</li>
<li >People</li>
</ul>
</li>
<li >News</li>
<li >Publications</li>
<li >Case Studies</li>
<li >Contact
<ul>
<li >Contact</li>
<li >Get Involved</li>
</ul>
</li>
<li class="menu" >Impact</li>
<li class="menu">Links</li>
</ul>
</div> <!--header-->
And here's my CSS (in a seperate stylesheet)
div.header {
background-color: white;
width: 1000px;
margin-bottom: 10px;
}
ul {
padding: 0px;
padding-top: 20px;
padding-bottom: 20px;
margin: 0px;
}
li {
width: 850px;
margin:0px auto 0px auto;
}
#Menu {
margin: 0;
padding: 0;
height: 1em; }
#Menu li {
list-style: none;
float: left; }
#Menu li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#Menu li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#Menu li:hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#Menu li:hover li {
float: none; }
#Menu li:hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#Menu li li a:hover {
background-color: #8db3ff; }
I put in my generic ul and li in case that had something to do with it. If anyone can help, I'd really appreciate it.
li {
width: 850px; //<-- This is your problem.
margin:0px auto 0px auto;
}
If you remove the width the li-elements will float next to each other, until there isnt anymore room for it to float, then it will break onto a new row.
Related
I have a navigation menu on my website. It works, however when hovering over a menu item with sub-items they disappear when trying to click on them. It appears that there is a spacing issue with these items.
*Additionally, I am trying to figure out how to insert a | between the menu items. If you could share some insight that would be amazing. I only have basic coding knowledge as you can probably tell from my post.
I appreciate the assistance!
/* do not change */
.container {
overflow: unset;
}
#container ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
#container ul li ul li {
display: none;
}
/* can change */
#container {
text-align: center;
}
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
#container ul li a {
color: black;
text-decoration: none;
font-weight: bold;
display: block;
}
#container ul li a:hover {
text-decoration: none;
border-radius: 0px;
color: #1dcdfe;
}
#container ul li:hover ul li {
background-color: white;
display: block;
margin-left: 0px;
}
<div id="container">
<ul>
<li><a href='#scroll-home'>Home</a></li>
<li><a href='#'>About Us</a>
<ul>
<li><a href='#scroll-whyhere'>Why You're Here</a></li>
<li><a href='#scroll-ourmethod'>Our Method</a></li>
<li><a href='#scroll-whyus'>Why Choose US</a></li>
<li><a href='#scroll-testimonials'>Testimonials</a></li>
</ul>
</li>
<li><a href='#'>Our Services</a>
<ul>
<li><a href='#scroll-wetreat'>What We Treat</a></li>
<li><a href='#scroll-packages'>Packages & Pricing</a></li>
</ul>
</li>
<li><a href='#scroll-faq'>FAQs</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
If I'm understanding you correctly, you want horizontal separators on your top-most navigation elements.
To do this, you can add borders to your li elements and then exclude the last one, like so:
#container ul li {
// ... other styles here
border-right: 1px solid black;
}
/* Add this additional style so that the last item doesn't receive the border */
#container ul li:last-child {
border-right: none;
}
A working example can be found at https://codepen.io/BrandonClapp/pen/wvGqrmQ
Following code add the pipes between menu's
#container > ul > li {
border-right: 1px solid black;
}
#container > ul > li:last-child {
border-right: 0;
}
Well thats because you have given every li a specific height here:
#container ul li {
width: 130px;
height: 30px;
line-height: 30px;
float: left;
text-align: center;
margin: 5px;
border-radius: 0px;
}
Which does not let the box grow when its hovered. You can give the nav buttons that have the hovering option an id and give the following code:
#container ul li #drop_down{
height: 100%;
}
For hindering future confusion, if you want to select direct children, use >, like so:
#container > ul {
margin: 0px;
padding: 0px;
list-style-type: none;
display: inline-block;
}
Here you have not used it, so even the inner ul is having these attributes, which ruins it. If you change it to the code above it will get fixed. Why? because the inner ul has the display: inline-block; attribute in your code which should not be.
Furthermore, Try giving the box a background-color and a z-index, so it will not keep detecting hover in behind boxes, in this case contact button.
For your other question I refer you to this link:
How to make a vertical line in HTML
And, or:
https://medium.com/#hollybourneville/creating-border-lines-using-pseudo-elements-in-css-a460396299e8
Need help adding social media icons on the left side of the top bar on our website using html. I added this top bar using html so i wouldn't mind adding a new code with the left aligned social media icons, i have the photos so just need the code. Also, trying to add menu separators for each item and i am not sure how to do that either. Website: http://www.stephensengineering.com/stephens33/
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
<div id="navbar">
<ul>
<li style="float:left"><a class="active" href="about">facebook</a></li>
<li style="float:left"><a class="active" href="#about">twitter</a></li>
<li style="float:left"><a class="active" href="#about">linkedin</a></li>
<li>project#stephensengineering.com</li>
<li>888-300-0642</li>
<li>Stephens University</li>
<li>Submit Assignment</li>
</ul>
</div>
Here's my solution. I added a few lines of code at bottom of the css file. In html file i added img tag inside the respective tags. Hope it will help you.
#navbar ul {
margin: 0;
padding: 10px;
list-style-type: none;
text-align: right;
background-color: #000;
}
#navbar ul li {
display: inline;
}
#navbar ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #000;
}
#navbar ul li a:hover {
color: #000;
background-color: #fff;
}
#navbar{
position: fixed;
z-index: 100000; /*To bring the navbar to the top of the stacking context*/
width: 100%;
}
nav.stricky-fixed.fadeInDown.animated{
top:40px; /*Since this element is already set as relative in the original code,
the top property places the slideIn menu 40px (height of black nav menu)
from the top of the page.*/
}
.social-icon-wrapper:hover {
background-color: transparent !important;
}
.social-icon {
width: 20px;
vertical-align: top;
}
<div id="navbar">
<ul>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/tonPA8V.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/fEvitJl.png"></a></li>
<li style="float:left"><a class="social-icon-wrapper" href="#about"><img class="social-icon" src="https://i.imgur.com/UiwMSrt.png"></a></li>
<li>project#stephensengineering.com</li>
<li>888-300-0642</li>
<li>Stephens University</li>
<li>Submit Assignment</li>
</ul>
</div>
In a section of website I'm working on I have a NAV element that contains three sections: About, Portfolio, Contact. I'm trying to make it so that when you hover over the Portfolio section, a drop down appears allowing you to choose between two other sections, "Writing Samples" and "Photoshop." I am trying to accomplish this using only CSS.
This is my HTML section:
<nav>
<ul>
<li>
<a href="index.html" >About</a>
</li>
<li class="subNav">
<a class="selected" >Portfolio</a>
<ul>
<li>Writing Samples</li>
<li>Photoshop</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
And CSS:
nav {
position: absolute;
bottom: 0;
right: 0;
padding: 10px 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
nav ul li.subNav ul {
display: none;
}
nav ul li.subNav:hover ul {
display: block;
}
I have reached the point that when I hover over the Portfolio list item, you see the resulting list items "Writing Samples" and "Photoshop", except that it displays these two items as a part of the original unordered list, and moves the "Portfolio" list item above the rest of the items. I would like "Writing Samples" and "Photoshop" to appear vertically under "Portfolio", but I can't quite figure this out with CSS.
This is the basics of it:
nav {
position: absolute;
padding: 10px 0;
}
nav ul {
list-style: none;
;
padding: 0;
}
nav > ul > li {
display: inline-block;
position: relative;
border: 1px solid lightgreen;
/* for demo */
}
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: pink;
}
nav ul li.subNav:hover ul {
display: block;
}
<nav>
<ul>
<li>
About
</li>
<li class="subNav">
<a class="selected">Portfolio</a>
<ul>
<li>Writing Samples
</li>
<li>Photoshop
</li>
</ul>
</li>
<li>
Contact
</li>
</ul>
</nav>
The parent li is given position:relative to provide positioning context.
The submenu is positioned absolutely, at the bottom of the parent li and aligned left.
Note that I have used the direct child selector > to target only the elements I want to.
Then, since the submenu is too wide to be contained within the parent's width, I added white-space:nowrap so that the text will flow as required.
You have the right idea; the comment tags in the HTML below are used to remove space between the "li" elements.
Instead of using display:none, I use visibility: hidden for S.E.O purposes.
Even though you use position: absolute, you should also use z-index so that menu elements are able to be clicked if they are overlapping other content.
.mm,
.sm {
list-style: none;
}
.mm {
position: relative;
margin: 0px;
padding: 0px;
background-color: #000;
border-bottom: 4px solid red;
}
.sm {
position: absolute;
z-index: 1;
visibility: hidden;
background-color: #000;
border-width: 0px 4px 4px 4px;
border-style: solid;
border-color: red;
}
.mm > li {
display: inline-block;
}
.mm > li > a {
display: inline-block;
padding: 8px;
}
.sm a {
display: block;
padding: 8px;
}
.mm > li > a:hover + .sm,
.sm:hover {
visibility: visible;
}
.mm a {
text-decoration: none;
color: #FFF;
}
.mm a:hover {
text-decoration: underline;
color: yellow;
}
<nav>
<ul class="mm">
<li>AAA</li><!--
--><li>BBB
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li><!--
--><li>CCC
<ul class="sm">
<li>SUB</li><!--
--><li>SUB</li><!--
--><li>SUB</li>
</ul>
</li>
</ul>
</nav>
<h1>CSS NAVIGATION</h1>
I set up a menu that uses buttons with links, ul's, and li's inside them. It works fine in Chrome, Android, Safari, and Opera. In Firefox, when the ul's appear the nav jumps down. In IE, the ul's don't display. In both, the links don't appear.
Edit: I chose to do this with buttons because i thought it gave me flexibility a regular ul menu wouldn't - background images, images inside them, attaching javascript events. It also of course creates a layout that is a row of buttons without any extra styling.
http://codepen.io/briligg/pen/emwXaw?editors=110
nav { position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
}
nav button {
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
height: 32px;
font: 16px;
}
nav button ul {
position: relative;
display: none;
}
nav button:hover ul, nav button:focus ul {
display: block;
z-index: 7;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
margin-top: 9px;
padding: 6px 2px;
}
nav button:hover li, nav button:focus li {
padding: 8px 2px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover, nav a:focus {
color: #52cbff;
}
Then in the html, the ul's are nested in the buttons, with links, like this:
<button tabindex="4">Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</button>
In even creating this thing i was already at the limits of my knowledge. I don't know how to go about finding work-arounds, or if that is even possible in this case. Help with even knowing where to go to figure this out would be appreciated, never mind an actual solution to the problem. I've been looking for information and haven't found any.
IE has button {overflow:hidden;} style by default, You can rest that as follows.
nav button {
overflow: visible;
}
Edit: In order to get the links working we'll have to redo the markup, I also adjusted the CSS for the HTML changes. see the following code snippet.
nav {
position: fixed;
top: 0px;
right: 0px;
width: 70%;
float: right;
padding: 2%;
height: 34px;
max-height: 34px;
margin: 5px 0;
white-space: nowrap;
}
nav > ul > li {
display: inline-block;
position: relative;
font-size: 16px;
height: 32px;
line-height: 32px;
border: 1px solid #666666;
border-radius: 10px;
background-color: #3b4c6d;
color: white;
padding: 0 4px;
}
nav > ul > li > ul {
display: none;
list-style: none;
background-color: #3b4c6d;
border: 1px solid #666666;
border-radius: 10px;
padding: 6px;
position: absolute;
z-index: 7;
top: 32px;
left: 0;
}
nav > ul > li:hover > ul {
display: block;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: #52cbff;
}
<nav>
<ul>
<li tabindex="1">Purpose</li>
<li tabindex="2">
Moon vs Mars
<ul tabindex="3">
<li>Ambiance</li>
<li>Communication</li>
<li>There and Back</li>
</ul>
</li>
<li tabindex="4">
Being There
<ul tabindex="5">
<li>World Domination</li>
<li>Chickens</li>
<li>Down with Gravity</li>
<li>The Moonstar</li>
</ul>
</li>
</ul>
</nav>
The problem must be caused by this Link inside a button not working in Firefox (and IE).
Full Demo: http://codepen.io/anon/pen/KwOqKv
Instead of putting <a> in <button>, put all <a> inside <li>. Also, as you had, put the secondary links inside another <ul> in the <li>.
<ul class='primary-links'>
<li class='primary'><a href='#'>Primary link</a></li>
<li class='primary'>
<a href='#'>Another primary link</a>
<ul class='secondary-links'>
<li class='secondary'><a href='#'>Secondary Link</a></li>
<li class='secondary'><a href='#'>Another secondary link</a></li>
</ul>
</li>
</ul>
The primary links are display:inline-block in order for them to display horizontally while the secondary links are display:none to initially hide them. The secondary links become visible when the primary links are hovered over. position:absolute removes the secondary links from the document flow preventing the primary links from jumping down when the secondary links become visible.
.primary {
display: inline-block;
}
.secondary-links {
display: none;
position: absolute;
}
.primary:hover > .secondary-links {
display: block;
}
body {
font: 1em/1.5 sans-serif;
}
a:link,
a:visited {
color: #08f;
text-decoration: none;
}
a:hover,
a:active,
a:focus{
color: #f80;
}
ul {
list-style: none;
margin: 0;
padding: .25em;
border-radius: .25em;
background: #fff;
border: thin solid #ccc;
box-shadow: 0 0 .25em #ccc;
}
li {
margin: .5em;
}
nav > ul > li {
display: inline-block;
}
li > ul {
display: none;
position: absolute;
}
li:hover > ul {
display: block;
}
<nav>
<ul>
<li><a href='#'>One</a></li>
<li>
<a href='#'>Two</a>
<ul>
<li><a href='#'>Two One</a></li>
<li><a href='#'>Two Two</a></li>
<li><a href='#'>Two Three</a></li>
</ul>
</li>
<li>
<a href='#'>Three</a>
<ul>
<li><a href='#'>Three One</a></li>
<li><a href='#'>Three Two</a></li>
<li><a href='#'>Three Three</a></li>
<li><a href='#'>Three Four</a></li>
</ul>
</li>
</ul>
</nav>
As a HTML/CSS newbie, I am trying to create a centered horizontal main menu with vertical drop down submenus.
The submenus are supposed to perfectly align with the parent main menu element.
Cannot attach picture due to lack of reputation points, but have a visualization in case that could help anyone.
In my current set-up, the submenu items (Directions and Google Maps) are aligned completely to the left and I cannot get them nicely under the main menu item (Location). I believe the solution lies with the absolute/relative positioning of elements, but I cannot figure out how to implement it without destroying the general layout.
Finally, the sub-menu boxes should all have the same width, while the main menu items can vary according to their normal length.
The end result would be similar to this example, unfortunately the code for it gives a 404 error.
This is my HTML:
#nav {
color: orange;
list-style: none;
font-weight: bold;
text-align: center;
border: 1px solid orange;
border-width: 1px 0;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 1ex;
text-decoration: none;
color: orange;
}
#nav a:hover {
text-decoration: none;
color: white;
background-color: orange;
}
#nav li ul {
display: none;
list-style: none;
position: absolute;
}
#nav li ul li {
display: block;
border-bottom: 1px solid orange;
border-width: 1px 0;
text-align: left;
}
#nav li:hover ul {
display: block;
}
<ul id="nav">
<li>Home
</li>
<li>
Location
<ul>
<li>Directions
</li>
<li>Google Maps
</li>
</ul>
</li>
<li>Pictures
</li>
<li>Prices & Availability
</li>
<li>General Info
</li>
<li>Reservations & Contact
</li>
</ul>
Apologies for the newbie requests & cheers to all for helping!
Parent(#nav li) must be positioned relatively.
Initially ul renders with some padding, you should add padding: 0 to get proper alignment.
#nav {
color: orange;
list-style: none;
font-weight: bold;
text-align: center;
border: 1px solid orange;
border-width: 1px 0;
padding: 0;
}
#nav li {
display: inline;
position: relative;
}
#nav a {
display: inline-block;
padding: 1ex;
text-decoration: none;
color: orange;
}
#nav a:hover {
text-decoration: none;
color: white;
background-color: orange;
}
#nav li ul {
display: none;
list-style: none;
position: absolute;
padding: 0;
left: 0;
}
#nav li ul li {
display: block;
border-bottom: 1px solid orange;
border-width: 1px 0;
text-align: left;
}
#nav li:hover ul {
display: block;
}
<ul id="nav">
<li>Home
</li>
<li>
Location
<ul>
<li>Directions
</li>
<li>Google Maps
</li>
</ul>
</li>
<li>Pictures
</li>
<li>Prices & Availability
</li>
<li>General Info
</li>
<li>Reservations & Contact
</li>
</ul>