PDA

View Full Version : Can't make my Navbar dropdowns go vertically.



DarwinRoss
Jun 5th, 2017, 08:38 PM
My drop downs on my nav bar go horizontally covering up the rest of the nav bar when hovering over them. They should be going vertically below the nav bar but I cannot figure out how to fix it. I am aware there are missing </div> tags but when I place them it breaks the nav bar.

HTLM:
<div id="menubar">
<ul id="menu">
<li class="selected"><a href="index.html">Home</a></li>

<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Products</a>
<div class="dropdown-content">
<a href="#">ServiceDesk</a>
<a href="#">SD-CyberOffice</a>
<a href="#">SD-Mobile</a>
<a href="#">SmartParts</a>
</li>
<!--IF DIV IS PLACED HERE IT BREAKS NAV BAR-->
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Services</a>
<div class="dropdown-content">
<a href="#">Virtual Terminal</a>
<a href="#">Server Hosting</a>

<li><a href="examples.html">Downloads</a></li>
<li><a href="page.html">Forum</a></li>
<li><a href="another_page.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</li>
</div>
</ul>

</div>

CSS:
#menubar
{ width: 960px;
height: 72px;
padding: 0;
background: #333;}

ul#menu, ul#menu li
{ float: left;
margin: 0;
padding: 0;}

ul#menu li
{ list-style: none;}

ul#menu li a
{ letter-spacing: 0.1em;
font: normal 100% arial, sans-serif;
display: block;
float: left;
height: 37px;
padding: 29px 26px 6px 26px;
text-align: center;
color: #FFF;
text-transform: uppercase;
text-decoration: none;
background: transparent;}

ul#menu li a:hover, ul#menu li.selected a, ul#menu li.selected a:hover
{ color: #FFF;
background: #DA251C;}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: DA251C;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #333;
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;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

jmrker
Jun 6th, 2017, 12:22 AM
See if this give you any ideas by comparison.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> CSS Horizontal Menu Example </title>
<!--
From: http://www.webdeveloper.com/forum/showthread.php?363523-CSS-problems post #10 and #13
Modified to use CSS entities instead of images of arrows
-->

<style>
body, div, h1, h2, h3, h4, h5, h6, p,
ul, ol, li, dl, dt, dd, img, form, fieldset,
input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}

body { font-family: Verdana, sans-serif; font-size: 12px; line-height: 20px; }

/*-- nav elements --*/
nav {
margin: 10px auto;
text-align: center;
}

/* nav images */
nav img { vertical-align: middle; }

/*--- widenav class ---*/
.widenav {
width: 100%;
box-sizing: border-box;
background: #738610;
background: linear-gradient(#738610 0%, #bbbbbb 100%);
background: -moz-linear-gradient(#738610 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(#738610 0%,#bbbbbb 100%);
box-shadow: 0px 0px 2px rgba(0,0,0,0.15);
padding: 0 50px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
}

/* widenav line item elements */
.widenav li {
display: inline-block;
width: 14vw;
}

/* widenav links */
.widenav a {
display: block;
padding: 5px 5px;
color: #FFFFFF;
text-decoration: none;
text-align: center;
font-size: 1.5em;
}

/* widenav link on line item hover */
.widenav li:hover a { color: #0A4877; }

/* widenav line item hover */
.widenav li:hover {
background: #8B4513;
background: linear-gradient(#4f5964 0%, #BBBBBB 50%);
background: -moz-linear-gradient(#4f5964 0%, #BBBBBB 50%);
background: -webkit-linear-gradient(#4f5964 0%,#BBBBBB 50%);
}

/* submenu show on line item hover */
.widenav li:hover > .submenu { display: block; }

/*--- submenu class ---*/
.submenu {
background: #FFFBC6;
border-radius: 0px;
padding: 0;
position: absolute;
width: inherit;
display: none;
}

/* submenu line item */
.submenu li {
border-top: 1px solid #FF0000;
border-bottom: 0;
position: relative;
}

/* submenu link */
.submenu a {
padding: 0;
text-align: left;
font-size: 1em; /* can change to larger size */
}

/* submenu line item hover */
.submenu li:hover { background: #FFB263; }

/*--- nav item class ---*/
.navitem { background: #FFB263; }

/* from: https://www.toptal.com/designers/htmlarrows/ */
.submenu a:before { content: "\2192"; cursor: pointer; } /* font-size: 2em; } */

</style>

</head>
<body>
<ul>
<nav>
<ul class="widenav">
<li><a href="../index.html">The Club</a></li>
<li><a href="../chefs.htm">The Chefs</a>
<ul class="submenu">
<li class="navitem"><a href="../chefs.htm"><b>Active Chefs</b></a></li>
<li><a href="../chefs/name1.htm">Name1</a></li>
<li><a href="../chefs/name2.htm">Name2</a></li>
<!-- was coded as:
<li><a href="../chefs/name1.htm"><img src=../arrow.gif>Name1</a></li>
<li><a href="../chefs/name2.htm"><img src=../arrow.gif>Name2</a></li>
-->
</ul>
</li>
<li><a href="../index.html">Menus</a></li>
<li><a href="../recipes.htm">Recipes</a>
<ul class="submenu">
<li><a href="../recipes/appetizers/appetizers.htm">Appetizers</a></li>
<li><a href="../recipes/salads/salads.htm">Salads</a></li>
<li><a href="../recipes/soups/soups.htm">Soups</a></li>
<li><a href="../recipes/pasta/pasta.htm">Pasta, Rice, etc.</a></li>
<li><a href="../recipes/beef/beef.htm">Beef, Veal, etc.</a></li>
<li><a href="../recipes/pork/pork.htm">Pork</a></li>
<li><a href="../recipes/poultry/poultry.htm">Poultry</a></li>
<li><a href="../recipes/seafood/seafood.htm">Seafood</a></li>
<li><a href="../recipes/salads/salads.htm">Salads</a></li>
<li><a href="../recipes/veggies/veggies.htm">Veggies</a></li>
<li><a href="../recipes/desserts/desserts.htm">Desserts</a></li>
</ul>
</li>
<li><a href="../index.html">Pictures</a></li>
<li><a href="../index.html">Links</a></li>
</ul>
</nav>

<script>

</script>

</body>
</html>



Note: You should enclose your code between [ code] and [ /code] tags (without the spaces)
to make it easier to read and copy as well as retain your formatting.

jmrker
Jun 6th, 2017, 01:20 AM
Simpler example for modifications ...


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> CSS DD Menu </title>

<style>
body{
text-align: center;
font: 16px/1.5 sans-serif;
padding-top: 40px;
background-color: #ECEFF1;
}

.dropdown{
position: relative;
display: inline-block;
font-size: 16px;
color: #FFF;
/* */ width: 150px; /* */
}

/**
Hide the checkbox itself. Checking and unchecking
it we will be done via the label element.
*/

input[type=checkbox] { display: none; }


/* Click to expand button */

label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #57A0D4;
padding: 15px 20px;

cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


/* The ul will have display:none by default */

ul{
position: absolute;
list-style: none;
text-align: left;
width: 100%;
z-index: 1;
margin:0;
padding:0;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

display: none;
}

ul li{
padding: 15px;
background-color: #fff;
color: #4FB9A7;
margin-bottom: 1px;
cursor: pointer;
}

ul li:hover{
background-color: #4FB9A7;
color: #FFF;
}

ul li a{
color: inherit;
text-decoration: none;
}

/**

By using the Following-sibling selector (~),
we can target elements positioned after our checkbox in the DOM tree.

With the state pseudo selector (:checked),
we can make changes depending on the state of the checkbox.

Using this combination of selectors allows to change the color of the label
and show the list of items only when the checkbox is checked.

*/

input[type=checkbox]:checked ~ label { background-color: #3D88BD; }
input[type=checkbox]:checked ~ ul { display: block; }

</style>

</head>
<body>
<div class="dropdown">
<input type="checkbox" id="checkbox-toggle0">
<label for="checkbox-toggle0">List 1</label>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>

<div class="dropdown">
<input type="checkbox" id="checkbox-toggle1">
<label for="checkbox-toggle1">List 2</label>
</div>

<div class="dropdown">
<input type="checkbox" id="checkbox-toggle2">
<label for="checkbox-toggle2">List 3</label>
</div>

<div class="dropdown">
<input type="checkbox" id="checkbox-toggle3">
<label for="checkbox-toggle3">List 4</label>
<ul>
<li><a href="#">Link Five</a></li>
<li><a href="#">Link Six</a></li>
<li><a href="#">Link Seven</a></li>
<li><a href="#">Link Eight</a></li>
</ul>
</div>

<script>
// From: http://tutorialzine.com/2015/08/quick-tip-css-only-dropdowns-with-the-checkbox-hack/
</script>

</body>
</html>


Note: You can also enclose your code between [ php] and [ /php] tags (without the spaces)
for the same reasons, but it also adds color highlights.